File uploading has become one of the fastest growing features of modern web applications and websites. Almost every website on the internet requires a user to upload either a photo for use as a profile picture or a resume for a job application portal. Some even ask for documents that will be required for KYC verification for use in organisations like banks and insurance companies.

We can integrate this file uploading feature in two major ways: either by building the file uploader from scratch or by using already made libraries, we can integrate this file uploading feature in two major ways. Each of these methods would depend on the needs of the client.

Whenever you consider developing software from scratch, you need to estimate the time investment as well as procedure and running costs. Thus, we need to keep in mind all those essential features of file uploading—storage, UI & UX, security, and compliance.  Most of the time, computing the cost of developing these features from scratch will show you that it’s not worth it.

One undeniable logical motivation to go this way is the restricted nature of some systems (like banks, defence, and government facilities). Usually, these systems can’t outsource file uploading to a third party.

In this article, we are going to integrate an advanced React file upload solution into our React.js app. It includes a drag-and-drop image uploader and a direct link image uploader, among many other features.

But before we get to that, let’s clarify the specific functions of file uploading.

According to the upload target, there are 3 kinds of tasks:

• Upload a single file
• Upload multiple files at the same time
• Upload the entire folder

Similarly, there are 3 user action-based tasks:

• Choose a file to be uploaded
• Drag the file to the box, then upload
• Upload from clipboard

From a performance perspective, we may need to:

• Upload after compressing a file
• Divide a large file into blocks then upload

Additionally, sometimes we may not upload files directly through the client browser but through the server to another server.

Creating a React app

The first step is to create a simple React app, which you can do just by running the command below in your terminal.

This might take a while depending on your computer specs. Once it is done, go to the newly created directory (in our case, filestack-uploader) and run npm start or yarn start. This command will start the development server for your React app. Now open this directory (in our case, filestack-uploader) in any code editor.

Cleaning up the project

Once you open the directory in your code editor, you will see that there are many files and folders, but for this project, we don’t need most of them. Let’s go ahead and delete the files that we don’t need. In the src folder, delete all files except App.js, Index.js, and App.css.

Once you remove them, delete everything inside App.js and paste the below code instead.

import React from 'react'
export default function App() {
return (
  <div>
    <h1>Filestack File Upload</h1>
  </div>
);
}

Also, delete everything inside Index.js and paste the below code instead. 

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(
<React.StrictMode>
  <App />
</React.StrictMode>,
document.getElementById("root")
);

Lastly,  delete everything inside App.css.

Getting an API key

To quickly get an API key, sign up here and navigate to your dashboard where you will find your API keys. Click on “API Keys” from the sidebar to copy them.

Installing and Adding Filestack-react

Now It is time to install our React file upload solution in the React application. To do that, simply run

npm install filestack-react

Afterwards, insert the following into your app.js file:

import React from "react";
import { PickerOverlay } from "filestack-react";

export default function App() {
const YOUR_API_KEY = 'AT1H6mUwcS8O*******'
return (
  <div>
    <h1>Filestack File Upload</h1>
    <PickerOverlay
      apikey={YOUR_API_KEY}
      onSuccess={(res) => console.log(res)}
      onUploadDone={(res) => console.log(res)}
    />
  </div>
);
}

Now, paste your API key in the “YOUR_API_KEY” variable in the above code. Open your browser and go to localhost:3000. And now you have Filestack integrated into your app. If anyone uploads a file using the Filestack widget, you can view those files in your dashboard.

Conclusion

And there you have it. In a few simple steps, you now have a feature-rich, fast, and extensible file upload solution for your React app. Furthermore, you should now be better equipped in terms of understanding file upload requirements and integrating a file upload solution into your app. 

Also Read: Why REACT Is The Most Popular Front End Library?