Multi-file uploader Dropzone

Did anyone find a way to show a loading icon or something for the multi-file uploader by the way?

Also just wanted to add my hackywacky solution to the problem with the green loading bar.

What I have done instead is to put the Multi-File uploader inside it’s own group, that I use to control all the clicks. When the group is clicked and the Multi-File Uploader is visible, then I hide the Multi-file Uploader (not the group). When the group is clicked and the Multi-File Uploader is not visible, then I show the Multi-File Uploader. The only problem with this is that when the Multi-File Uploader is not visible, the user will have to click once to show it, and then another time to select files to upload.

Workflow 1: When Group Multi-File Uploaders is clicked (only when Multi-File Uploader is visible) --> Hide Multi-File Uploader

Workflow 2: When Group Multi-File Uploaders is clicked (only when Multi-File Uploader is not visible) --> Show Multi-File Uploader

Cheers

not working with me. Help!

Has anyone found a way of deleting the files that are uploaded to the File manager?

When you delete a file clicking on “remove file”, it doesn’t actually delete the file.

Thanks

1 Like

Hello, you need to use “delete an uploaded file” in order to delete from the file manager. Bubble fixed the bug where files weren’t being deleted in the file manager.

1 Like

Thanks @grace.hallak, but how do you start the work flow “delete an uploaded file” from clicking the “remove file” link in the Multi-file uploader?

I am sorry! I thought you were talking about a button called “remove file” not the one in multi file uploader. My bad.

You can’t start a workflow but what you can do is to set a state (maybe on the page) and when you upload a file, the uploader set the state’s value equal to the multi file uploader’s value. And from there you can control the files. Tell me if you need a demo or something.

Yes please, I would love a demo or something. I don’t know of I’m missing something. But I see a real UX and Privacy issue with the “Remove file” link in the Multi-file uploader. Any user would think its being removed but its not.

Would appreciate some help on this @grace.hallak as I’m trying to find a way for users to upload files but also delete them. And the delete action has to be real for GDPR, it has to be deleted from the File manger.

Thanks

Hi @eurogar,

Were you able to find a solution to this? I’m trying to find a scalable way for users to upload files and delete files to their profile and other data types. I am trying to use the Multi-File uploader or even the more simpler File Uploader but I’m not finding a scalable way to control users uploading any number of files and deleting them in a controlled fashion.

Thanks

This is an example.
You can customize the way you want to show the files. This demo is purposed to show you how to save the files to a state. I think if you want to show the files in a repeating group you need to customize the file uploader and change how things work. Maybe I will make another example showing you how it might look.

1 Like

Woah thanks @grace.hallak , that was fast.

I’m looking at it now but I’m really struggling to understand it. I think I’ve been working too many hours… :wink:

EDIT: Normally my values for custom states have been plain text, seeing your work using “minus” and “merged” has just made my head explode.

Regarding the customization of uploading files. This is how it might look if you customize the way uploading files happen. There may be a way (by using some coding) to let a button work as a file uploader, I have tried many things suggested here on the forum but none of them worked with me.

Regarding the example, let me explain what is happening (this is how I understood it) .

#1: So as you can see the in the workflow tab, there is a workflow “When multi file uploader’s value is changed, set index’s state’s value to the multi file uploader’s value”. So as you may know when you upload a file, it needs to be stored somewhere and that is the AWS storage or the File Manager (same thing but instead you log in to AWS website, the file manager displays what you have files stored in your AWS storage) let us consider the file manager is a place to store the uploaded files. Normally, when you upload the files using the multi file uploader, you have the option to remove it by the text which is “Remove file”. I don’t why it is not working or if it is on purpose, I suggest you send a bug report to the bubble team or email them support@bubble.io
Since the remove file action is not working, we need an alternative solution which is displaying the uploaded files in a repeating group. I know that you may be thinking why not set the data source of the repeating group to be the multi file uploader’s value. Well, here is some advantages I can think of right now:

  1. You can’t delete a file from a list (list is going to be the multi file uploader’s value if you uploaded more than one file).
  2. If you clicked on “Remove file”, the file is gone from the repeating group and it won’t be deleted from the file manager.
  3. If you created a button to delete the file, you can only delete the file from the file manager and not from the list of files (multi file uploader’s value)

The alternative solution is to set the index’s state’s value to the uploader’s value which later you can use the state to display the files, delete the files individually…

#2: I am using minus because when I click on the “x” button, the file needs to be removed from the list (uploader’s value) and deleted from the file manager. This is two seperate steps in the workflow.

#3: I am using merged because if I want to add more files to the current uploaded files, so the new uploaded files won’t replace the old uploaded files. (Considering you are using a repeating group and displaying the files in it…just as shown in the video). Now notice if you add first a file and then a second file, the files may switch places or something or maybe nothing happens because every time you are uploading a file, the uploader’s value is changing. This is case sensitive. What I have done in my app is when I finish uploading files, I reset its value. I have added a button in the example to do so.

I hope you understood (I am not that good at explaining things) . If you have any questions regarding this, please let me know.
Sorry if I have an English mistake, English is not my first language.

1 Like

Just added what I showed in the video to the example.

1 Like

Does this app still work for hiding the green element?

Thanks @grace.hallak for the detailed reply. That helps a lot to understand. Your English is perfect :wink:

1 Like

Tell me how it goes!

Hello all,
please be careful with different quotation marks. On my PC, only following code works: $("#uploader").find(".dropzone").click();
BR
VM