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.
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!
@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 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?
@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
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
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.
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.
I don’t experience that issue.
If that is working for you that is awesome.
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.
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:
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.
@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
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.
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?
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.
@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.
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:
