I am interested in uploading videos to my bubble app. I am open to however anyone can do that that is the most cost-effective. It doesn’t seem that Bubble is the way to go.
Does anyone have experience uploading to another service, like Vimeo? Two plugins in the market can “upload” videos to Vimeo after authenticating. Still, I’d prefer to have it connect with whatever API keys necessary instead of creating an account using Vimeo credentials.
Does anyone have any ideas? I like Vimeo as their prices are really reasonable compared to bubbles.
Thank you. I was able to get this working with one issue. The redirect URL is being ignored and it’s not redirecting. I found on the internet that others have experienced this and solved it by adding a value to the Accept header.
I created a shared header and populated the fields and it still redirects to Vimeo’s default page. Clearly, this isn’t my strength Ahah. Any suggestions? I’m very resourceful, but I can’t find anyone who uses the API connector in relation to Vimeo in the forum.
I would appreciate any guidance. Thank you!
Benjamin
Do yo mean the ‘Redirect approval company URL’? You can set that in your Vimeo developer account, on your app settings. You’ll find your OAuth redirect URLs there as well.
To upload to Vimeo you’ll need to use the ‘OAuth1 User-Agent Flow’ authentication method in the Bubble API connector.
Then add all the details for redirects, your app keys, and your scopes in the authentication panel:
Thank you for taking the time to draft this all out for me @adamhholmes. Unfortunately, this got me further away from working. Before, I could get an upload to happen, but it wouldn’t bring them back after. Bringing them back would have the Video ID as a parameter that I have an input getting from the url.
With these changes, now the upload form doesn’t load.
I have two questions: what do I paste and where now that all of these changes have been implemented.
App ID - what is this and where do I find it? Client Identifier?
Under the shared header Authorization: is that the access token?
I’m sorry. I am just learning how to use the API Connector and have done some pretty cool things with it, but usually its more straight forward than Vimeo. Also Vimeo’s documentation doesnt seem to be searchable, so its a bit harder.
I think they have to approve it before they will give you upload permission, but once approved you can access all your app API details from within their app management portal (your api keys, scopes, auth tokens, redirects etc.)
Their getting started guide explains in more detail:
Once you’re all set up and have permission to upload, you have 3 options for the method used to upload videos to your Vimeo account - they each have pros and cons, so deciding which is best for your app will depend on your use case.
(We currently use the ‘pull method’ as is the easiest to set up, and probably gives the cleanest UX for the user, but it does require additional storage for the uploaded videos, even if it’s just temporary - we use AWS s3. We are looking at setting up the TUS method, but so far it’s proved much more challenging to set up, so for now we’re sticking with the pull method).
@adamhholmes, I had this mostly working from following their documentation. What I couldn’t get working is the redirect after upload back to my app, hence this post ;).
After following the directions you mentioned above with the screenshots, I can’t get the upload form to show anymore, let alone get the redirect to work? It seems that in your last post, you want me to figure it out on my own, but after making the changes you suggested, the upload form wont load. Two fields are being asked for, and I have no idea what it’s asking. Nowhere in the documentation does it mention APP ID. I was able to find the information for authorization, so that shouldn’t be an issue anymore.
When making the upload call, I followed their documentation and it worked (except the redirect). Then I made the above changes, and the upload form doesn’t show. I think it’s because I don’t know if I have the right APP ID. Is that the Client Identifier? Because if it is, that is what I put in for APP ID.
I can go back to how I set it up before, but I need help redirecting. I can have the users copy and paste the video id and click the back button, but if that is what it is supposed to do naturally, that doesn’t make sense.
I’m sorry if I seem frustrated, but this would need to be completed by tomorrow. I know it’s not your issue, but I was hoping you could help me if you understand more about this.
Sorry for seeming short, and I appreciate any help, really!
It looks as though you’re running the API as a ‘data’ call, rather than an ‘action’.
It needs to be run as an action, which is probably best run on page load.
As I said before, I don’t personally use the ‘post’ method to upload (although we did experiment with it), so I’m not that familiar with how it works, but I just ran a quick test with it and managed to get it working fine.
The easiest way is to have a group on your page with a datatyp ‘text’, and have your HTML element inside that group, with the content set to be the parent group’s text.
Then, on page load run the workflow to get the form html, then in the same workflow run an action to display the result of step one in the group which contains the HTML element
AHAHAHAHA @adamhholmes, That got the upload.form to show again, phew. However, it still doesn’t redirect back to my supplied redirect URL. This is so frustrating. I am sorry that you’re involved in this. I understand if you are not interested in helping me figure this out, but what do you think the next step might be.
The redirect URL in the Vimeo developer dashboard is upon authentication, which they are not authenticating into their accounts, so that URL is irrelevant here.
I don’t know that the method we are using here is really relevant also; I followed all of the instructions, I think lol.
Mainly, I am asking if you can see if I am missing something. Thank you again.
I can’t seen any difference now between what you’re doing and what I did in my test, yet I’m able to redirect to any url without issue - so I really can’t work out what the issue is I’m afraid.
As I mentioned before, I personally use the ‘Pull’ upload approach rather than the form based one, as it’s seemingly simpler to set up than the other 2 methods, and gives a better user experience, so you might want to consider that instead.
Originally we tried to use TUS, but couldn’t get anywhere despite speaking with both Bubble, and Vimeo - who both recommended using the ‘Pull’ approach.
The benefits, as well as being much more straight forward to set up, are that you can fully control the UX inside Bubble, with full control over the design and upload process including having attractive progress bars during download, and completion messages etc. without the user ever leaving your app.
The only (small) downside is that you have to take into consideration storage space (and possibly cost) wherever it is the user initially uploads the video to (although you don’t have to store it permanently so it’s not really an issue) and if that’s not on Bubble then you’ll need an extra integration to set that up (i.e with AWS).
But it might be worth considering and looking into (personally I’d recommend it over the form method, and it’s what both Bubble and Vimeo recommended to me when I discussed it with them last year).
We upload to AWS then pull from there to Vimeo (as Bubble storage is limited, and we were concerned about multiple users attempting to upload at once, or uploading multiple files).
We were planning to delete uploaded videos as soon as the upload to Vimeo was complete, but so far we haven’t bothered as s3 storage is so cheap, so we’ll probably keep the original uploads as backup at least for now.
It was a bit of a pain to set up the AWS integration, but once it’s done it all works fine (of course you don’t have to use AWS - uploading straight to Bubble is fine in most cases if you delete the upload once the transfer is complete).
phew. However, it still doesn’t redirect back to my supplied redirect URL. This is so frustrating. I am sorry that you’re involved in this. I understand if you are not interested in helping me figure this out, but what do you think the next step might be.