[Plugin Update] Uppy Pro V2 - large uploads, image editing, screen recording

Hi all,

Uppy Pro for bubble has been updated to V2. The plugin’s author transloadit (not me :slightly_smiling_face:) has a blog post describing their latest changes to the plugin detail.

In short, V2 brings some cool new features–all implemented in Uppy Pro:

  • Client-side image editor (crop, rotate, etc) before uploading
  • Screen recording
  • Multi Language support

Plus all the same features from uppy and uppy pro V1 (see uppy pro V1 forum post here)

  • Multi file uploader supporting large files
  • User-friendly and polished upload UI
  • File restrictions on size, type,etc

View the Uppy Pro V2 demo app here

Will the free version of Uppy receive these V2 updates?
At this time there is no plan to implement V2 features in the standard version of uppy. This is to (a) create a solid differentiation between free and pro versions in terms of their features and (b) the code behind uppy free is quite a bit different than pro and so not a trivial task to make these updates to an otherwise reliable plugin.

Does V2 support instagram and other social media support?
In short, no. Social media support in uppy requires a special server-side application called ‘companion’ to always be running. At this time, bubble doesn’t support this capability in plugins. Most likely, if this support ever materializes it would be for a paid-per-month fee to cover the necessary hosting costs of this feature.

Existing Pro users: Be aware that completely removing the page element may be necessary to upgrade. This is due to some kind of quirk in the bubble editor. YMMV.

3 Likes

Did you really just post this 10min ago? I use the Pro v1 and someone was just asking me about it so was looking up Uppy…

Can Uppy now import Instagram pics directly into a Bubble app? I notice the Uppy demo page has Instagram import. That would be neat.

Unfortunately no. The issue here is that a special server-side application called ‘companion’ is needed to be hosted in the cloud to be able to use instagram and other social media with the uppy client.

At present, bubble doesn’t allow for plugins to host persistent apps like companion to stay running in the cloud. Transloadit has a sort of similar paid service like companion, but sadly its not compatible with uppy. I have briefly considered hosting my own instance of companion for the plugin, but if I did I’m fairly sure I would need make uppy a monthly subscription to cover the ongoing hosting costs. Wish I had better news on that…

1 Like

it would be really nice if Uppy integrates with the S3 storage

It integrates with bubble’s S3 storage. It does not integrate with 3rd party S3 storage, however. Third party S3 is only supported with uppy companion–a server side application, which is outside the scope of a bubble plug-in

1 Like

Thank you for the update! Just one question, it’s asking for image editor config JSON to be able to publish. What do I put there ?

I’ll push an update to remove that requirement. You may try and put in a blank json in there in the mean time {}

1 Like

Thank you Jon!

Another quick question. How do I change the language. Tried entering the language code found in Uppy Docs, but doesn’t seem to work. Missing something ?

Screenshot 2021-10-06 at 07.23.19

1 Like

Sorry for the delay. Missed this somehow. It looks like you need to specify the language script url. The PRO example app shows this and has most of the language scripts and codes shown. It lets you dynamically select them so you’ll need to dig around in the editor / db a bit to see what language / codes are there. You can also get this information from Uppy.io

New Release

v2.1.0

  • support for XHR uploading.
    o This lets you POST, PUT, etc a file directly to any server uri you specify. Uppy exposes server response status code (like 200) and body content (as text). Offers you the ability to bypass bubble’s uploader.
    o You can POST as multipart form data or as a raw file
    o You can make multiple POSTs in a multi-file upload session or bundle the files into a single

2.1.3

Added support for signed urls on a per file basis opening up the ability to securely upload files to providers like Amazon S3, Mux, Dropbox (and many more which support this). Uploading direct to S3 and others in bubble isn’t new, however this latest update gives the option to (a) use multi-file uploads (b) utilizes a modern customizable uploader interface with lots of features.

Why this is important:
Uploading directly to 3rd party providers can be a challenge in bubble and other website environments. Example: a user upload’s a file from their browser to your file hosting service. To do this in the most basic way, your file hosting service will often require that your user provide secret credentials for your website’s account when uploading the file. That often means passing secret API credentials in the client browser (where they can be viewed by your user). This is not recommended. How can this be avoided?

