File uploads > 50MB + Video Capture - New Plugin from Zeroqode

levon · March 22, 2018, 12:43pm

Hey Zeroqoders
This one has been awaited for a long long time

This plugin uses uploadcare.com integration for allowing to upload files more than 50MB (up to 5TB depending on a plan). Users can choose to upload from various sources: computer, device camera (for video recording as well!), URL, Facebook, Google Drive, Google Photos, Dropbox, Instagram, Evernote, Flickr, Onedrive.
Once the upload is finished, the plugin returns a state with URL of the uploaded file.
You can customize the look and feel of the widget from your Uploadcare dashboard - for example you can configure it to only show the camera capture option.

Here is the plugin page: File uploads >50mb + Video Capture Plugin | Bubble

Demo page:

plugintests.bubbleapps.io/uploadcare

And some screenshots

Levon Terteryan
Founder @ Zeroqode & Bubblewits

let’s stay in touch on twitter!

Bubble Templates
Bubble Plugins
Bubble Courses
Convert Web to iOS & Android
No-code Development Services

Bubbleboy · April 12, 2018, 8:19am

I’m subscribed to uploadercare plugin…A couple of questions:

Can you restrict in the file dialogue the Mime type? this just suppose only want a user/consumer to select PDF or upload?
Dependent upon whether you can or cannot control question one… Is it possible to update the text shown on the file dialogue… Currently it states " upload any files" or words to that effect… Obviously only if you allow this in the plug-in otherwise its images only. Maybe this is uploadcare question… I’ve dropped a note to Alex just in case this is on their side
In the chrome console it shows a warning…“no public key in header” I appreciate this is using their script…so you can’t control this and I appreciate also your adding the public key in the backend thus not exposing it… Or I assume so… More an observation there question just making sure I had missed anything.
Kind of staying the obvious but I presume if I need to delete an uploaded file and I will add an API connector with the appropriate call to the API endpoint at Upladcare… unless this is part of your plug-in?
Final question… To initiate/launch the dialogue its a button which can obviously be configured… I assume you cannot initiate this is an action in the bubble workflow…

levon · April 12, 2018, 12:33pm

Hey Tim,

yes, we will update the plugin to accommodate this - by default the uploader will show the allowed extensions but the user will still be able to switch to all.

we’ll try add it as a parameter

you are right, we tried to hide it from the console, can’t remove that warning at the moment.

that’s right, it’s not a part of plugin currently

we’ll add this

we’ll update shortly once we push the changes to the plugin
Thanks!
Levon Terteryan
Founder @ Zeroqode & Bubblewits

let’s stay in touch on twitter!

Bubble Templates
Bubble Plugins
Bubble Courses
Convert Web to iOS & Android
No-code Development Services

Bubbleboy · April 12, 2018, 1:10pm

Thanks Levon, all answers duly noted thanks…i assumed as much…i can easily add the relevant uploadcare widget code to the header in the interim…to accommodate the text changes and restrict file times by Mime. Making the DELETE API call is not an issue…

initiating the File Dialog on an action Vs Button would be important…just from my UI perspective other than that its elegant and works a treat…far far better consumer experience than the native available options …just the % progress is a god send.

I’ll await the update .Regards Tim

Bubbleboy · April 16, 2018, 2:44am

@levon one additional observation after ive completed the testing…which all went great with the exception of the Button element which is used to initiate the file dialog. its a challenge to style this correctly…the font and button styling does not seem to apply correctly although it close if that make sense…whats more of an issue is that the text is right justified on mobile (in my case ios) can this be resolved before the update?

levon · April 16, 2018, 10:19am

Hey Tim,
we’ll check this out.
thanks!

levon · April 19, 2018, 8:11am

Hey Tim, did you try using custom theme when customizing the look and feel of the button? We almost finished with adding a workflow that would open the dialog box so you’ll be able to use Bubble’s buttons to call it.

levon · April 19, 2018, 8:52am

Levon Terteryan
Founder @ Zeroqode & Bubblewits

let’s stay in touch on twitter!

Bubble Templates
Bubble Plugins
Bubble Courses
Convert Web to iOS & Android
No-code Development Services

jon1 · December 7, 2018, 3:15pm

Hi Levon & team! I’d like to offer a new feature request for this plugin. Limiting the length of a video recording.

I’m looking to provide my users the ability to record a video inside the uploadcare widget using WebRTC webcam feature. One issue with this is when a recording size exceeds the max upload size limit for my plan. In this case, the video simply is rejected and fails to upload, the browser blob is then dumped and the recording is lost forever. I spoke with uploadcare about this UX issue and they said it can be handled with a JS snippet that stops the recording automatically at a preset time so as to avoid accidentally exceeding the upload size limit. They provided me the snippet linked below.

I was wondering if this could be incorporated into the plugin. When I place this script in the bubble page head, it can’t seem to find the uploader’s element selector given the way that bubble and this plugin renders in the DOM. Thoughts? Thanks so much in advance!

levon · December 7, 2018, 8:11pm

Hi Jon, we’ll check if this is possible

jon1 · December 7, 2018, 10:37pm

Thanks so much!

Another self-interested request if you are digging into making some changes…
Having the ability to control video bitrate would be really nice addition. It seems like straightforward parameters, but I obviously can’t speak to your plugin. https://uploadcare.com/docs/file_uploads/widget/options/#option-video-bits-per-second

Upload care pricing.
I wanted to give a shoutout to uploadcare who was willing to offer me 250mb and 500mb max uploads with the hacker plan for an additional fee. Its a reasonable option between $25/mo ‘hacker’ and the $125/mo ‘startup’ plan. I’m mentioning this because another poster with similar needs as me said that UCs pricing model wasn’t a good fit for his business. I don’t want to quote prices or anything here, because this is technically an ‘off-menu’ offering that could be subject to change but I’ll say that it was attractive enough for me to consider.

levon · December 14, 2018, 8:40am

Hello Jon,
we have added the option to limit the length of the uploaded video.
To give it a try please upgrade to plugin’s latest version and refresh the editor.
Thanks
Levon

andisayhey · December 31, 2018, 8:14am

I just started using your Uploadcare plugin for Bubble. I am trying to implement video into my app but I cant find a way to play the resulting video in any of Bubble’s video players, including Zeroqode’s video player. How do I do this?

After the video is added, I want other users to be able to see the video that the user posted. So I tried every various video player that allows for dynamic links. I have tried all of the various state options from the uploadcare plugin but none are recognized by the video players.

Which do I choose?

(I think it has to be File url because that works for the photo capture, but it doesn’t work for the video capture. I haven’t been able to get the url to play for video and I am using Zeroqode’s video player.)

Also, for your button style options, can you take the blue outline off of the transparent style? I uploaded an icon as the background image but there is still a blue outline around the button.

Lastly, the plugin stretches my container for my mobile app. It increases the height which is a bad look. Is there a way to prevent this?

Dumitru · January 2, 2019, 3:42pm

Hello, Andi.

I see you’re having trouble with the video playback using Video for the uploaded file through the
uploadcare plugin.
Looking at your screenshot for the videoplayer, you’re right the choice should be for the playback of the uploadcare’s file URL/file Group URL.
Could up post a video or some additional screenshots with workflow and settings so we could reproduce the issues.
Regarding the stretching, could also provide screenshots on the issue.
Thanks for understanding

As for Style, it can be changed in the Styles tab of your bubble app pick a button and change the color of the border. See the screenshot below.

Regards.
Zeroqode Team.

andisayhey · January 3, 2019, 3:04am

My workflow:

“When Uploadcare uploading is finished”…Show Post Creation Group

In the Post Creation Group, I have a video player. This video player (I have tried both Zeroqode’s video player and Video JS) the source is a dynamic link: uploadcare’s file URL/File Group URL

Thats all. The video doesn’t play. Video JS says “not a compatible file format…” and Zeroqode’s Video player is just a blank player with an unclickable play button.

I have also tried Uploadcare’s List of File names (I got this hint from testing Zeroqode’s uploadcare demo and seeing the different outputs and list of file names has the .mp4 in it), and both tested video players actually show a play button but they are unclickable.

Alternatively, I tried a workflow. Similar to the previously mentioned workflow BUT with an additional step in between:

“When Uploadcare uploading is finished”…CHANGE USER-CURRENT USER- Video Upload= Uploadcare’s URL (alternatively also tried List of file names as mentioned above)…then …Show Post Creation Group
(in Bubble’s data settings Video=file)

Same thing. The video doesnt play. I do not think using the URL is right at all because I noticed clicking on the url or loading it just simply downloads the file rather than play it.

andisayhey · January 3, 2019, 3:04am

Can you set up a demo where a video is playable after using the plugin?

andisayhey · January 3, 2019, 3:16am

My only thinking is that uploadcare doesn’t support video playback. Yes you can capture video and upload it but then it downloads as a file. So may be I need to use another plugin together with this one. One that would allow me to then upload the uploadcare file to dropbox or another platform that allows video playback/streaming, and then use that url in the video player?

andisayhey · January 5, 2019, 9:29pm

Have you found a way to playback the uploadcare file within Bubble? I have been waiting for a response. I don’t think your plugin is capable of doing this. Can you add this feature?

andisayhey · January 6, 2019, 4:16am

Have you been able to get video playback of a video upload, afterwards, or is it downloadable only? I am trying to figure out a way to get Uploadcare to stream the videos in a video player using a url. It doesn’t work so far, only starts a video download.

andisayhey · January 6, 2019, 4:24am

Would it be possible for you to set up a Video player in this plugin’s test page to show how to set up streaming the Uploadcare video?

If you do this, I will buy your plugin outright for the $70. You can even raise it to $100 and I will buy it. For all my testing, it doesn’t seem like there is any url from Uploadcare that is actually for streaming video. The output links only trigger video downloads.

Again, please sort this out.

Only solution I think might work, is to upload an Uploadcare file to another service that streams the video, like Dropbox with has shareable/streamable links for files. I might try to link Uploadcare to Dropbox, but this solution is not ideal since it will slow down the workflow and the app.