Upload files in Node.JS and React.JS
Uploading files in Single Page Application(SPA) sometimes becomes challenging. Today we will be implementing how to upload files in the Node.JS server from React.JS.
It doesn’t matter what framework you are using in the client-side, as far it is JS framework Code Implementation will be the same with some basic knowledge. I hope you have Node.JS’s and React.JS's basic development knowledge.
I have already written the same on .NET core web API and React. Please find the following link for that article.
Create Project
To create a Node.JS and React project and install the following modules.
In Node.JS
npm i express cors express-fileupload
npm i -D nodemon
In React
npm i axios
We will be using Visual Studio Code for both React and Node.JS
Code
Let’s setup server API for uploading files from React. Place the below code in your server.js file.
We are importing all required modules and initialize the express server.
Then we are setting up our middleware.
- cors for allowing access to our server from another one.
- file upload for uploading files in the server
- express.static(‘files) is setting the public server’s files folder for storing images and enable them to show in front-end.
Set the app to listen on port 3000
Now we are creating a post route “/upload” for uploading files into the file system.
- __dirname returns the root path of our project. We are appending with “/files/” where files will get stored
- We are extracting our files and filename from req.files.file where .file is the name in your form body in React
- Now we are storing the file in the file system using “express-fileupload” in-built function mv to move the file elsewhere in the server.
- On the basis of the result, we are sending back a response to the front-end.
Now let’s move to React. Place the following code in App.js.
A brief overview of FormData here,
When we make an Ajax request and if that Request contains files, the FormData object favors developers a lot. It’s the object to represent HTML form data.
If we use HtmlForm element the for file upload, we do mention enctype=”multipart/form-data” in form tag which explicitly specifies it will contain data and files.
The special features of FormData is that network methods can accept FormData object as the body and it’s encoded, sent out with Content-Type: multipart/form-data which should be while uploading file and data together in ajax request or HtmlForm element.
And now do npm start and go to http://localhost:3000, select file, and upload file. You will find that file inside the files folder in the server.
If you are having any questions, leave a comment.
Check out the Github repository for source code.
Sankhadip Samanta
Full Stack Developer, Code Quotient | Tech Writer and Social Media Handler at BlogMarch
