File Uploader for React

This is a React component made to integrate Uploadcare Widget into your React app easily; convenient props management and lazy loading are bundled.

The component allows users to upload files from their devices, social media, cloud storage, and more. All that without any backend code that's usually required to handle uploads.

Note, this library comes untranspiled. It means, if you want to support IE11, make sure you transpile node_modules. Learn more

• Demo & Examples
• Install
• Usage
• Configuration
  • Component configuration
  • Widget configuration
• Security issues
• Feedback

Demo and Examples

• Sandbox Demo: Basic usage example
• Props: How to set options (properties)
• onChange: How to handle events
• Gatsby: Basic usage example with Gatsby

Install

npm i @uploadcare/react-widget

Usage

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

<Widget publicKey="YOUR_PUBLIC_KEY" />;

To use the component, you should have an API key from Uploadcare. Uploadcare account is free and gives access to serverless file uploads, transformations, CDN delivery, and APIs. After sign up, you land on the Dashboard where you manage projects. Projects are identified by their public keys: replace YOUR_PUBLIC_KEY with your project’s Public API Key and you are all set.

Configuration

Component configuration

value: string

Set a file UUID/group UUID or a CDN URL as a value.

<Widget value='9dd2f080-cc52-442d-aa06-1d9eec7f40d1' />
<Widget value='9dd2f080-cc52-442d-aa06-1d9eec7f40d1~12' />

onFileSelect: (fileInfo: FileInfo) => void

onChange: (fileInfo: FileInfo) => void

Set callbacks for the respective events:

• onFileSelect provides you with the ability to do something after a new file is selected.
• onChange provides you with the ability to do something after a file is uploaded and ready.

The FileInfo object is described here.

customTabs: {[string]: CustomTabConstructor}

Add custom tabs to a widget.

Note that we added fifth argument to the custom tab constructor - uploadcare object. Widget is loaded lazily so you shouldn't import uploadcare-widget directly:

function myTab(container, button, dialogApi, settings, name, uploadcare) {
  ...
}

<Widget customTabs={{ 'custom_tab: myTab }} />

validator

The section is W.I.P.

Widget configuration

Uploadcare Widget can be deeply customized to suit your UX/UI. You can define allowed upload sources, implement file validation, and more.

All the options defined in the widget options docs are also supported in the component as props (use the camelCase notation, you can find it under “Object key” in the referenced article).

Use the live Uploadcare Widget Configurator as a starting point and consider checking out the docs on widget configuration.

Security issues

If you think you ran into something in Uploadcare libraries which might have security implications, please hit us up at bugbounty@uploadcare.com or Hackerone.

We'll contact you personally in a short time to fix an issue through co-op and prior to any public disclosure.

Feedback

Issues and PRs are welcome. You can provide your feedback or drop us a support request at hello@uploadcare.com.