NEW PLUGIN - Image and File Uploader - Crop, edit, filters, compress, and upload from many sources at lightning speed

Showcase
1

With Uploadcare, your users can upload photos from: local file, url link, Instagram, Facebook, Google Drive, and Google Photos.

This plugin comes with image editing. Free crop your photos or enable fixed aspect ratios right in your user’s uploading flow. Uploadcare shrinks large images down without compromising quality, allowing your website to load much quicker compare to conventional image uploaders.

Choose to allow users to upload singular photo or multiple photos all at once at lightning speed.

This all-in-one solution will take your app to the next level.

Try out our demo at https://dragdrop-agency.bubbleapps.io/uploadcare

Plugin link to download at Custom Image Uploader - Uploadcare Plugin | Bubble

UPDATED IMPROVEMENT: Users can now accept files such as PDF, DOC, etc.

UPDATED IMPROVEMENT: we added many additional filtering effects for the plugin. The effects include rotate, mirror, flip, blur, sharp, enhance, grayscale, and invert!

UPDATED IMPROVEMENT:

  1. We added the ability to customize the image upload sources.
  2. We added the ability to choose different compression levels (quality).
  3. Users can now change the color of the image upload button in the Uploadcare popup.
  4. We removed the “Powered by Uploadcare” underneath the popup if you have a premium account
  5. We exposed a new state that stores the UUID of the photo. You can use it to run API calls for things such as deletion off of Uploadcare storage.
3 Likes
2

I am unable to upload the screenshot from Galaxy Z fold. I have used this method mentioned here - take screenshot on Galaxy Z Fold 3.

I want to compress it to my AMP structure and mobile too. Also unable to crop it. The extension is .WEBP. Is there any issue?

3

You can read more about it here: https://uploadcare.com/docs/delivery/adaptive-delivery/

It seems like not every browser accepts webp.

4

Updated improvement: Users can now upload files such as PDF, DOC, etc.

5

Updated improvements: we added many additional filtering effects for the plugin. The effects include rotate, mirror, flip, blur, sharp, enhance, grayscale, and invert!

6

Updated improvements:

  1. We added the ability to customize the image upload sources.
  2. We added the ability to choose different compression levels (quality).
  3. Users can now change the color of the image upload button in the Uploadcare popup.
  4. We removed the “Powered by Uploadcare” underneath the popup if you have a premium account
  5. We exposed a new state that stores the UUID of the photo. You can use it to run API calls for things such as deletion off of Uploadcare storage.
7

how do i access that state for UUID if there’s multiple files?

1 Like
8

:group_uuid is similar to a single file UUID, but it has the file number ~N at the end. Take a look at this documentation for more details: https://uploadcare.com/docs/delivery/cdn/

9

Ah okay, so you’re saying this:
image
outputs the :group_uuid when uploading multiple files?

10

Also, i’m curious if there’s a way to secure the photos from the uploadcare’s side, or is their link complexity supposed to serve as security?
Like if i copy a photo’s URL from my app and paste it into any browser, it’ll load the photo… any possible way to secure this? Thanks!

11

Yes, you are correct! And to request a specific file in a group by adding /nth/i/ , where i is a file index, starting from 0:

/:group_uuid/nth/0/
/:group_uuid/nth/1/
/:group_uuid/nth/2/

1 Like
12

That’s something you can configure in your own Uploadcare’s dashboard

13

Okay, so i’ve made HUGE progress, but running into another issue when calling the API for image deletion… Firstly, Here’s what i’ve got working:

  1. I have the API setup, and authenticated.

  2. I can pass a UUID (copied from UploadCare’s Dashboard),
    image

from inside bubble:

image
image901×320 15.1 KB

and the file successfully disappears from UploadCare :100:

But here’s where i’m stuck:
When i pass the file’s GroupUUID (as output from the uploadCare Plugin’s State:
image
and converted to target the specific file:

c417d5f3-634f-4060-b0bb-c405ebd22cfb~2/nth/1/

The above UUID loads the image up just fine in my browser (and in my bubble app) when added to UploadCare’s URL, but throws an error of “Page not Found” when ran through the API request.

Also i notice that the UUID in the UploadCare Dashboard, doesn’t match the UUID from the Plugin’s State for some reason, idk if that’s related or not…

14

Let me know if this helps Deleting an image from a group using rest api - Support - Uploadcare Community

15

New features implemented! Added the ability to clear the uploaded file or uploaded files list!

16

One of the most requested feature update: Added the ability to add in custom aspect ratio!