Want to be able to delete images uploaded via multi-file uploader using a custom delete icon

[karapetyan.t]

Dear Bubblers,

On my website I will have an ability for users to create listings with multiple photographs. I am using multi-file uploader for this purpose. My set up is an “upload” button, then a pop window where on the left there is the multiple uploader and on the right a repeating group showing thumbnails of the uploaded photos.

When the user exits the pop up, I have another repeating group showing thumbnails of the photos and a delete icon to the right of each image. I can’t quite figure out how to make sure that when the user presses the icon, the uploaded file is deleted and disappears from both the uploader and the repeating group.

I want the user to be able to remove photos they just uploaded, by pressing my own delete icon, instead of from within the multi-file uploader, by pressing the remove button.

Thank you so much,

Tigran

[colin-bubble]

Hi there!

Great question! So the goal here is to “sync” these two lists whenever a change is made to either is that right? One way accomplish this might be using the “Initial Content” property of your multifile uploader.

First you’ll want to store the list of files as they are edited in the multifile uploader in a custom state or other temporary storage, this value will need to be outside the group that contains the uploader. The workflow should look something like “when this uploader is changed set state list of files to uploader’s files”. This value will be the data source for your repeating group that contains the trash can icon. This state will also be set as the “Initial content” of your uploader.

Then, you can add some actions to your delete workflow attached to the trash can icon. In addition to removing the file from the list, this time from the custom state we’ve set up, you’ll also want to trigger “Reset Group/Popup” and reset the group that contains your multi-file uploader. This should force the uploader’s list to reflect the “Initial Content” which is now our updated list!

I hope this helps or sparks and idea of your own to get this working!

[karapetyan.t]

Thanks a lot Colin, will try it out!

[karapetyan.t]

@colin-bubble thank you for the advice! I have, hopefully, a final question, I am struggling to understand how to make the trash icon workflow to delete a file from the list. Do I go to “delete an uploaded file” or something else? When I go to “make changes to a list” it doesn’t show me the option of making changes to the custom state list. Please, let me know if you need more information from me. Thank you!!

[boston85719]

Check out this free tutorial…it might help you

Multiple Image Uploader | NoCode Trainer

[karapetyan.t]

@boston85719 thanks a lot! I started following through, but got stuck at the Schedule API step… I don’t seem to be able to create backend workflows similar to what you have in your tutorial. Am I missing something?

[karapetyan.t]

@boston85719 when I click on tutorial materials, to see the backend workflows, I get a dialogue screen with a message saying I have no access to the document

[boston85719]

Have you been able to access it? I tried to reproduce the issue you described but I am able to access it. Did you successfully access the materials?

[karapetyan.t]

hello @boston85719, sadly still doesn’t work, please see the the photos attached. I did manage to set up backend API manually, however. I am now playing with the set up and run into a problem - multiple file uploader’s value evaluates to a list of files, not images. When we merge a list of images from the custom state with a list of files from multi file uploader, nothing is visible in the repeating group. I managed to solve this issue, I think, by setting custom states to list of files, instead of images. Wanted to let you know to see if you are aware of this issue and if my solution is what you would have done, thanks xx

[boston85719]

Thanks for the details.

Things should be all set now. To view the page in preview you’ll need the username and password which are username and password respectively.

Please let me know if you have issues accessing the editor still.

@karapetyan.t

I am now playing with the set up and run into a problem - multiple file uploader’s value evaluates to a list of files, not images

That is true. The multifile uploader is for uploading files so it evaluates all uploaded content as a file…however, an image is just a file anyway, so this doesn’t affect things.

@karapetyan.t

When we merge a list of images from the custom state with a list of files from multi file uploader

I don’t experience that issue.

@karapetyan.t

I managed to solve this issue, I think, by setting custom states to list of files, instead of images

If that is working for you that is awesome.

@karapetyan.t

Wanted to let you know to see if you are aware of this issue and if my solution is what you would have done, thanks xx

As mentioned I don’t experience the issue so I personally would just do the approach I took, but in Bubble there are always multiple ways to get to the same end result.

[karapetyan.t]

thank you so much @boston85719, really appreciate your advice ! Final question (I hope!). I have applied collapsable height setting as per the tutorial, but the “Container group” does not collapse to make way for “uploading group”. It disappears, but the “uploading group” appears way too far on the right hand side. Please, see photos below:

My reusable element is set up as follows:

I want the thumbnails section to appear in place of the browse photos section.

Thank you!

[boston85719]

That is a responsive design issue. Likely your group you are trying to collapse the height doesn’t have the collapse when hidden checked…also possible that there is something else in the way that you are not seeing on the page.

When it comes to responsive design it can be a challenge. I recently spent 20 hours going through a clients 25 page app to make all aspects responsive and there are so many unknown variables when you are not the person who originally set it up that it is difficult to diagnose the issue.

Another thing on yours with the lower group that has the clear all and the RG, this group probably doesn’t have the correct ‘fixed alignment’ setting on it and also probably doesn’t have the correct max-width or min-width settings.

[karapetyan.t]

@boston85719 thank you so much! I will keep tinkering

[karapetyan.t]

@boston85719 sorry, just one more thing, I have noticed that each time I “upload” images to the multifile uploader to see how the interface work/to experiment(before I press submit and create a “new listing” entry in my database), these files appear in my file manager… I now have more than 154 there! I do not understand why are the files uploaded to the file manager before I press the submit button. If you can help to understand, would appreciate it a lot

[boston85719]

In this tutorial I cover how to handle that.

Multiple Image Uploader | NoCode Trainer

The reason it happens is because the uploader element was built in such a way that it does. There are plugins created for uploading images that don’t do this, but the tutorial covers how to contend with the fact that the Bubble multifile uploader does do it.

[karapetyan.t]

@boston85719 thanks a lot!

[karapetyan.t]

hello @boston85719, hope you are well! I am finally back to working on my project. Have a question, in your tutorial your save as a list button is inside the re-usable element, so that when you press it you can trigger the backend API and write images to your database. In my case, after the uploading happened and the user is happy with their uploaded images, they fill out other parts of the listing and only at the very bottom of the page I have a button “submit”. This creates a new listing in my database, with all sorts of fields, including a “list of images” field". When I try to include the images from the re-usable element in my “create a listing” workflow, it doesn’t offer my “image upload” re-usable element as an option, meaning I can’t save the images in the uploader. Is it because my “submit” button is outside the re-usable element?

[boston85719]

@karapetyan.t

Is it because my “submit” button is outside the re-usable element?

Yes.

You should put in the workflow action on the reusable element to be triggered through a custom workflow. This way, from the page you can trigger the custom workflow to set the actions for saving the uploaded images.

[karapetyan.t]

@boston85719 thank you! I am now stuck on how to make the Multiple Images’ Image-List to be added to my Property Listing’s Property Photos List. Below are some screenshots to explain what I mean, I hope it helps.

My Multiple Images data type:

My Property Photos field from Property Listing data type(set to the list of Multiple Images’es):

I added the save image list workflow as per your video, but as a custom state of the reusable element:

And on my “create a listing” page, I am trying to add all these images from the re-usable group to the Property Listing’s Property Photos Multiple Images’es List in the step AFTER listing creation and re-usable element custom trigger, but I can’t get my head round how to to do it:

Would really appreciate your help

[boston85719]

Why do you need the Multiple Images data type? Why not just save the images during the upload to the Property Listing?