Serverless File Uploads for React
14 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 demo React app repo powered by the Uploadcare integration. That’s how it looks like:

React Demo App

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 14 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 Dir 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-widget package from npm. Run the following in your project directory:

npm install uploadcare-widget

Next, we will create a new component and use it in the layout. Go to the /src directory and create a subdir named components. Put the Uploader.js file there; it should include the same contents as our demo app.

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

import Uploader from './components/Uploader';

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

<p>
  <label htmlFor='file'>Your file:</label>{' '}
  <Uploader
    id='file'
    name='file'
    onChange={(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))
      }
    }}
    onUploadComplete={info => console.log('Upload completed:', info)} />
</p>

And the last thing to make it work is to set Public Key you discovered in the Before We Begin section. This code in the <head> section of your /public/index.html should do that:

<script>
  UPLOADCARE_PUBLIC_KEY = 'YOUR_PUBLIC_KEY'
</script>

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 docs.

For example, this is how you allow uploading files only from local storage and URLs via the data-tabs attribute:

<Uploader
  id='file'
  name='file'
  data-tabs='file url' />

Regarding the events, you can use onUploadComplete and onChange. These are well described in our API reference, and the usage examples are already included in the snippets above:

...
  onChange={(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))
    }
  }}
  onUploadComplete={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.