Better Uploader [UPDATED 2024] ☁

[jonah.deleseleuc]

Making this post because the 2023 version is out of date and uneditable

Useful Links

Demo
Editor
Better Uploader Plugin | Bubble
Our Plugins
Book a free 30 minute Coaching session
Buy me a coffee

Getting Started with Better Uploader for Bubble.io

Better Uploader is a feature packed tool for bubble developers of all skill levels. A multi-file uploader best known for giving your users the ability to preview, rename or send files to API Services without uploading the file to a server. It also separates the “selecting” and “uploading” phases of the upload process, which significantly decreases the workflow units (WUs) that your app consumes. More features + more intuitive workflows + more optimized = Better than the other uploaders!

NEW Features:

Rename a single selected file (before upload):

Performance mode (I am really excited about this one):

Replaces data URIs with file blobs. You can now preview / work on any file, no matter how large the size. In previous versions, previewing large files (over 2GB) could crash the browser. Note: If you need data URIs for working with APIs, leave this unchecked

---

Notable Features:

• Drag & drop files and folders

• Multi-file uploading

• Multi file & single file uploading progress (as a %)

• Mass rename files while uploading them to server

• Control what kinds of files can be uploaded by extension name
  

• Set a maximum amount of files to be uploaded at once

• Set a maximum file size (supports any file size, see performance mode)

• Preview images, videos and documents before uploading

• 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 …)

Best of all → Optimizes your app and reduces workflow unit usage (in some cases, by a lot!). Let’s have a look at the exposed states to see why:

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: you may want to make changes to a file before sending it to the server. For example, I’m applying standard image filters to images (sepia, grayscale, etc). 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 → do work (rename, apply changes, etc …) → upload new edited image → replace image

I say, BLASPHEMY to such inefficiency!

My upload compacts that down to this workflow:

upload image → make changes → send to server.

Et voila! Better Uploader can significantly reduce your WU usage. Imagine, having to apply modifications to 50 files and doing it the default way, you would spend an enormous amount of WU’s compare to this method.

If you’re building an app that allows users to upload files, Better Uploader is without a doubt the most workflow unit (WU) efficient method on the platform!

---

THANK YOU I want to thank everyone for their support! I’ve had lots of positive feedback and support since I initially released this plugin in 2022. It’s without a doubt why I continue supporting it! If you would like to support me and what I do, you can buy me a coffee or see my other plugins, including cloud companion: a plugin which enables image compression for better uploader! If you can’t do any of that, positive feedback goes a long way, thank you!

[ihsanzainal84]

Got you a couple of cups of coffee! Been using the plugin for a while already. Thanks for the great update!

[jonah.deleseleuc]

Thank you, it means a lot

[jonah.deleseleuc]

New update: 7.2.0

You can now attach your uploaded files to a bubble thing on upload. This is useful for making files private (you can define a privacy rule on your bubble thing of which you attach your file)

Happy bubbling!

[jonah.deleseleuc]

New update 7.2.3

Added two new useful exposed states:

• Uploading in progress: returns “yes” if uploading is in progress
• Staging in progress: returns “yes” if staging is in progress

@jefeoliveira22 this should make your conditions much simpler

[jefeoliveira22]

@jonah.deleseleuc thank you for you service Mr. ! You are a great contribution to the community

[chaostorm]

@jonah.deleseleuc Any plans for adding an action that just adds a new file to the list of already staged files instead of replacing the staged list with the new file?

[jonah.deleseleuc]

I don’t have any plans for that right now. I’m guessing you’d like to be able to store the Raw Data inside an element state on the page temporarily while the user selects additional files, correct? Then, you’d like to “recombine / import” the files in the element state back to the better uploader?

[chaostorm]

Correct. Basically, the user should be able to add multiple files to the staging queue without it resetting each time they trigger the system modal to add more files.

[suironohokou]

Big thanks for creating this plugin since it is very helpful and more convenient to use when compared to the traditional bubble editor… However, I seem to be encountering an issue where a file/image would not be uploaded unto the betteruploader when using drag and drop… I recently tested this within my own application and with the demo page that was provided

[jonah.deleseleuc]

Thank you for letting me know.

Upgrade to v7.2.4 for the fix

@suironohokou

[jonah.deleseleuc]

Next update will include the feature

[jonah.deleseleuc]

NEW FEATURE: Add file(s) to selected files action
Update to V7.3
Like this plugin? Buy me a coffee

@chaostorm @chris.williamson1996

You can now add files to the selected files list. If a user selects a file, and you want them to be able to add additional files without having to reselect the same files again, it’s now possible! Simply trigger the new action whenever an element is clicked.

Adding additional files to Selected - Better Uploader for Bubble

[chaostorm]

@jonah.deleseleuc Thanks for the lightning-fast response - you rock! I’m very much looking forward to taking this feature for a spin this week in an app I’m currently working on.

[chris.williamson1996]

Legend! This looks amazing

[jonah.deleseleuc]

NEW FEATURE: Dropzone!
Update to V8.0
Like this plugin? Buy me a coffee

Better Uploader just got way better. With a simple action, you can now specify any element on the page to act as dropzone for Better Uploader!

1. Add an ID to your element you want to be a dropzone
2. When the page is loaded, initialize it!
   
   

A Better Uploader element must still exist on the page. That is where you’ll define all the rules & other settings for the dropzone as well

Have a good one,

Jonah

[jonah.deleseleuc]

NEW FEATURE: Use a Custom Context Menu (right click menu) like Google Drive!
Update to V9.0
Like this plugin? Buy me a coffee

Ever wondered how Google Drive was able to do this?

It’s a custom context menu! And guess what, Bubble now supports this feature This is currently the ONLY way to do this on Bubble. The setup is completely modular as well, you can make your context menu however you want it. Let’s do a step by step:

0. Place your Better Uploader and do the regular setup. Create a group for drop-zone purposes and give it an HTML ID.
1. On page load, trigger the action “Initialize a dropzone”.
2. Create a group focus you’d like to use for your custom context menu and make the reference element the dropzone, although it’s not strictly necessary, you can make it reference whatever you want. I just do this to keep my page organized. Don’t forget to also give it an HTML ID.
   
   
   
   
   
3. Setup the initialize a dropzone action from step 1. Provide the HTML ID’s for the dropzone & custom context menus:
   
   
4. Use the event “a Dropzone is right clicked” and trigger the “show” action for your group focus:
   
   

And voila, you now have a fully custom and professional right click menu:

Easter egg Be on the lookout for a Google Drive Template

[jonah.deleseleuc]

A new element has been added to Better Uploader
Update to v10.0

Better Uploader now comes pre packaged with Better File Previewer

Think of your file previewer as a one size fits all file previewer. It can display raw or uploaded data like a normal image element but also preview files such as PDF’s!

This way, you can browse pages, hightlight and draw, take screenshots and print PDFs or other documents straight from your webpage! It also provides advanced image options such as “object-fit”, which allows you to decide how your image displays (cover, contain or resize, etc …)

Best of all, better file previewer returns three exposed states: filename, fullname (name without extension) and file extension. This is very useful if you need to know the extension of an uploaded file (this is not native to Bubble).

Happy bubbling!

EDIT:

Here’s a cool example of what you can do with this

[jonah.deleseleuc]

NEW FEATURE: Folder upload mode
NEW EXPOSED STATE: Error message
Update to v10.3.0

If you want your users to select an entire folder for uploading, now you can!

1. Set Folder mode to “yes”:
   
2. Now when a user clicks a Better Uploader, they are prompted to select a folder instead:
   
   

BONUS:

With the new error exposed state, you can create dynamic error toasts such as this one:

Happy bubbling!

[jonah.deleseleuc]

Psst… there’s a new template that uses this plugin