Handling file upload in reactjs

filuploadinreactjs
filuploadinreactjs

In previous tutorial we covered basic user authentication.In many real world scenarios we require various types of files to be uploaded from user. In today’s tutorial we are going to cover basic file upload using reactjs.

So let’s get started:

We are going to make changes in the uploadScreen component that we created in the login tutorial here.We are going to need react-dropzone and material-ui npm modules for handling file upload and designing app ui.Install them by running the following command in your project:

Now let’s get back to editing uploadScreen.js:

This will create basic dropzone for selecting files from directories.Next we create onDrop handler to temporarily save selected files:

This will allow users to select multiple files before uploading them. Next we will create a filesPreview div where all of user selected files will be displayed until the user is ready to upload files:

Here we have set max file selection count to 10 which can be adjusted based on your needs.On every file selection onDrop function takes previously selected files as input,appends newly selected file and updates filePreview div to display files.

Next we are going to make UI a little better and add an upload button to send files to server once user has selected all the files:

As you can see we need to implement handleClick in the onClick handler in which we will upload files to server.We are going to use superagent module to upload files to server which can be installed by running the following command:

The handleClick function is implemented as follows:

In the handleClick function we first check if user has selected any files,then we store fileToBeSent in a local variable fileArray and attach each file with name to req variable responsible for sending request to backend. I have created backend apis in nodejs which I will be covering in next tutorial.For now just assume that there is a fileupload route running on port 4000 on localhost which will accept files from frontend in a post request.

Here is a screenshot of the final app screen:

fileuploadscreenshot
fileuploadscreenshot

The user is greeted with alert that file have finished uploading once we receive a response from backend apis. That finishes off our today’s tutorial. Check out some bonus tips and you can see the complete code at end of bonus tips.

Bonus Tips:

1)We can keep the submit button disabled when user clicks it until we finish file uploading to server in order to prevent multiple upload requests to server.You can also add loading spinner or uploading message until uploading is finished.

2)Material UI supports in app drawer which can be modified further to add more features like upload history  and user management.

There are many additions that can be done to the code which I have covered in the bonus tips sections and covered some of them in complete code uploaded on github gist here.

In case you need to develop backend apis in nodejs for handling filee upload in the backend then you can find the tutorial here.

Connect Deeper:

Follow our facebook page to get notified about next tutorial in the series in which I will cover retrieving files uploaded in the past by the user here: Technoetics

Share post-
About Saurabh Mhatre 70 Articles
Currently working in web and hybrid application development