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 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 that you can fork to try out some sample configuration changes:

This code is also available in GitHub.

Video tutorial

Watch this video tutorial to see how to integrate the Upload widget into your React app:

Tutorial contents

Upload endpoint

The upload endpoint is https://api.cloudinary.com/v1_1/${cloudName}/upload. To use the endpoint in your application, use the JavaScript Fetch API to call the Cloudinary upload endpoint and pass:

• an unsigned upload preset with the upload method options you want to apply for all files
• the file(s) to upload
• other unsigned upload parameters to apply to the selected files (e.g. tags, if needed).

Code examples

• Code sample: Implement the upload widget.
• Code explorer: Upload multiple files using a form in pure JavaScript using the Cloudinary upload endpoint.
• CodePen: Use the JavaScript Fetch API to upload files in vanilla JavaScript using the Cloudinary upload endpoint for unsigned uploading with an upload preset.
• Glitch: Perform signed uploads from the browser by generating a signature on the server.
• Code explorer: React Upload Widget code explorer example implementation of the Upload widget.
• Code explorer: Use chunked POST requests to upload large files from the client side.
• Git sample project: Upload files using the Upload Widget and the REST API in the Photo Album sample project.