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: 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:

• Upload endpoint: 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.

Video tutorial

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

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.