Best way for adding image upload within a repeated collection?

Hello,
I have an edit page where I want users to modify page details and upload a page hero image.

Within the same page, I have a collection of repeating items where I want them to also be able to upload an image specific to each collection item through an image upload item.

The problem is, I can’t seem to get the second image upload (drop) element to work, it is either being added without having its own input or I see an input for it and then it disappears.
Screenshot 2023-03-18 at 3.32.38 AM

I have also tried adding a new element (file drop or file upload) all leading to the same issue.

I was wondering if someone had success using multiple upload components?

Thanks!

Posting here to hopefully get some insights/tips as I can’t really create any additional “upload elements” on the page. Even if I add a file input it doesn’t create its own input variable!

This is really driving me crazy and wasted many hours where I am trying to add the same element over and over.

It’s exactly the same as this post, but with a file uploader instead of an input element.
You need to keep track of the uploaded value with a workflow triggered on change, same as the example with the input element.
The idea is that when you upload the data you don’t pick the values from the elements but you have your variable with all the data.

Thanks for your response.
I am keeping an eye and following that approach. However, I believe you need a workflow step to “Upload Files” where you have to define where the files will be uploaded from so that you can get the URL.

For this step, I am unable to use a different input to get the URLs to then store them within my own custom variable.

Just to demonstrate this, note the attached image where I see only 1 input in the dropdown which is a completely different file uploader used for another purpose. And If I bind this uploader to that input, it screws things for me. Ideally I should have 1 input per upload element, instead of having to connect multiple ones to a single upload input. It doesn’t make sense!
Screen Shot 2023-03-20 at 10.09.23 PM

uploading files to weweb can’t work in this way because the action is for static elements only.
It works if you upload directly to another backend, you just need to adapt the code to dynamically target the corresponding input.

1 Like

Thanks! I didn’t know that this element was only for static stuff! I wish they made this clear on the element itself or gave some sort of alert.

i followed your recommendation and still going through it! I hope it goes well.
Many thanks!

@DrHariri did this work for you? I am also trying to figure this out