React image and video upload

Last updated: Jan-27-2023

On this page:

Upload options
Code examples

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.

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

Video tutorial

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

Upload endpoint

The upload endpoint is https://api.cloudinary.com/v1_1/${cloudName}/upload. To use the endpoint in your application, write a function that calls 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).

jQuery SDK with Blueimp File Upload adapter

If you are using jQuery in your app, you can take advantage of the built-in upload functionality in Cloudinary's jQuery SDK. This solution uses modern HTML5 cross-origin resource sharing (CORS) and gracefully degrades to a seamless iframe based solution for older browsers.

Note

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, which implement helpers to automatically generate the authentication signature for the upload.

Code examples

Code sample: Implement the upload widget.
CodeSandbox: Upload multiple files using a form in pure JavaScript using the Cloudinary upload endpoint.
CodePen: Use XMLHttpRequest to upload files in pure 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.
CodeSandbox: React Upload Widget Sandbox example implementation of the Upload widget.
CodeSandbox: Use chunked POST requests to upload large files from the client side.
Git sample project: Upload files and use a React upload control in the Photo Album sample project.