> ## 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. # React image and video upload When using the React SDK, you can use one of several options to upload files directly to Cloudinary without the need for server-side operations or authentication signatures. ## Upload options ### Upload widget The [Upload widget](upload_widget) is a ready-made, responsive user interface that enables your users to upload files from a variety of sources directly to Cloudinary. You can customize and embed this UI within your web application with just a few lines of code. Check out the following [Upload Widget code explorer](https://stackblitz.com/edit/cloudinary-upload-widget-react) that you can fork to try out some sample configuration changes: > **NOTE**: Due to CORS issues with StackBlitz, you may have errors opening the widget with the preview. Try opening the preview in a new tab to resolve this or use the GitHub link below to run locally. This code is also available in [GitHub](https://github.com/cloudinary-devs/cloudinary-upload-widget-react). #### Video tutorial Watch this video tutorial to see how to integrate the Upload widget into your React app: 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. #### 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 [Dashboard](https://console.cloudinary.com/app/home/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. | ### Upload endpoint The [upload endpoint](image_upload_api_reference#upload) is `https://api.cloudinary.com/v1_1/${cloudName}/upload`. To use the endpoint in your application, use the [JavaScript Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/fetch) to call the Cloudinary `upload` endpoint and pass: * an **unsigned** [upload preset](upload_presets) with the [upload method options](image_upload_api_reference#upload) you want to apply for all files * the file(s) to upload * other [unsigned upload parameters](image_upload_api_reference#unsigned_upload_parameters) to apply to the selected files (e.g. `tags`, if needed). Check out the [Upload images with Fetch API video tutorial](upload_images_with_fetch_api_tutorial), which walks through setting up upload parameters with FormData and making HTTP requests to upload images programmatically from the browser. > **NOTES**: > > * Each of the upload options described above can also be performed as a signed upload, but in this case, an authentication signature must be generated on your backend server. This can be implemented in conjunction with one of Cloudinary's [backend SDKs](cloudinary_sdks), which implement helpers to [automatically generate the authentication signature](authentication_signatures#using_cloudinary_backend_sdks_to_generate_sha_authentication_signatures) for the upload. > * If you are using jQuery in your app, you can take advantage of the [built-in upload functionality in Cloudinary's jQuery SDK](jquery_image_and_video_upload#direct_uploading_from_the_browser). This solution uses HTML5 cross-origin resource sharing (CORS) and gracefully degrades to a seamless iframe based solution for older browsers. ## Code examples * **Code sample:** Implement the [upload widget](upload_widget#quick_example). * **Code explorer:** [Upload multiple files using a form](client_side_uploading#code_explorer_upload_multiple_files_using_a_form_unsigned) in pure JavaScript using the Cloudinary upload endpoint. * **CodePen:** [Use the JavaScript Fetch API to upload files](https://codepen.io/team/Cloudinary/pen/OJreJmz) in vanilla JavaScript using the Cloudinary upload endpoint for unsigned uploading with an upload preset. * **Sample project:** [Perform signed uploads from the browser](client_side_uploading#sample_project_upload_multiple_files_using_a_form_signed) by generating a signature on the server.* **Code explorer:** [React Upload Widget code explorer](https://stackblitz.com/edit/cloudinary-upload-widget-react) example implementation of the Upload widget. * **Code explorer:** Use chunked POST requests to [upload large files](client_side_uploading#code_explorer_chunked_asset_upload_from_the_client_side) from the client side. * **Git sample project:** Upload files using the Upload Widget and the REST API in the [Photo Album](https://github.com/cloudinary-devs/react-photo-album) sample project. > **TIP**: Enjoy interactive learning? Check out more [code explorers](code_explorers)!