Forum Academy Marketplace Showcase Pricing Features

Better Uploader ☁️ [Free Plugin]

You can find my plugins here

Jonah de Léséleuc Contributor Profile | Bubble

Demo Page

https://plugin-testing-page.bubbleapps.io/version-test?debug_mode=true

Documentation

Documentation: Advanced Uploader - Google Docs

Introduction to Better Uploader

Intro to Better Uploader ( part 1) - YouTube
Into to Better Uploader ( part 2 ) - YouTube
Intro to Better Uploader ( part 3 ) - YouTube

Tutorial

Part 1 - Better Uploader for Bubble Tutorial - Part 1 - YouTube
Part 2 - Better Uploader For Bubble Tutorial - Part 2 - YouTube
Part 3 - Better Uploader For Bubble Tutorial - Part 3 - YouTube


Today, the “Better Uploader” plugin makes it to the marketplace!

“Better Uploader” is a useful tool 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 :sob:

What it does:

  • Supports drag & drop
  • Support multi-file uploading
  • Supports displaying loading & uploading progress as a %
  • Separates uploading files locally (to the browser) and sending those files to server
  • Supports standard style customization (background color, font properties, border, etc …)
  • Preview your file (such as an image) before sending in to the database
  • Enables doing work (processing) on files before sending them to server
  • New (v.1.2) Rename files before uploading them

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

exposed

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! My 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.

Questions, comments, suggestions? Please leave a reply!

14 Likes

Wow… Another quality plugin, very impressive and sould actually be built-in bubble. Thanks for the awesome jonah.

2 Likes

Great, so glad you enjoy it!

Thank you :slight_smile:

If you found it useful, it would be much appreciated if you left a review on the plug-in page. It really helps with exposure :smiling_face_with_three_hearts: Thanks a bunch!

Good News!

Update 1.2.0 releases today which gives users the ability to rename file(s) before uploading. This feature was requested by the community!

I’ve made a quick little demonstration on how it works here

Enjoy :slight_smile:

1 Like

Hi Jonah

I don’t suppose this plugin allows for the extraction/reading of texts within an uploaded Doc or pdf file does it?

1 Like

Hey there. What’s interesting about this plugin is that it lets you do whatever you want with the uploaded file(s) before sending them to the server. In your case, you’d like to extract all text from a pdf file. Normally, to make such a thing work you would need to

  1. Create a method of letting a user choose a file to perform the work on.
  2. Expose that information to whatever performs the work. Whether that is custom code inside an html block or a plugin, it doesn’t matter
  3. Do the work
  4. Upload to server

This plugin enables you to skip steps 1, 2 and 4.

Basically, in this case no, this plugin won’t extract text from a pdf. But it’ll save you a lot of time if you wanted to make something that did that (or hire someone to do it for you).

I’m always open to being hired to make custom programs for people if that interests you. If not, I wish you the best!

(P.S This is a fairly straightforward task to achieve with the pdf.js library. I’m sure you can do it! :slight_smile: )

Hi Jonah

Thanks for the quick reply. Sounds like the plugin is what I will need. I will read up a bit on the text extraction part. If I find it too daunting as I have no experience with APIs I may just hire you. Bare in mind that I need to extract from doc(x) too.

Will be in touch.

Hi @jonah.deleseleuc , it looks like this may be an excellent solution to what I am looking for!

One piece of functionality that would be useful to me is exposing the “An input’s value is changed” workflow instead of making uses click an upload button. Is that something that you could add?

1 Like

Not quite sure honestly! I am happy you are enjoying this plugin :slight_smile:

I will look into it today and get back with some results.

Hi Jordan. I’ve done a bit of poking around and what I’ve decided to do is add two events (that will be coming in the next week or two)

  1. (“when”) Better uploader has a file(s)
  2. (“when”) Better uploader uploads a file(s)

Basically, you will be able to trigger a workflow when a user selects a file and / or when the file gets uploaded.

