{"id":28171,"date":"2022-03-23T22:25:10","date_gmt":"2022-03-23T22:25:10","guid":{"rendered":"http:\/\/Handling-Robust-Video-Uploads-in-Gatsby.js"},"modified":"2022-03-23T22:25:10","modified_gmt":"2022-03-23T22:25:10","slug":"handling-robust-video-uploads-in-gatsby-js","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/handling-robust-video-uploads-in-gatsby-js\/","title":{"rendered":"Handling Robust Video Uploads"},"content":{"rendered":"

Adding upload support, especially videos to websites and apps, comes with considerable research for new and experienced developers. \u201cHow to deal with file size and storage space for videos?\u201d, \u201cWhat standard video format should the upload support?\u201care some of the questions that might arise.<\/p>\n

This article shows you how to add video upload support to a Gatby.js app using Cloudinary Upload Widget – a complete, interactive user interface that enables file upload from various sources to your website or web application.<\/p>\n

Gatsby<\/a>.js<\/a> is a React-based front-end development framework used to build rich and optimized website and web applications. It offers features including SEO, security, integrations, and accessibility, without installing additional packages.<\/p>\n

Cloudinary<\/a> is a platform that enables you to upload, store, manage, transform, and deliver images and videos for websites and web applications.<\/p>\n

Sandbox<\/h2>\n

We completed this project in a Codesandbox<\/a>, and you can fork it to run the code.<\/p>\n<\/div>\n \n

\n <\/iframe>\n <\/div>\n\n

Prerequisites<\/h2>\n

We need to install the Gatsby-CLI globally and create a new Gatsby.js project using NPM – a command line package manager. You can also use Yarn.<\/p>\n

If you already have a Gatsby project running, you can skip this Gatsby installation step.<\/p>\n

In the desired directory for our project, we run:<\/p>\n

    npm install -g gatsby-cli && gatsby new<\/span> upload-widget\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We proceed to install the required dependencies with:<\/p>\n
    npm install react-helmet\n<\/code><\/span><\/pre>\n
react-helmet<\/code> is a library<\/a> that takes plain HTML tags and outputs plain HTML tags. It will help us avoid the Reference error: Window is not Defined<\/code> error when using client-side only packages in Gatsby.js.<\/p>\n
Find all other methods for using client-side only packages in Gatsby.js here<\/a>.<\/p>\n
Adding the upload widget<\/h2>\n
With the project dependencies installed, we can now set up our application to use Cloudinary Upload Widget. To use the Cloudinary Upload Widget in our application, we need to include the script from a CDN in our application using react-helmet<\/code>, a package we installed earlier.\nAdd the script from a CDN to  index.js<\/code> file to use Cloudinary Upload Widget:<\/p>\n
    import<\/span> * as<\/span> React from<\/span> \"react\"<\/span>\n    import<\/span> { Helmet } from<\/span> \"react-helmet\"<\/span>\n    import<\/span> Layout from<\/span> \"..\/components\/layout\"<\/span>\n    const<\/span> IndexPage = ()<\/span> =><\/span> {\n      return<\/span> (\n        <Layout<\/span>><\/span>\n          <Helmet<\/span>><\/span>\n            <script<\/span> src<\/span>=\"https:\/\/upload-widget.cloudinary.com\/global\/all.js\"<\/span> \/><\/span>\n          <\/Helmet<\/span>><\/span>\n          <div<\/span> className<\/span>=\"upload-container\"<\/span>><\/span>\n              <button<\/span>><\/span>Upload Video<\/button<\/span>><\/span>\n              <p<\/span>><\/span>\n                Uploaded Video to Cloudinary\n              <\/p<\/span>><\/span>\n          <\/div<\/span>><\/span>\n        <\/Layout<\/span>><\/span><\/span><\/span><\/span>\n      )\n    }\n    export<\/span> default<\/span> IndexPage\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
With that done, we can update  index.js<\/code> and configure Cloudinary Upload Widget to upload videos to Cloudinary:<\/p>\n
    import<\/span> * as<\/span> React from<\/span> \"react\"<\/span>\n    import<\/span> { Helmet } from<\/span> \"react-helmet\"<\/span>\n    import<\/span> Layout from<\/span> \"..\/components\/layout\"<\/span>\n    const<\/span> IndexPage = ()<\/span> =><\/span> {\n      const<\/span> [url, setURL] = React.useState(null<\/span>)\n      const<\/span> openWidget = ()<\/span> =><\/span> {\n        window<\/span>.cloudinary\n          .createUploadWidget(\n            {\n              cloudName<\/span>: \"dtgbzmpca\"<\/span>,\n              uploadPreset<\/span>: \"tca2j0ee\"<\/span>\n            },\n            (error, result) => {\n              if<\/span> (!error && result && result.event === \"success\"<\/span>) {\n                setURL(result.info.url)\n              }\n            }\n          )\n          .open()\n      }\n      return<\/span> (\n        <Layout<\/span>><\/span>\n          <Helmet<\/span>><\/span>\n            <script<\/span> src<\/span>=\"https:\/\/upload-widget.cloudinary.com\/global\/all.js\"<\/span> \/><\/span>\n          <\/Helmet<\/span>><\/span>\n          <div<\/span> className<\/span>=\"upload-container\"<\/span>><\/span>\n            <button<\/span> onClick<\/span>={()<\/span> =><\/span> openWidget()}>Upload Video<\/button<\/span>><\/span>\n            {url && (\n              <p<\/span>><\/span>\n                Uploaded Video Url <span<\/span>><\/span>{url}<\/span<\/span>><\/span>\n              <\/p<\/span>><\/span>\n            )}\n          <\/div<\/span>><\/span>\n        <\/Layout<\/span>><\/span><\/span><\/span><\/span>\n      )\n    }\n    export<\/span> default<\/span> IndexPage\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
In the snippet above, we added a state variable to store an uploaded video URL and a function to configure the Cloudinary Upload Widget.<\/p>\n
We then use the callback function to check for errors and update the URL based on the returned result.<\/p>\n
Finally, we created a button that triggers the widget when clicked and conditionally displays the returned URL.<\/p>\n
\n
You also need a Cloudinary<\/a> a<\/a>ccount<\/a> for video upload. S<\/strong><\/a>ignup<\/strong><\/a> is completely free<\/strong>.<\/p>\n<\/blockquote>\n
The Cloudinary Upload Widget also configures cloudName<\/code>, which is the name of your Cloudinary account. To get the value of cloudName<\/code>, log in to your Cloudinary account<\/a>, navigate to the dashboard, and copy the value, as shown in the highlighted section below.<\/p>\n
\"Shaded<\/p>\n
Managing upload presets<\/h2>\n
uploadPreset<\/code> is a parameter that enables us to centrally define a set of asset upload options instead of specifying them in each upload call. To get your upload preset:<\/p>\n
Log in to your Cloudinary account, click on the Settings<\/strong> icon and select the upload tab.<\/p>\n
\"click<\/p>\n
Navigate to the Upload presets<\/strong> section, click on the Add Upload preset<\/strong> if you don\u2019t have one or copy an existing one if you do.<\/p>\n
\"select<\/p>\n
Copy the preset name and change the signing mode<\/strong> to unsigned<\/strong> to enable unsigned uploading to Cloudinary with this upload preset.<\/p>\n
\n
Signed<\/strong> and Unsigned Uploads<\/strong> are ways in which Cloudinary Upload Widget support file upload to Cloudinary. The difference is, Signed Upload requires a bit more setup and coding but provide a more secure upload process when required, while Unsigned Upload makes it quick and simple for you to provide a UI where users can upload content, but it is less secure.<\/p>\n<\/blockquote>\n
For this tutorial, we used the Unsigned Upload.<\/p>\n
Then click on the Save<\/strong> button to save the changes.<\/p>\n
\"copy<\/p>\n
With this, you can now test the application and upload video.<\/p>\n
\"Cloudinary<\/p>\n
Conclusion<\/h1>\n
This post discussed how to add video upload functionality to Gatsby.js project using Cloudinary Upload Widget. Try out the various upload options specified in the widget<\/p>\n
You may find these resources useful<\/p>\n
This command creates a Gatsby project called upload-widget<\/strong> using the default Gatsby starter<\/a>.<\/p>\n