Better Uploader [UPDATED 2024] ☁

The problem is in the reordering. There needs to be a reordering when the file is renamed.

Yes, please.

Hi Everyone and many thanks for this plugin. I have a question though (sorry I am new to bubble and to this plugin): once a file uploaded how can I retrieve its url to modify or delete it?
Thank you !

I have a added documentation to the demo page!

You can also access the docs here

All the best,

Hi @jonah.deleseleuc ,

Thanks for making this available to everyone, I’ve sent you a coffee!

I have a few questions:

#1 Adding a file each upload (rather than replace)

If a user uploads a file(s), and then uploads more, the initial upload(s) are replaced.

I’d like the uploads to add each time an additional file(s) is uploaded. Is there a way to natively do this with your plugin?

#2 File Name & URL
I have the following issues that I can’t work out:

  • File Name: BetterUploader seems to output some weird file name
  • URL: It inserts ‘Blob’ before each URL… I’m trying to use the File Analyser plugin in another workflow (so I can properly save File Tyle, File Extension etc to my DB), but it isn’t recognising the file.

Here is an example of what the output looks like when using the Native Bubble File Uploader vs BetterUploader… I have uploaded the same file to both uploaders. The File name is ‘Feb 2025 Rugby Ops Update (Whites) v1.0.pdf’

What I do is send a list of files through to an API Workflow, which creates an ‘Attachment’ for each file (see below Data Type). I have this working with the Native Uploader, but wanted to change to use for usability/performance improvements, but am running into issues (I use the File Analyser plugin in the workflow, and it doesn’t seem to like the files passed from the BetterUploader… I’m not sure why).

Appreciate any advice :slight_smile:

@mulleralice984 - can you share how you’re getting the File Type using this BetterUploader?

Hi there,

Thanks for the coffee :coffee: :cowboy_hat_face:

To address your first point: you can use the action “Add File to Selected”.

Next, if blob is showing up in your URL you are most likely saving the raw data to your database? I believe you’re flow is not set up right, please share a video or editor or otherwise explain what you’re doing.

Finally, you can get the file type from the filenames by using the :split operator. The file extension always comes after a “.”

All the best,

@jonah.deleseleuc

Ok following is how I have it set up (keep in mind this is all just on a test page).

So I have the BetterUploader on a page (following example has 2 files added):

The worfklow for the ‘Save BetterUploader Files’ button is as follows… Essentially I’m creating an ‘Enquiry (Lead)’, then I’m calling an API Workflow on the list of BetterUploader files:

Inside the API Workflow, I’m creating an Attachment and then adding it to the Enquiry (Lead). I had this working using Bubble’s native image and file uploaders, but I wanted to use yours to a) combine all file types in a single uploader, and b) improve uploading performance.


It doesn’t work i.e. no Attachments get created. If I remove the ‘Analyze File’ step from the API Workflow it creates two attachments, however, they don’t have the right data in file and file_name (Extension and Type are blank).


By comparison, when I pass a list of files from the native File Uploader it looks like this:

I’m not sure why BetterUploader’s list of files isn’t working… FYI the Analyze File action is from the following plug-in: File & Media MIME Type Analyser Plugin | Bubble

I’m having to use this because it tells me the File Type, which when I load in my UI I can use conditionals to have a different display depending on whether it’s an image, video, document/file, or email.

My reason for cresting an Attachment Data Type, is that a Attachment can be reused on multiple other Data Types (Lead, Booking, Quote, Job) and this means the same thing doesn’t need to be uploaded and managed multiple times.

ALSO, re File Type, you said:

Finally, you can get the file type from the filenames by using the :split operator. The file extension always comes after a “.”

File Extension is not the same as File Type… If you returned the MIME Type, this would prevent us from having to look for lots of different extensions to work out whether it is an Image, Video, Document/File, or Email.

Also re: your use of Split By - File extension comes after the LAST “.” - Files can have multiple “.” e.g. “Document Name v1.0.pdf” is a valid file name with multiple “.” - I noticed in your Demo that when I upload a document with multiple “.”, your rename feature strips out everything after the first “.” - e.g. the above file name example becomes “Document Name v1” - you need to use regex instead of split by, but this still doesn’t help me with the above.

You need to run the send file to cloud action to save the files to the database. The files are not auto uploaded after selection. I can tell you’re accessing the raw data exposed state and not the uploaded data state. Finally, in general it’s less efficient to run a backend workflow than it is to simply run it on the client. If you still need to do this for some reason, you can save the files to your Thing of choice once the upload is complete by using the file upload operation is complete exposed state.

Thanks @jonah.deleseleuc , I think I’ve got it working now.

I do have a weird issue though I’m hoping you can help with. It only seems to happen in Chrome - the issue doesn’t cocur in Safari.

It seems to be related to the ‘BetterFilePreviewer’ element. If I hide the element, this the issue stops on Chrome.

Whenever I choose to upload certain file types, it adds them, but results in a download in my browser - no idea why. For example PDF/JPEG work fine, but HEIC/EML and Video files result in a download…

See this video:

This is my BetterUploader setup:

A suggestion/feature request: Making Media Type (e.g. ‘Image’, ‘Video’, ‘File’) & MIME Type (e.g. ‘image/png’, ‘video/mp4’) available via BetterUploader - I believe this would be one of the most powerful improvements you could make…

I’m wanting to achieve something like the below:

Unless I’m missing something, I can’t work out how I would do this prior to the ‘Send files to Cloud’ action… Looking at the Raw Data, Without the MediaType, I’m not sure how I can work out what each type of file is? The Name and URL from the Raw Data don’t have any file extensions available, and for some reason the actual file names are changed.

In the below example, I uploaded two files:

  1. Capital-7s-DRAW-25.pdf
  2. audi.jpeg

Without extensions or media type, is there any way I can tell what the file types are from the raw data?