> ## Documentation Index > Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt > Use this file to discover all available pages before exploring further. # Upload assets in a React app (video tutorial) [githublink]: https://github.com/cloudinary-community/cloudinary-examples/tree/main/examples/react-upload-widget-preset ## Overview Add asset upload capabilities to your React app using the Cloudinary [Upload widget](upload_widget). Learn how to install and configure the Upload widget including how to make the widget work with the intricacies of a React application. ## Video tutorial This video is brought to you by Cloudinary's video player - embed your own!Use the controls to set the playback speed, navigate to chapters of interest and select subtitles in your preferred language. > **TIP**: :title=View the code You can find the code from this tutorial in [GitHub][githublink]. ## Tutorial contents This tutorial presents the following topics. Click a timestamp to jump to that part of the video. ### Introduction to the Upload widget {table:class=tutorial-bullets}| | | --- | --- | |{videotime:id=media :min=0 :sec=05 :player=cld} | Cloudinary has many ways to upload files to your Media Library to take advantage of Cloudinary's extensive features and capabilities. In a React app you can use the Upload widget as a quick and easy way to provide a full upload experience. | ### Add the Upload widget script to your React app {table:class=tutorial-bullets}| | | --- | --- | |{videotime:id=media :min=0 :sec=24 :player=cld} | Start with an empty React application and add the Upload widget JavaScript file. Paste the code, which you can find in the [Upload widget documentation](upload_widget#unsigned_uploads), into the `` section of **index.html**. | ### Add a new component for the Upload widget {table:class=tutorial-bullets}| | | --- | --- | |{videotime:id=media :min=1 :sec=15 :player=cld} | In your components folder, add a new file called **UploadWidget.js** in which you can create a component for the Upload widget. You can include the component in your **App.js** file. | ### Initialize the Upload widget {table:class=tutorial-bullets}| | | --- | --- | |{videotime:id=media :min=3 :sec=06 :player=cld} | Use the `createUploadWidget` method to initialize the widget. Pass in your cloud name (which you can find in the Console Dashboard) and an unsigned upload preset. | ### Create an upload preset {table:class=tutorial-bullets}| | | --- | --- | |{videotime:id=media :min=3 :sec=44 :player=cld} | In your Cloudinary Console, navigate to **Settings > Upload > Upload presets** to create a new unsigned [upload preset](upload_presets). | ### Create a callback function {table:class=tutorial-bullets}| | | --- | --- | |{videotime:id=media :min=4 :sec=17 :player=cld} | Create a new callback function to handle the response from the Upload widget. | ### Add a button to open the Upload widget {table:class=tutorial-bullets}| | | --- | --- | |{videotime:id=media :min=4 :sec=32 :player=cld} | Return a simple button from the component to open the Upload widget when clicked. | ### Test it out {table:class=tutorial-bullets}| | | --- | --- | |{videotime:id=media :min=5 :sec=21 :player=cld} | Click the button to open the Upload widget and upload a file to your Media Library. You can open the Media Library to see that it successfully uploaded. | Take a look at these code examples: * [Using the Upload widget with upload presets in React](https://github.com/cloudinary-community/cloudinary-examples/tree/main/examples/react-upload-widget-preset) * [Using the Upload widget for signed uploads in Next.js](https://github.com/cloudinary-community/cloudinary-examples/tree/main/examples/nextjs-upload-widget-signed) * [Using the Upload widget with upload presets in Next.js](https://github.com/cloudinary-community/cloudinary-examples/tree/main/examples/nextjs-upload-widget-preset) ## Keep learning > **READING**: > > * Read our Upload widget [guide](upload_widget) and [reference](upload_widget_reference), covering every available parameter option. > * Check out an [Upload widget code explorer](https://stackblitz.com/edit/cloudinary-upload-widget-react) that you can fork for trying out some sample configuration changes. > * Take a look at our [React SDK](react_integration) to learn how to transform your [images](react_image_transformations) and [videos](react_video_transformations). > * Watch more [Dev Hints videos](https://www.youtube.com/playlist?list=PL8dVGjLA2oMpaTbvoKCaRNBMQzBUIv7N8) on the [Cloudinary YouTube channel](https://www.youtube.com/cloudinary). #### If you like this, you might also like... Generate Upload Signature Generate a timestamp and signature for a signed upload Upload Widget Embed an Upload Widget in your site Upload with the CLI Apply background removal to images on upload    Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.