React image and video upload

When using the React SDK, you can use one of the following methods to upload files directly to Cloudinary without the need for server-side operations or authentication signatures:

Upload widget: A ready-made, responsive user interface that enables your users to upload files from a variety of sources directly to Cloudinary. This UI can be easily customized and embedded within your web application with just a few lines of code.
Upload endpoint: https://api.cloudinary.com/v1_1/${cloudName}/upload. To use the endpoint in your JS app, 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 server-side SDKs, which implement helpers to automatically generate the authentication signature for the upload.

Example

The Cloudinary Photo Album sample project shows usage of both Cloudinary file upload and a React upload control.