Let’s start with what doesn’t work too well:

  • One option might seem like using the API connector for this, but bubble doesn’t support a standard file uploading method via the connector that is compatible with most storage hosting providers.
  • Another solution is using a ‘man in the middle’ approach. Your user uploads a file to some server that doesn’t require secret credentials first and that server, in turn, uploads the file to your destination. Services like uploadcare do this, oftentimes with a pre-built widget. This is convenient, but isn’t without its drawbacks. From a design perspective, its extra redundant steps to get your file to its destination. You may also need to build the integration between the ‘the middle’ server and your destination storage service. It may not be compatible, and if it is that is more overhead, time to implement, and support the entire upload ‘chain’.

A great solution is signed urls. Many storage services offer these as a secure method to give any client a single-use access to the functions your private account for things like uploading.
Signed URLs are usually
(a) temporary–usually via some sort of randomized url
(b) tied to your account
(c) have an expiration date.
(d) are single use.

You can securely generate these signed urls on the ‘back end’ using the API connector using your storage account’s secret API credentials (where they cannot be seen by your users). You can then use the ‘signed’ URL on the client-side to upload to. Once it has been used, the URL is usually decommissioned. Uppy offers a great upload experience when using signed urls.

Example:
Say you have a private S3 bucket where you want customers to put their files. You don’t necessarily want to provide your sensitive AWS upload credentials to your client to upload their files to your bucket. You can securely get a signed via the API connector with S3 API. You can then set uppy to use the generated URL(s) and upload files to them.

Uppy provides a simple way to trigger multiple workflows (one for each file in the picker) where you can retrieve each of these signed urls and assign them to a specific file for upload.

See the demo page uppyuploader.bubbleapps.io/pro-xhr

The control flow is as follows:

  1. Client selects files, records a video, etc inside the uppy picker.

  2. You trigger a ‘kickoff’ workflow to ‘get upload urls’.

  3. A single bubble workflow is triggered for each file in order.
    Inside this workflow:

    • you retrieve a temporary signed upload url using the API connector with your provider (or some other method).
    • You set the unique url you receive back from the API connector into uppy. This pairs the temporary upload url to an individual file to be uploaded. This workflow can automatically trigger itself again for the next file, and so on, until all files have a unique upload URL set in uppy).
  4. If the kickoff workflow is run again, only the files without set URLs will have workflows triggered. Meaning only newly added files will trigger new workflows to be run.

  5. For convenience/troubleshooting, The upload URLs are exposed via an element state. There is also a yes/no state for “all files have URLs” which you can use to setup UI logic like greying out the upload button while workflows are running to retrieve signed URLs for every file.

Enjoy.

2 Likes

Hello, is it possible to use this with Cloudflare direct creator uploads using the tus protocol?
If so, can you share an example of how it would work?
Will buy a license immediately if this is supported!
Thanks!

Hi I have just purchased the plugin, While I Could send a file to bunnycdn for both object files and videos upload by url via postman, it seems that Im unable to upload any files to BunnyCDN using the plugin.

For the file upload i Tried to put my API accesskey on the XHR request json, but it seems it returns a weird error and Im unable to upload the file.


For the Video file , I have sucessfully created a video upload url to upload via the api connector, but when I try to upload the video file it prints a error saying i need to pair a file id which I dont need for the upload and returns an error. Upload Video


Also, If Possible could you make the uppy pro uploader into an invisible element/group that when clicked could allow users to upload a file directly and skip the need to click the browse files button?

It is impossbile to create an invisiable group for the uppy pro element and allow users to upload file via clicking other group/elements right now

Thank You!

@jon2 I had tested the free version out the past 2 weeks & loved it but the 50MB limit was a problem. As a result I purchased the Pro version today in order to be able to access the 50MB+ uploader abilities. Unfortunately I’m missing something, there appears to be a bug in your plug-in code. The pro version is not working for me; it does not even render on a preview page. Can you please look into this asap/this wk? Here are pics from 1) Bubble and 2) Google developer console.

I note this error duplicates in your demo as well.

Pic 1 :point_down:

Pic 2 :point_down:

Please let me know what you think & if you need anything from me. Thank you in advance :pray:

2 Likes

Is there any solution to this?

Hey @jon2 are you still updating / checking this plugin? I paid but I’m running into bugs i.e. the “when file(s) are added” event workflow doesn’t appear to be triggered when a file is added to the widget.

Anyone else run into and fix this?