Add real-time video uploading to a site without writing code, with Bubble.is and Transloadit

The new generation of inventions has brought about the rise of no-code software, which offers users the ease of building MVPs and such — all without writing a single line of code. One platform that allows you to do this is Bubble and we have just created a plugin for it. In this installment of "Let's Build", we'll show how you can use this plugin in combination with our own nifty Robots to add uploading and processing capablities to your website.


This is a companion discussion topic for the original entry at https://transloadit.com/blog/2019/07/lets-build-a-website-with-video-encoding-with-no-code/

Hi there,

If I wanted to build this in Webflow, is it possible?

Rupen.

Hi, we haven’t released a module yet for Webflow, so likely, some glue code still needs will need to be written. But I haven’t used Webflow myself yet, would you know what’s entailed typically with 3rd party integrations there?

Hi @kvz

Webflow accepts custom code (HTML, CSS, and JS), has a CMS to utilise too.
Custom code can’t be longer than 10,000 characters if it’s embedded. But can be stored somewhere else (Github, etc) and called.

Let me know if you need any specific info.
I’m keen to get a project off the ground using Transloadit.

Rupen.

Hi @kvz

Apologies I added a link to the Webflow custom code page but your spam filtered blocked the post.

Webflow will accept custom JavaScript, HTML, CSS. It’s also got a cms that can be utilised.

I’m keen to get some testing done for a client.

Rupen.

I see, well if it allows all that, perhaps you could just use Uppy with Robodog from our CDN? Perhaps that goes a long way already. Happy to hear about your attempts, perhaps we can help smoothen this ride!

Hi @kvz

I got further and built this

video-gallery-rv.webflow.io - sends to s3

The issue I now have is the return_url. I have nowhere to bring that into Webflow. I know the Bubble tutorial works as they provide a database module to utilise.

What other options do I have there? I need the destination path to be returned.

Also, how can I keep the original file in s3 while importing?

Thanks.
Rupen

Hi,

The destination path is inside the result’s ssl_url:

image

This is (at least) what you’ll want to save in Webflow’s database solution. Does that help?

As for keeping the original file in S3 while importing, we do not remove any imported file, so those will be safe :ok_hand:

Thanks!

Webflow doesn’t have a database I can write to like Firebase, etc. But it does have Zapier integration to write a live item in the cms (to display the video).

My dev skills are not very advanced. How can I save/push that returned path?

Rupen.

You are already logging the result to the webbrowser’s console it seems. So instead of

    .on('transloadit:result', (stepName, result) => {
      // use transloadit encoding result here.
      console.log('Result here ====>', stepName, result)
    })

Do something like

    .on('transloadit:result', (stepName, result) => {
      sendToFirebaseOrZapier(result.ssl_url)
    })

Hi @kvz

I see console and everything it logs.
Im not sure how I would get the url to copy to somewhere else.

Also the Zapier integration doesn’t seem to push the url.

Rupen.

Hey @kvz

So I did it but a different way.

Check it out.
https://video-gallery-rv.webflow.io/

Rupen.

Hi there,

I’d like to pass meta fields to the json output but I see there are many ways.
Can you tell me the correct way when a file is edited in the dashboard please?

Rupen

Hey that’s cool, congrats!

I just spoke to someone on the Uppy team and it should be possible also to set Uppy meta per file. They said that you can control the Assembly parameters per file, and that if the parameters end up being different, a new Assembly per file is created.

In this case we’re changing fields based on file meta data, so one Assembly per file should be created:

uppy.use(Transloadit, {
    getAssemblyOptions: (file, options) => {
        options.fields.path = file.name.whatever
        return {
            params: options.params,
            signature: options.signature,
            fields: options.fields
        }
    }
})

I think this should allow you to have a ${fields.path} that’s different per file. Is that what you mean?

Hi @kvz,

Not sure. I’ve tried this:

And I can edit. But I don’t see any output in json.

Rupen.

The Transloadit plugin’s fields option allows you to pass file metadata to Assemblies as fields.* properties. For example:

uppy.use(Transloadit, {
  ...otherOptions,
  fields: ['name', 'license', 'caption']
})

will set ${fields.name} to the meta.name property for each file. Due to how Transloadit Assemblies work, if the metadata differs between files, they will be run in separate Assemblies. This metadata will be available in the fields object in the Assembly JSON:
image

My apologies. I still don’t fully understand how to implement this in JavaScript. And I’m not a JavaScript expert :sweat_smile: