Serverless File Uploads for React

7 Minutes to Integrate

React is a JavaScript library for building user interfaces. Integrating Uploadcare enables your React app to receive files with a powerful widget that adapts to your app’s UI and flow. Each file ingested via File Uploader gets instantly cached by our CDN layers to be rapidly and reliably delivered across 130+ countries.

We’ve got a lazy-loading React component powered by the Uploadcare integration and a demo on codesandbox.io. That’s how it looks like:

React Demo App on codesandbox.io
React Demo App on codesandbox.io

You can either check out the source code of our demo or follow this guide to build your React app with Uploadcare integration from scratch in about 7 minutes.

We will create a new React app in the first step. So, If you’re planning to stick with an existing project, head straight to the second step.

Before We Begin

NodeJS

You’ll need a working NodeJS installation, check out the NodeJS website for install guides. Usually React supports most of the NodeJS versions released over the past few years. You can always check out the latest requirements in their docs.

Note, you can check your NodeJS version via the following CLI command:

node -v

Uploadcare Account

Uploadcare account is free and gives access to serverless file uploads, transformations, CDN delivery, and APIs. You land on the Dashboard where you manage projects. Those are separate environments that hold your files and settings. Projects are identified by their public keys. For instance, you can use one project as a target for general-purpose uploads and another for implementing extra security features.

In case you don’t have an Uploadcare account, Sign Up for one. Once you get it, navigate to your Dashboard to create a new Project or discover the Public API Key for an existing one.

If you’re planning to receive non-image uploads in your app, add billing info to your account settings.

Step 1. Create a New React App

To create a new React project, run the following CLI commands:

npx create-react-app react-uploadcare
cd react-uploadcare
npm start

The installation takes a few minutes. Your “react-uploadcare” dir structure should then look like this:

React Project Directory Structure
React Project Directory Structure

And you’re done with React installation! Now let’s integrate File Uploader.

Step 2. Integrate Uploadcare With Your App

First, get the @uploadcare/react-widget package from npm. Run the following in your project directory:

npm install @uploadcare/react-widget

This way you get a ready-to-use component to include in the layout.

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

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

To use the Widget component, put the following somewhere in the /src/App.js or another template of your choice:

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

And the last thing to make it work is to set Public Key you discovered in the Before We Begin section. Just replace the YOUR_PUBLIC_KEY string in the code above with your actual one.

Finally, open your app in a browser if it is still running, or run it again via npm start and that’s it 🚀

Step 3. Check Out Settings and Events

The File Uploader is highly customizable through widget options, check those out in our Options Summary. The component uses camelCase notation of the options names; those names versions are called Object key in the 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' />

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 GH repo. The little usage 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)}
// ...

Conclusion

Yay, you can now integrate our File Uploader into your React apps 🚀

Check out our docs to learn more about the Uploadcare Platform, implementing In-Browser Image Editing, and other Libraries and Integrations options.

In case you have any questions, feel free to post those around our community area.

We’re always happy to help with code, integration, and other stuff. Search our site for more info or post your question in our Community Area.