Better Uploader [UPDATED 2023] ☁️

[jonah.deleseleuc]

Making this post because I can’t edit the last one. Will close the old topic after linking this post to it

Useful Links

YouTube Tutorial
Demo
Editor
Better Uploader Plugin | Bubble

Better Uploader is a feature packed tool for bubble developers of all skill levels. One of it’s best features is that it can be incredibly useful for app optimization for large scale apps. It can cut down on a lot of processing time (in case where apps are handling large files and or multiple files at a time), and let’s not forget bandwidth fees

What it does:

• Drag & drop files and folders
• Multi-file uploading
• Multi file & single file uploading progress (as a %)
• Rename files before sending them to the server
• Limit file types & control what file types are displayed in the file explorer
• Set a maximum amount of files to be uploaded at once
• Set a maximum file size (supports above 50mb!)
• Preview your file (such as an image) before sending in to the database
• Separate uploading files locally (to the browser) and sending those files to server
• Enables doing work (processing) on files before sending them to server
• Supports standard style customization (placeholder, background color, font properties, border, etc …)

What does this mean? Well, let’s look at the exposed states:

Pay attention the two highlighted exposed states, this is the interesting part. Once a user uploads a file to the file uploader, an exposed state called “Raw Data” is made available; it is a list of data Urls which can be used as the source of an image in order to preview images before uploading them to the server, for instance.

Better yet: a plugin builder might want to run some code on an image before sending it to the server. For example, I’m building a filter plugin that applies standard image filters to images. The normal workflow would be to use the default bubble uploader which automatically sends files to the server automatically, so the builder would have to

upload image → retrieve image → apply code → upload new edited image → replace image

I say, BLASPHEMY to such inefficiency!

My upload compacts that down to this workflow:

upload image → do code → send to server.

Et voila! Better Uploader cuts down on processing in half in some instances. Imagine, having to apply modifications to 50 files and doing it the default way, you’d have to perform double the processing.

[salemmo409]

Thank you

How can one of the uploaded files be deleted, whether before or after using the “send file to cloud” action?

And what are the best practices to enable the user to modify one or more images after uploading them without having to download them after modifying them and then re-uploading them?

[jonah.deleseleuc]

Right now, that feature is not supported by default. The user would have to select the files again. You’re not the first person to ask about this, so I will probably add this feature eventually.

[salemmo409]

I have issue…

when I upload multiple images like this:

An image duplicates and an image disappears:

I do this workflow:

[jonah.deleseleuc]

a) Make sure you’re on the latest version
b) Have you tried it on the demo page?

I tried to upload three files (by clicking and drag and drop) yet I don’t see the issue you’re describing. If you can’t recreate the problem on the demo page then please check the editor to see how I got it to work.

One more thing: make sure you are using the new responsive engine. The old responsive engine behaves badly with plugins nowadays.

[salemmo409]

I am on the latest version
and this screenshot from demo page:

another thing, the names of files (I drew a circular line around it) I need not to appear in the element and for the element to keep the placeholder, how can I achieve this?

[salemmo409]

I tried to upload file while another files uploding is in progress, and this what happen:

[jonah.deleseleuc]

1. I was able to recreate the first bug, my next update will address the issue. I don’t have an exact date but it will come. You can go back a few versions until you find one that suits you.
2. Yeah, you shouldn’t be allowing users to upload something while an upload is in progress. You can use a parent group’s “This element isn’t clickable” paired with a condition to prevent this from happening. E.g “When Better Uploader’s Raw Data:count > 0 … this element is not clickable”

[salemmo409]

thank you

[jonah.deleseleuc]

Hey!

The bug is fixed now. I also stopped sending the file names to the placeholder, so now when you upload a file it says 100% on the uploader instead of a bunch of file names.

Cheers

[salemmo409]

Hi jonah.

This is the better uploader not just because of it’s features but also because of the good support from the developer.

Thank you very much.

And while uploading still the pest is to keep the place holder text as I specified in its field

[ryanck]

Nice plugin @jonah.deleseleuc

[jonah.deleseleuc]

Thank you for the kind words!

If you found the plug-in helpful it would be nice to leave a review

[umer]

Hi Mate

I am trying t save file into database but it returns empty value how can i save file into db

[jonah.deleseleuc]

After you upload the file using the “Send File to Cloud” action, you need to use the event “Uploaded Files are Ready”. If you place the actions in sequence like you have in your image, it won’t work. You really need to use the event.

[sufyan.osamah]

I somehow cannot restrict to multiple file types? is there something wrong with the syntax?

if i just have one or none, the uploading works

[sufyan.osamah]

Any easy way to compress images before uploading to bubble?

[ryanck]

Hey @jonah.deleseleuc

How do you take the files out in case you put a file that you did not want?

Answering myself : By resetting the group.

[umer]

Thankyou Mate! You made my day

Working Perfectly

[jonah.deleseleuc]

The syntax is incorrect, but the last update broke this functionality, so I’ll let you know when I update to fix the problem. I confirmed the issue on my end!