Better Uploader [UPDATED 2023] ☁️

Hi @jonah.deleseleuc ! Thanks a lot for developing this plugin — works great :slightly_smiling_face:

One question → Is there any way to limit the options in mobile so that users can only “Choose files” or “Open photo library” but not “Take Photo or Video”?

A few users have reported issues when using the “Take Photo or Video” feature so I would like to hide it and use another plugin or wrapper for that functionality. I’ve tested it myself and I’m getting a black screen when using an iPhone X, not being able to take any photos or videos. I think the plugin is great for multi-uploading files, though, so I would love to use it for that use case.

Btw, I’ve also reached to Bubble Support and they just told me that “Bubble is not optimized for taking photos or videos as if you were using a native app” so I don’t think this is an issue with the plugin itself :man_shrugging:

Thanks in advance for your help!!

1 Like

Hey!

A user asked about this a while ago, and I remember fixing it but then I made some changes to the suggested file type field which broke the fix, but that doesn’t mean you can’t make this work.

In the suggested file type field, I believe if you add .mp4 it should work. I’m not sure it’s mp4 it may be another one. I’m not at my computer right now so I’ll look into it later, but if you want to mess around with it, start there!

1 Like

Hi @jonah.deleseleuc ! that fixed the issue, I’m able to record videos now. Thank you!!

I still have the same question, though → Is there any way to limit the options in mobile so that users can only “Choose files” or “Open photo library” but not “Take Photo or Video”?

Also, something else that I’m wondering → What is the best way to know the file type of the image / video that is uploaded? Is there any built-in functionality in the plugin that would allow me to do that?

Thanks a lot!!

1 Like

You can check the file extension if you want to do just a bit of work. You’ll notice the file names will be shown as “file.jpg” or “file.mp4”

If you run some :regex or a :find and replace on the file name, you can get to the extension from the name :slight_smile:

I’m glad it worked. I’m not sure I can do that, because it’s a native functionality built in the OS. I don’t think us web developers have the power to remove that but I’ll double check.

Have a good one!

1 Like

Hey There Jonah -

So appreciate all your work on Better Uploader and Cloud Companion Plugin!

Any plans to offer a PDF client side compressor for purchase? We have the issue of people uploading monster size PDFs that could be compressed to a much smaller size prior to being uploaded to bubble.

Again, truly appreciate all of your help work!

Take Care… Mike.

2 Likes

I would like to know if someone can help me. I’m using BetterUploader and saving the raw image in a custom state (client-side), I’m facing troubles trying to upload this list of images (custom state) to server. Follow my topic:

Hi Again Jonah -

Also it would be great to limit the file browser to only being able to select ONE file if the file limit is ONE.

Thanks again for the great plugin!

Hi misadmin,

I definitely think PDF compression is a good idea, I’ll look into it! :slight_smile: About your other request, are you talking about literally writing “one” instead of “1”?

Cheers

Better Uploader was made to make worfklows simpler, easier to understand and to follow the “do not repeat yourself” motto. With the introduction WU, it has become a lot more important to understand how to optimize every aspect of your app. Be on the lookout for a free course on how to use Better Uploader to minimize WU’s spent during the uploading process. It’ll be totally free while also being nicely produced and edited (unlike my other simple, how-to / into videos)

3 Likes

Thanks for sharing :pray:

1 Like

@jonah.deleseleuc, great plugin! When I upload a video file from my iPhone browser I’m not able to see a preview of the video. Then after about 5 or so seconds my page refreshes or crashes. My desktop browser works almost perfectly (the video preview takes about 3-5 seconds to display…I wish it was as instant as image uploads). Any ideas on why video uploads from my iPhone are not working properly?

Hello, I’m interested in your better uploader plugin. But I put it on the page, followed your tutorial, but it isn’t working properly. I put the uploader on the page, and a button with the “send to cloud” workflow. But when I try to select and upload an image, I get the following error: “The Uploader is empty, please select or drag & drop some files before uploading.”

I have on issue listed on the page that says I need to fill out the “max amount of files.” But I can’t type a number is that field. It forces me to select something. I don’t get it. Help!

I might as well ask my ultimate question:

  1. I need the user to be able to take or select images from their phone, then upload them to my app.

  2. I need the user to be able to crop and rotate images, before or after upload…

  3. I need images to be compressed somewhere during that process.

  4. Finally, I need the user to be able to upload images from their iPhones, which means they need to be able to upload .heic files. And I need those .heic files converted to .jpg, so they can be displayed on the app.

I don’t know why it is so difficult to get all that, but I’ve been having a hard time. Any advice would be appreciated.

Thank you…

Hey,

I’ll answer some of your questions regarding the plug-in.

First of all, the maximum amount of files field is like any other dynamic field that is of type number. Simply type the number 2 and then click outside of the field, it will work. This is not a plug-in usability thing it’s just a weird thing about bubble’s ui.

Next, you can limit file types and set the suggested file types to whatever you want. See the discussion I had above for more clarity.

Finally, you can compress images using Cloud Companion.

The other questions are specific to your app (like converting a video files to an image or cropping). That’s not something this plug-in does unfortunately.

All the best

Hey Jonah,

I actually just came back here to delete my question. I should have done more due diligence before bothering you. I do understand about the dynamic input boxes on Bubble. For some reason it just wasn’t working normally yesterday. I worked fine today. Just some temporary weirdness.

I’ve gotten most of it to work as on your demo. Except… the Send Files to Cloud workflow isn’t doing anything. Here is a screenshot of what I have:

Any idea what’s going on?

You’re not bothering me!

Okay, so what I see from your screenshot is that you have the start of a new dynamic expression after your completed dynamic expression. You’re going to want to give it only one data source, not a completed one + an empty one.

Also, if you’re unsure of what’s going on I would suggest enabling debug mode on the better Uploader (it’s a checkbox) and check the browser console to see what’s going on.

Cheers

Hey Jonah,

I deleted that empty expression, and the debug box was already checked. It’s still not doing anything. I’m guessing it’s something stupid easy, but… I am out of time right now. Need to bolt. I’ll play with it later and let you know if I have more questions. Really appreciate your help.

C

1 Like

Yeah once you check the box you can check the browser console. It’ll let you know what’s going on and if there are any problems with your setup.

Ok Jonah,

I’m back home and seeing if I can’t figure this out. I still can not get the “send files to cloud” workflow to work. But… I have a bit of a weird clue.

So, one of my goals here is for users to be able to upload images directly from their phones. With iPhones, the file type is .heic. I need these converted to .jpg at some point in the workflow of adding images.

I’ve so far been testing this with .jpgs, just so I could figure out how to make it work before tackling the harder stuff.

So I clicked the uploader and selected an image with the file name:

IMG_7522 3.HEIC

Screen Shot 2023-04-18 at 4.16.30 PM

But in my input, the name that displays is:

tempImagexiKGDJ.jpg

So, first question, did this already convert my .heic image to .jpg? Please say yes. That would be awesome! But if now, where did that image name come from?

Now, when I click on the button with the “send files to cloud” workflow, nothing happens. I have looked at your demo page and copied everything verbatim – or think I did. But something is wrong.

You have an ID Attribute on your uploader. Could it have something to do with that? I have put an id on my uploader, but it isn’t referred anywhere else. Do I need to do something with that ID attribute?

Thanks for your help…

Chris

Hey, and amendment. I thought to look at my database, and it does appear that files are being uploaded. But not correctly. Here is a screenshot of what’s being uploaded:

Note the question mark there where there should be a thumbnail icon. If I open one of the image up, I see:

If this helps explain what I’m doing wrong, let me know…

Peace out!

C

The uploaded files have two extensions “.jpg.jpg”

If you’re going to rename the file, you have to make sure you’re not breaking it by altering the extension.

Once the file is uploaded you should only see one extension, otherwise your file will break.

Furthermore, you should really avoid odd characters like “;” in your file names

Finally, your video file is not being converted to an image file. Not sure what you’re up to but my plug-in doesn’t do that. By the way, you can’t convert a video to an image - that doesn’t make any sense. If you mean taking a still from a video, then saving that as an image - that’s a whole other thing. If you try to display a video in an image tag it will show you the default thumbnail for it