Future-Proofing Your React File Uploader

Web developers who want to build an application using ReactJS or write codes for building a website must consider the react file upload to ensure that users can upload any file they need [1].

Uploading a file in ReactJS is vital for the developer while creating his application. The truth is that there are several ways with which you can create a ReactJS upload file [2], but if you want to create a ReactJS file upload that is strong and won’t be archaic, then this article will show you some of the tricks you need to include in the creation of react upload file.

Before moving into the guide for future-proofing your React file upload, you must remember some basics about ReactJS.

Table of Contents

• What Is ReactJS? 
• What Are The Components Of ReactJS?
• How To Future-Proof Your React File Uploader?
• What Are The Steps To Follow When Using React-Uploady?
  • Step 1;
  • Step 2;
  • Step 3;
  • Step 4;
  • Step 5;
• How Can You Utilize FormData To Create Multiple Files Upload For React Upload File Feature?
• Ready to make your React file upload feature not obsolete?

What Is ReactJS?

ReactJS is a JavaScript library that developers use in web programming to create interactive components on websites [3].

Developers use ReactJS to build user interfaces on websites, and they have access to tools such as;

• The choice to use JavaScript to exploit their DOM
• A virtual DOM to augment their websites’ effectiveness
• Snippets and components of React Code.

What Are The Components Of ReactJS?

Any developer who uses ReactJS to build applications or websites will come across components in ReactJS because it is one of the fundamental build-ups.

React JS comprises two components, and they are;

• Functional Components

Developers create Functional Components through JavaScript Functions, and the code for it is as follows;

const Democomponent=()=>

{

return <h1>Welcome Message!</h1>;

}

• Class Components

They are not as simple as the functional components and are complicated. While the functional components operate solely without any components, Class components work with every other component. The code for it is as follows;

class Democomponent extends

React.Component

{

render(){

return <h1>Welcome Message!</h1>;

}

}

How To Future-Proof Your React File Uploader?

It is very reasonable for you to ensure that your React file upload stays in shape and does not become old. If you have been wondering how to go about this, then the following pieces of information will settle your curiosity here.

Adding a new element such as React-Uploady will upgrade the features of your upload file react. React-Uploady is a light library that allows developers to create a user interface and file uploader features with little lines of code.

React-Uploady is a library that contains modernized components of upload file react applications. It includes every element involved in file uploads, such as the buttons, progress, and upgrades.

Before using this library, make sure you have Node.js and Node Package Manager installed on your device.

What Are The Steps To Follow When Using React-Uploady?

Below are the following steps to follow when adding using React-Upload;

Step 1;

• Install the React application, create-react-app

npm install -g create-react-app

• Create a new project using the create-react-app and include the project’s name, whichever you prefer; in this case, we will use filestack.

create-react-app filestack

• Go to your project guide and begin your developing server by writing the following code;

cd filestack && npm start

After you must have done the above processes, install the following packages for React-Uploady, but before you do that, here are some things to note about them;

• @rpldy/upload-button; Upload button component
• @rpldy/uploady; main component
• rc-progress ; File Upload progress component

Install the following packages into the react app by writing the following code;

npm i @rpldy/upload-button

@rpldy/uploady rc-progress

Step 2;

Then create a Header component for the app by opening a new file, Header.JS, inside your src file. After that, build a functional component by writing the following codes;

import React from "react";

export default function App() {

return (

<div>

<h1>File upload with Filestack</h1>

</div>

);

}

You successfully created a functional component with an h1 tag with the inscription ‘File upload with Filestack.’

Then, render your Header feature inside the App feature by writing the following codes;

import React from "react";

export default function App() {

return (

<div className="App">

<Header />

</div>

);

}

Step 3;

The next step is to create your file upload feature using the App.js component. You need to import the packages you installed, use the upload-button package to render your upload button, and add the Upload component to your app to carry this out. Do this by writing the following codes;

import React, { useState } from "react";

import Header from "./Header";

import "./App.css";

import { Line } from "rc-progress";

import Uploady, {

useItemProgressListener } from

"@rpldy/uploady";

import UploadButton from

"@rpldy/upload-button";

import { createMockSender } from

"@rpldy/sender";

After doing this, write the following codes to create a state for your file upload progress before making it a feature in your app;

const UploadProgress = () => {

const [progress, setProgess] =

useState(0);

const progressData =

useItemProgressListener();

if (progressData &&

progressData.completed > progress) {

setProgess(() =>

progressData.completed);

}

Step 4;

Then add the line and style it to complete the file upload progress feature with the following codes;

return (

     progressData && (

       <Line

          style={{ height: "10px",

marginTop: "20px" }}

         strokeWidth={2}

         strokeColor={progress === 100 ?

"#00a626" : "#2db7f5"}

        percent={progress}

      />

     )

   );

 };

After that, render the whole components on the app with the following codes;

export default function App() {

  return (

    <Uploady

     destination={{ url:

"http://server.com" }}

    enhancer={mockEnhancer}

   >

    <div className="App">

     <Header />

     <UploadButton />

     <UploadProgress />

    </div>

   </Uploady>

  );

 }

Add enhancer to make the React file upload feature more upgraded;

const mockEnhancer = (uploader) => {

const mockSender = createMockSender({

delay: 1500 });

uploader.update({ send: mockSender.send });

return uploader;

};

Step 5;

To complete the process, add the styles with the following codes;

.App {

font-family: arial, sans-serif;

text-align: center;

margin-top: 20px;

}

body {

background: #5c6e91;

color: #eeeded;

}

button {

height: 60px;

width: 200px;

font-size: 22px;

background-color: #8f384d;

color: #eeeded;

text-transform: uppercase;

cursor: pointer;

}

The codes will result in your React file upload feature is ready for an upgrade.

How Can You Utilize FormData To Create Multiple Files Upload For React Upload File Feature?

Another way to make your React file upload feature strong is by ensuring that the user can upload multiple files with it. It is possible with a new object called FormData.

Write the following codes through the use of formData.Append

function uploadFile(files, user) {

var formData = new FormData();

files.map((file, index) => {

formData.append(`file${index}`, file);

});

formData.append('user', user);

fetch('https://path/to/api', {

// content-type header should not be specified!

method: 'POST',

body: formData,

})

.then(response => response.json())

.then(success => {

// Do something with the successful response

})

.catch(error => console.log(error)

);

}

The codes will result in the multiple files option for React file upload feature. Want to know more about a secure file upload? Read our blog post about it.

Ready to make your React file upload feature not obsolete?

Have you learned a few things? Do you want to start your ReactJs file upload build? You can visit Filestack to sign up and get started.

References

1. https://www.laravelcode.com/post/how-to-upload-files-in-reactjs-with-example
2. https://betterprogramming.pub/keep-your-users-constantly-occupied-ff8ba0b0e673
3. https://skillcrush.com/blog/what-is-react-js/#what

Also Published here