React jQuery File Uploader

We’ve built the React Uploader for the next version of the File Uploader.

Receive files from your users with a clean, lightweight and easy-to-integrate widget. This React component helps you integrate Uploadcare Widget into your React app natively; props management and lazy loading are bundled.

GitHub →

See a lazy-loading React component example.

React jQuery File Uploader example

View in CodeSandbox

Features

  • Upload files from a local disk, camera, and cloud source (up to 5 TB)
  • Multipart uploading for large files
  • Bulk file uploading
  • In-browser image editing
  • Uploading network to speed uploading jobs (like CDN)

Integration

Run this command in your project’s directory:

$npm install @uploadcare/react-widget

This way, you’ll get a ready-to-use component to include it in the layout.

Open your /src/App.js and add the following line along with other imports to load the newly installed component:

1import { Widget } from "@uploadcare/react-widget";

Usage example

To use the uploading widget component, add this code to your /src/App.js or another template of your choice:

1<p>
2  <label htmlFor='file'>Your file:</label>{' '}
3  <Widget publicKey='YOUR_PUBLIC_KEY' id='file' />
4</p>

Just replace YOUR_PUBLIC_KEY with your Public API Key in the code above.

Finally, open your app in a browser, or run it again via npm start and that’s it.

Settings and Events

jQuery File Uploader is highly customizable. The component uses the camelCase notation of the options names; these name versions are called Object key in Options Summary.

For example, this is how you allow uploading files only from local storage and URLs via the tabs attribute and enable the preview step via the previewStep attribute:

1<Widget
2  id='file'
3  name='file'
4  tabs='file url'
5  previewStep='true' />

Regarding the events, you can use onChange and onFileSelect. It’s well described in our jQuery File Uploader API reference and in the README of the component’s GitHub repo. A couple of basic examples:

1// ...
2  onFileSelect={(file) => {
3    console.log('File changed: ', file)
4
5    if (file) {
6      file.progress(info => console.log('File progress: ', info.progress))
7      file.done(info => console.log('File uploaded: ', info))
8    }
9  }}
10  onChange={info => console.log('Upload completed:', info)}
11// ...

Full documentation

Read the full documentation on GitHub.