How does this sound?

All the best,

1 Like

Sounds amazing! Thank you so much

1 Like

Hey @jonah.deleseleuc

I tried a few uploader plugins and yours is the only one i can preview files in iOS.

However, although i am able to record or take a photo / videos and preview them. when I choose the option to select from my iPhone library, I can only SELECT photos not videos.

The only option to upload video is to shoot and upload it, i can’t select one that i have in my iOS library.

I know this is an iPhone thing, but do you have any idea how I can force the select from photo library to also include videos?

1 Like

I’ve done some poking around and based on my research iOS requires certain parameters in the HTML to be able to accept video formats. I will release a new update with the new features @jordanryankennedy_as requested next week, so I will include these changes in the next update as well.

Wishing you the best.

1 Like

@jordanryankennedy_as I was thinking about it, couldn’t you just use the uploading progress? For example, “when” uploading progress is 100, then … do this. Furthermore, after every upload you could trigger a reset to make sure that the progress goes back to zero.

I would rather not crowd the exposed states section if this is already possible.

A new update is coming soon, but I am wondering if the functionality you desire is already possible

MAJOR BREAKING CHANGES

If you are using this plugin in your live app please read this post before upgrading to the newest version.

First things first: this plugin now supports the new responsive engine

According to bubble this implementation is in alpha, bugs may be present (however, my testing indicates that everything is working accordingly. But this is not guaranteed.) This plugin will, however, ignore the horizontal alignment (left, center and right) option in the layout tab.

Changes to the Send File to Cloud Action

This action now contains a new field called

New Name for Uploaded File(s)

Renaming of files is no longer done using the method created in the last version. Now, if you want to give the option to users to rename files you must rename them when you are uploading them to the cloud.

Very Important: Please Read

  1. No matter what name is used, this plugin will automatically include the appropriate extension at the end of the name. This means if a user inputs

“samplepicture.jpg”

then it will be uploaded as

“samplepicture.jpg.jpg”

It is recommended to add rules on your inputs to avoid this from happening, however it won’t cause any problems so it’s mainly for aesthetics.

  1. This plugin does not hold your hand when letting users rename files. You must include rules on your inputs to ensure these characters are not included in the names. Otherwise, this plugin will throw an error.

Refer to this link for more information on Illegal Filename Characters

Bug Fixes

  • Fixed recursion error that was causing issues in the console

  • iOS users were having trouble seeing different types of files other than photos. This has been fixed this version. @moose

As always if anyone has any questions feel free to post them below :slight_smile: Once again these updates and plugins are free, if you appreciate them please leave a review!

Thanks, man! Let me give that a shot and I will report back. Cheers

1 Like

@jonah.deleseleuc

I did some poking around, but I’m still not able to get the functionality I’m looking for. I’ll attach a video below for reference.

Video link: YouTube Bubble Example

Right now I am using Bubble’s Dropzone plugin and it works great and works exactly as expected. The user can drop one or more files and they immediately start uploading and processing for OCR.

However, there are 2 pretty major missing features:

  1. Limit the file type that can be uploaded
  2. Limit the file size

I was hoping to be able to use your plugin for those 2 missing features, but I can’t figure out how to let user’s upload files without needing a button click to upload.

1 Like

I checked out your video @jordanryankennedy_as and I totally understand your point. I am releasing a new update right after posting this, please upgrade it as it will meet your needs :slight_smile:

A new event called A Better Uploader has a file(s) has been added. This event is triggered when new files have completed the staging process (when all of the files are in the browser and are ready for uploading). After this, you can trigger the Send file to cloud a Better Uploader action. Below I have detailed a step-by-step guide on how to accomplish this.

I’ve also linked a new demo page for you to test this functionality here

Steps:

  1. cap2
  2. cap2
  3. cap3
1 Like

This is amazing! Exactly what I needed. Thank you for taking the time to build that functionality

1 Like