Upload Videos

You need a storage space for the videos that users will upload.

Cloudinary provides cloud storage and an awesome upload widget that allows users to upload videos or any type of file from their local computer, Facebook, Dropbox, Google Drive and Instagram.

See the Pen Upload Widget by Cloudinary (@Cloudinary) on CodePen.

Success Note: Head over to Cloudinary.com and create an account for free.

Integrate Cloudinary Upload Widget

Open up your public/index.html file and include Cloudinary's widget script just immediately after the stylesheet link.

 <script src="//widget.cloudinary.com/global/all.js" type="text/javascript"></script>

Update Upload Component

Head over to src/components/Upload.js. You'll modify the code to have an uploadWidget function.

import React, { Component } from 'react';
import { Link } from 'react-router';
import Nav from './Nav';

class Upload extends Component {

  uploadWidget = () => {
    window.cloudinary.openUploadWidget(
      { cloud_name: 'cloud_name',
        upload_preset: '<unsigned-preset>',
        tags: ['miniflix'],
        sources: ['local', 'url', 'facebook', 'image_search']
      },
      function(error, result) {
          console.log("This is the result of the last upload", result);
      });
  }

  render() {
    return (
      <div>
        <Nav />
        <h3 className="text-center">Upload Your 20-second Video in a Jiffy</h3>
        <hr/>

        <div className="col-sm-12">
          <div className="jumbotron text-center">
            <button className="btn btn-lg btn-info" onClick={this.uploadWidget}> Upload Video</button>
          </div>
        </div>
      </div>
    );
  }
}

export default Upload;

The upload widget takes in several parameters. However, we used the following: cloud_name, upload_preset, sources and tags in this code lab.

In the code above, we added a third argument, tags. Cloudinary provides this for automatic video tagging. Every video that is uploaded to this app will be automatically tagged, miniflix. In addition, you can provide as many tags as you want. This feature is very useful when you want to search for videos too!

In the uploadWidget function, we called the cloudinary.openUploadWidget function and attached it to the “Upload Video” button. When the user clicks the button, it opens the widget.

The sources parameter accepts an array of string values defining the tabs to add to the upload widget, where each source defines a new upload tab within the widget.

Info Note: Replace the cloud_name & upload_preset values with your credentials from the Cloudinary dashboard.

Head over to the /upload route and try uploading a video.

Upload widget

Upload Widget

Uploading the video

Uploading the video...

It uploads the video straight to Cloudinary and returns a response object about the recently uploaded video that contains so many parameters such as the unique publicid, secureurl, url, originalfilename, thumbnailurl, createdate, duration and so many others.