Better Uploader ☁️ [Free Plugin]

You can also use the reset action to clear the files in the Uploader.

Cool, Ill reinstall it and see how I go.

I’ve watched your videos on how to use the uploader but it doesn’t say how to delete an individual file from the uploader instead of all of them. I’m trying to avoid resetting all files. Is this possible?

Thanks

Oh,

I see what you mean. You can perform this manually, but there’s no out of it the box method. After a file(a) has been staged, you can use the Raw Data exposed state to display all the current files. By using this, you can develop a feature to remove or add items to this list of files. For instance, displaying the raw data URLs in a repeating group and having an x button next to each one. You can set up a workflow to delete “current cells text (raw data url)”. This will remove it from the list

image
I don’t know what syntax to use for this as it won’t let me select the uploader.This is the delete button but its not giving me any options to choose from the RG. I’m only uploading images so how would you use the URL to delete it in this case?
Will removing it from the RG list also remove it from the uploader? Otherwise the file will still be uploaded when its deleted from the list.

You bring up a good point with the last point, deleting it from the list won’t delete it from the Uploader. They’re not connected (and unfortunately it’s not possible to connect them without something a bit more complicated)

So no, there isn’t a way to do this right now. Part of what makes the Uploader special is that you have access to the raw data. It’s a tool meant for people who want something to make their custom code solution easier . You’ll have to make your own solution for that kind of feature. I can’t think of a way to do that out the box right now.

Once you get the Raw Datas, you’ll have to upload the files manually (using code or another plug-in) these raw Datas are Data URIs.

Hope it helps

1 Like

Still having issues with the placeholder appearing. I’ve reinstalled the plugin and recreated the button but its not immediately showing. I’ve found that it appears after 1 of 2 conditions occurs:

  1. The user uploads some photos. This makes the placeholder appear.
  2. Resetting the group works but only on the 2nd time you reset it. Meaning if I put a reset as the page loads or on the group load it doesn’t show, but run it twice and it does.

I’ve just released a little update that fixes some small bugs about the placeholder. I’ve also added some error management. You should try it

1 Like

MAJOR UPDATE 4.0.0

Added a big new feature: restrict the types of files that can be uploaded with file extensions, and not MIME/TYPES.

With the optional Limit File Types field …

You can define a comma delimited list of file extensions that you want to limit Better Uploader to. If a file, file inside a list of files or a file inside a folder presents itself to the Better Uploader the new exposed state a File(s) is valid will return no and the files will not be sent to the exposed states.

The “Send File to Cloud” action won’t upload the invalid files either.

Enjoy!

Hey Great Plugin!
Just wanted to know how to achieve this functionality
image

I saw your YouTube video where you converted the image to sepia. Just wanted to know how you did that magic.

1 Like

Converting the image to Sepia was straightforward. First, you give a file to Better Uploader. Next, using the Raw Data exposed state you can use that in a src="" tag inside of an html tag for an image. Then you can run some javascript to do anything you like, for instance, making it Sepia. For the Sepia code I just found some code on StackOverflow.

Oh Nice! But what if I want to upload the Sepia image to my server instead of the original image?

In my case, I created an html <a> tag (it’s called an achor tag, but it’s just a link) where users could download the modified file. This part is up to your implementation! What the plugin solves is the connection between your computer and Bubble, without going through the middleman (the server)

Alright! Thanks, I’ll tinker around and see what I can do, will post results if successful

1 Like

So I ended up using the Amazon S3 server and use my lambda function to achieve the functionality

1 Like

@jonah.deleseleuc, we’re wanting users to be able to upload files/images, but it doesn’t look like this resizes images like Bubble’s uploader does, correct?

Even though it’s awesome that your plugin doesn’t upload files immediately, without resizing before upload, we’d still have large images quickly take up too much space in our app. The avg. smartphone image is 3-5MB, and after resizing, we want them under 200KB because the images on our app will be really small (180px square).

Any chance you’d release an image-upload-only version that does this? (I realize resizing other file types isn’t really applicable.) I’d be happy to pay whatever you charge for the plugin! This is a HUGE problem for us and we’ve wasted way too much time trying to find workarounds. Bubble, for all its insane amount of strengths, is still pretty weak when it comes to efficient file uploading/storage.

1 Like

Hey there,

Sorry I didn’t see this until now.

What you’ll want to use is the Raw Data exposed state. It exposes the files as data URI’s. With that, you can use any compression technique you want. Whether that be a plug-in that can do that from raw data, or a quick JavaScript action can do that as well. Then you take the compressed images, and use the send file to cloud action.

The biggest upside to this plug-in is the raw data exposed state. This is to let users develop their own solutions without having to do the heavy lifting of creating your own Uploader. Compression is not hard to do with some quick JavaScript and maybe with the use of a library.

I won’t make a plug-in for every use case, because I’m trying to limit the functionality of this plug-in to be really general things that are flexible enough to let you do what you want with it after.

Let me know if you have questions!

1 Like

Hey @jonah.deleseleuc , thanks for making this plugin! It’s been really helpful, but I have a question:

I can’t seem to figure out how to limit the file size that users can upload. I’m letting users upload images (jpeg or GIF) and I’d like to set a limit of 3mb. When I set this in the plugin, nothing changes, I can still upload files of any size.

Is there something else I need to do? Is there a workflow step that needs to happen to check the file size?

Thanks!
-joey

Hey @jonah.deleseleuc the documentation link is not working, could you please check?

Thanks!

Oh man, I did a clean of my google drive. I hope I didn’t delete it 🥲

I’ll check it out tonight. It’s not something I’ve thought about before. The limit file size option doesn’t do anything I don’t think. I’ll get back to you soon with an update :slight_smile: