Upload Buddy is a versatile replacement for both the Picture Uploader and File Uploader native Bubble plug-ins. Instead of a file being immediately uploaded when a user selects it, Upload Buddy exposes details of the selected file. Combined with various actions and events, Upload Buddy enables workflow and conditional logic based on those details, thereby providing explicit control over if and when the file is uploaded.
Additionally, for image files, Upload Buddy supports client-side resampling - i.e. you can scale down large image files before they’re uploaded. Not only does this conserve bandwidth and server resources, but it results in a more pleasant user experience.
Why
I needed it. I’m developing an image-centric app and found that the built-in uploaders didn’t satisfy my requirements. Plus, I needed to be very judicious about my Bubble storage.
Features + Benefits
Restrict uploads by file type or size.
Restrict image uploads by pixel dimensions or aspect ratio.
Resize images before upload (client-side).
Reduced bandwidth, server load, storage, wait time for images.
Auto-generated thumbnail for viewable images.
Fully customizable UI element for a tailored “look and feel”.
Rename files on upload.
Explicit control over if/when upload occurs.
Meticulously crafted exclusively for Bubble.
What It Doesn’t Do
Does not work with 3rd party cloud services. It was crafted exclusively for use with Bubble’s native storage option.
Does not support cropping (only resampling).
Does not support multiple file uploads.
Does not work with IE
Demos / Samples Available
A live demo and a page with sample UI variations are available as follows. Edit mode accessible!
BTW, for those who might have missed it, Bubble recently released their new and improved large file uploader. In addition to supporting larger uploads and a file size limit, it also has a percentage progress indicator. I was an alpha tester, and it’s worth a look if your requirements are simpler.
While Upload Buddy does expose an “uploading_file” progress indicator which can be leveraged in your app logic, it has no way to provide a percent complete. Bubble has said that they do plan expose that capability to plug-in developers down the road, however; so rest assured that when they do, I’ll be all over it like flies on…uhhh…bananas…or whatever.
I also have a plugin for fileupload that is upcoming (currently under testing) but also face the issue with percentage uploaded. I create a workaround using the file size and average speed (the loader will stop at 95% and wait for completion to reach 100%). So maybe this can inspire you for now waiting the update from Bubble
Thanks, @Jici, I appreciate the tip. That’s a good idea. I was actually “poking around” a while ago, and I do have an idea I’d like to explore, but it’s not high priority for my needs. Given the size of most uploads that will be allowed in my app, a simple busy indicator will work fine, but I’ll let you know if any of my experiments prove fruitful.
Wow I was just crying with the jump in storage use as we are seeing a huge upshot in Covid-19 application and some people have smart phone that output some serious Megapixels!
I’ll be submitting it for approval this weekend. It can take a week or so for Bubble to approve. Hopefully, it will appear in the marketplace by the end of the week. I’ll update this post when it’s available.
I’ve added a page with sample UI variations. Feel free to check it out along with the demo (if you haven’t already). The plugin is awaiting marketplace approval. I’ll post again when it’s available. If there are any questions, let me know.
EDIT: Oh yeah, I forgot to mention that I added a nifty action called Fetch File Contents as Base64, which does exactly what its name suggests. Bubble’s built-in :encoded as base64 doesn’t work client-side, so I added this utility action.
Thanks to user feedback, a new “Image Is Scaled” event has been added to Upload Buddy. This allows workflows to be triggered when an image is finished being resized. As a result, it’s now possible to implement simpler and more powerful workflows and provide more granular status feedback for a smoother end-user experience.
For example, upon selecting an image, it can be opened, examined, resized and uploaded all in one fell swoop. This provides a more favorable user experience resulting in less time and hassle while simultaneously optimizing your Bubble storage and saving you money. It’s a win-win!
Hi! Can I get the image size after scaling down here? I was using a plugin for this downscaling capability but I can’t get the file size after the image has been scaled down.
Of course. You can see for yourself on the demo page. Select a file, scale it, and note that the Dims change in the Selected File Info section. You don’t have to upload it after scaling, but the file properties do update to reflect the downsampled size.
I wish I’d seen this before!!! Thanks @sudsy. Question before I try it - do the image behave the same way as they currently do after upload? Can I process with imgx and are they delivered the same way through imgx (indexed and resized).
Hi, @duke.severn. Yes, images are processed by Imgix when rendered on the page. You can confirm this by simply highlighting one of the uploaded files on the demo page and inspecting the image using the browser dev tools. You’ll see the image’s src attribute starts with…
https://d1muf25xaso8hp.cloudfront.net/
…which is of course an Imgix cloud server. If you have any other questions, let me know.
I’m developing an image-centric app and found that the built-in uploaders didn’t satisfy my requirements. Plus, I needed to be very judicious about my Bubble storage.
Restrict uploads by file type or size.
