React Uploading Widget

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 at codesandbox.io.

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

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:

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

Usage example

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

<p>
  <label htmlFor='file'>Your file:</label>{' '}
  <Widget publicKey='YOUR_PUBLIC_KEY' id='file' />
</p>jsx

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

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

<Widget
  id='file'
  name='file'
  tabs='file url'
  previewStep='true' />jsx

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

// ...
  onFileSelect={(file) => {
    console.log('File changed: ', file)

    if (file) {
      file.progress(info => console.log('File progress: ', info.progress))
      file.done(info => console.log('File uploaded: ', info))
    }
  }}
  onChange={info => console.log('Upload completed:', info)}
// ...jsx

Full documentation

Read the full documentation on GitHub.