react

Uploading files in React with Progress bar using Express server

Jan 1st, 2021Abhishek EH4 Min Read

You might come across many websites where a file needs to be uploaded, like uploading a profile picture while creating a profile. If the user has a slow network or uploads a huge file, then they might need to wait for a longer period of time after clicking on the upload button. In such cases, it is good to show feedback to the user such as a progress bar, rather than having the user stare at the screen and wondering what is happening.

In this tutorial, we will see how can we achieve file upload in React and Express/Node backend with help of the multer node library.

Creating the React Project

First, create a folder named react-upload-file-progress-bar and create 2 directories client and server inside it. Navigate to the client directory and run the following command to create the client project:

1npx create-react-app .

Creating the upload form

We will be making use of react-bootstrap to style the page and display the progress bar. So let's install it inside the client project.

1yarn add bootstrap react-bootstrap

Import the bootstrap css in index.js:

index.js
1import React from "react"
2import ReactDOM from "react-dom"
3import App from "./App"
4import "bootstrap/dist/css/bootstrap.min.css"
5
6ReactDOM.render(
7 <React.StrictMode>
8 <App />
9 </React.StrictMode>,
10 document.getElementById("root")
11)

Now add the following code to App.js

App.js
1import { Container, Row, Col, Form, Button } from "react-bootstrap"
2
3function App() {
4 return (
5 <Container>
6 <Row>
7 <Col lg={{ span: 4, offset: 3 }}>
8 <Form
9 action="http://localhost:8081/upload_file"
10 method="post"
11 encType="multipart/form-data"
12 >
13 <Form.Group>
14 <Form.File
15 id="exampleFormControlFile1"
16 label="Select a File"
17 name="file"
18 />
19 </Form.Group>
20 <Form.Group>
21 <Button variant="info" type="submit">
22 Upload
23 </Button>
24 </Form.Group>
25 </Form>
26 </Col>
27 </Row>
28 </Container>
29 )
30}
31
32export default App

In the above code, we have created a form with file input and an upload button. We have styled the form using bootstrap components.

Now if you start the application and open http://localhost:3000 in your browser, you would see a page as shown below: Form

Binding the form with backend API

We will be making use of Axios to make API calls (upload file in our case). So let's go ahead and install it:

1yarn add axios

Inside the src directory, create a subfolder named utils and create a file named axios.js with the following contents:

axios.js
1import axios from "axios"
2const axiosInstance = axios.create({
3 baseURL: "http://localhost:8081/",
4})
5export default axiosInstance

This creates an instance of Axios and this instance can be reused wherever required and it helps in avoiding the need to mention the base URL everywhere.

localhost:8081 is the endpoint where we will be building the Node/Express server later in this tutorial.

Now let's write a handler to upload the file when the form is submitted:

1const [selectedFiles, setSelectedFiles] = useState()
2const [progress, setProgress] = useState()
3
4const submitHandler = e => {
5 e.preventDefault() //prevent the form from submitting
6 let formData = new FormData()
7
8 formData.append("file", selectedFiles[0])
9 axiosInstance.post("/upload_file", formData, {
10 headers: {
11 "Content-Type": "multipart/form-data",
12 },
13 onUploadProgress: data => {
14 //Set the progress value to show the progress bar
15 setProgress(Math.round((100 * data.loaded) / data.total))
16 },
17 })
18}

Here we are making use of 2 local states, one to hold the uploaded file details and another to hold the upload progress percentage. Also, make sure that you are adding the content-type header as multipart/form-data, so that it works similar to normal form submit and multer will be able to parse the file in the back end.

Axios also accepts optional onUploadProgress property, which is a callback with details about how much data is uploaded.

Now let's bind the submit handler and the input field:

App.js
1import { useState } from "react"
2import { Container, Row, Col, Form, Button, ProgressBar } from "react-bootstrap"
3import axiosInstance from "./utils/axios"
4
5function App() {
6 const [selectedFiles, setSelectedFiles] = useState([])
7 const [progress, setProgress] = useState()
8
9 const submitHandler = e => {
10 e.preventDefault() //prevent the form from submitting
11 let formData = new FormData()
12
13 formData.append("file", selectedFiles[0])
14 axiosInstance.post("/upload_file", formData, {
15 headers: {
16 "Content-Type": "multipart/form-data",
17 },
18 onUploadProgress: data => {
19 //Set the progress value to show the progress bar
20 setProgress(Math.round((100 * data.loaded) / data.total))
21 },
22 })
23 }
24 return (
25 <Container>
26 <Row>
27 <Col lg={{ span: 4, offset: 3 }}>
28 <Form
29 action="http://localhost:8081/upload_file"
30 method="post"
31 encType="multipart/form-data"
32 onSubmit={submitHandler}
33 >
34 <Form.Group>
35 <Form.File
36 id="exampleFormControlFile1"
37 label="Select a File"
38 name="file"
39 onChange={e => {
40 setSelectedFiles(e.target.files)
41 }}
42 />
43 </Form.Group>
44 <Form.Group>
45 <Button variant="info" type="submit">
46 Upload
47 </Button>
48 </Form.Group>
49 {progress && <ProgressBar now={progress} label={`${progress}%`} />}
50 </Form>
51 </Col>
52 </Row>
53 </Container>
54 )
55}
56
57export default App

Also, we are showing the progress bar whenever it has some value using the ProgressBar component from react-bootstrap.

Creating the backend Node Project

Now we have the client-side ready, let's build the server-side. Inside the server folder run the following command to create a node project.

1npm init -y

Update the package.json that is created with the following start script:

package.json
1{
2 "name": "server",
3 "version": "1.0.0",
4 "description": "",
5 "main": "index.js",
6 "scripts": {
7 "test": "echo \"Error: no test specified\" && exit 1",
8 "start": "node index.js"
9 },
10 "keywords": [],
11 "author": "",
12 "license": "ISC"
13}

Now we need to have the following modules added to our project:

  • express - Used to create a web framework with node.js
  • multer - A node.js middleware for handling multipart/form-data, which is primarily used for uploading files
  • cors - Enabling CORS policies for the client URL.

Run the following command to install the above packages in the server project:

1yarn add express multer cors

Now create a file named upload.js inside the server project with the following code:

upload.js
1const multer = require("multer")
2const storage = multer.diskStorage({
3 //Specify the destination directory where the file needs to be saved
4 destination: function (req, file, cb) {
5 cb(null, "./uploads")
6 },
7 //Specify the name of the file. The date is prefixed to avoid overwriting of files.
8 filename: function (req, file, cb) {
9 cb(null, Date.now() + "_" + file.originalname)
10 },
11})
12
13const upload = multer({
14 storage: storage,
15})
16
17module.exports = upload

Here we are creating the multer instance, by specifying the destination and the file name in which the uploaded file needs to be saved.

Now create a file named index.js with the following code:

index.js
1const express = require("express")
2const upload = require("./upload")
3const multer = require("multer")
4const cors = require("cors")
5
6const app = express()
7
8//Add the client URL to the CORS policy
9const whitelist = ["http://localhost:3000"]
10const corsOptions = {
11 origin: function (origin, callback) {
12 if (!origin || whitelist.indexOf(origin) !== -1) {
13 callback(null, true)
14 } else {
15 callback(new Error("Not allowed by CORS"))
16 }
17 },
18 credentials: true,
19}
20app.use(cors(corsOptions))
21
22app.post("/upload_file", upload.single("file"), function (req, res) {
23 if (!req.file) {
24 //If the file is not uploaded, then throw custom error with message: FILE_MISSING
25 throw Error("FILE_MISSING")
26 } else {
27 //If the file is uploaded, then send a success response.
28 res.send({ status: "success" })
29 }
30})
31
32//Express Error Handling
33app.use(function (err, req, res, next) {
34 // Check if the error is thrown from multer
35 if (err instanceof multer.MulterError) {
36 res.statusCode = 400
37 res.send({ code: err.code })
38 } else if (err) {
39 // If it is not multer error then check if it is our custom error for FILE_MISSING
40 if (err.message === "FILE_MISSING") {
41 res.statusCode = 400
42 res.send({ code: "FILE_MISSING" })
43 } else {
44 //For any other errors set code as GENERIC_ERROR
45 res.statusCode = 500
46 res.send({ code: "GENERIC_ERROR" })
47 }
48 }
49})
50
51//Start the server in port 8081
52const server = app.listen(8081, function () {
53 const port = server.address().port
54
55 console.log("App started at http://localhost:%s", port)
56})

In the above code,

  • We have created a POST route at /upload_file and call upload function exported from upload.js. The name file passed inside the upload.single() function should match with that of FormData in the axios call written before.
  • We have added the CORS policy for out client URL. This code snippet can be reused in any express project which requires to handle CORS.
  • Multer will add the details of the file uploaded to req.file. So if req.file does not have any data, that means the file is not uploaded. Multer by default does not throw any error if the file is missing. So we are throwing an express error with a message FILE_MISSING
  • We have an error handler for express which looks for both Multer errors and express errors and we pass the appropriate error code in the response.

Before running the application, let's create the directory uploads where the uploaded files will be saved.

Now if you run the application, using the command npm start in 2 separate terminals, one inside the client and another inside the server directory, you will see the progress bar in action:

Upload Animation

I have used a huge file (200MB) to upload, since uploading to localhost is pretty fast and we will not be able to see the progress bar correctly. You can make use of the network throttling feature of the browser as well.

If you check the uploads directory now, you should be able to see the file there:

Uploaded File

Error handling

Now let's show appropriate error messages when the upload has failed.

When the file is not uploaded

If the user has failed to select a file before clicking upload, we need to inform the user. For that, let's update App.js with a catch chain for the axios call:

App.js
1import { useState } from "react"
2import {
3 Container,
4 Row,
5 Col,
6 Form,
7 Button,
8 ProgressBar,
9 Alert,
10} from "react-bootstrap"
11import axiosInstance from "./utils/axios"
12
13function App() {
14 const [selectedFiles, setSelectedFiles] = useState([])
15 const [progress, setProgress] = useState()
16 const [error, setError] = useState()
17
18 const submitHandler = e => {
19 e.preventDefault() //prevent the form from submitting
20 let formData = new FormData()
21
22 formData.append("file", selectedFiles[0])
23 //Clear the error message
24 setError("")
25 axiosInstance
26 .post("/upload_file", formData, {
27 headers: {
28 "Content-Type": "multipart/form-data",
29 },
30 onUploadProgress: data => {
31 //Set the progress value to show the progress bar
32 setProgress(Math.round((100 * data.loaded) / data.total))
33 },
34 })
35 .catch(error => {
36 const { code } = error?.response?.data
37 switch (code) {
38 case "FILE_MISSING":
39 setError("Please select a file before uploading!")
40 break
41 default:
42 setError("Sorry! Something went wrong. Please try again later")
43 break
44 }
45 })
46 }
47 return (
48 <Container>
49 <Row>
50 <Col lg={{ span: 4, offset: 3 }}>
51 <Form
52 action="http://localhost:8081/upload_file"
53 method="post"
54 encType="multipart/form-data"
55 onSubmit={submitHandler}
56 >
57 <Form.Group>
58 <Form.File
59 id="exampleFormControlFile1"
60 label="Select a File"
61 name="file"
62 onChange={e => {
63 setSelectedFiles(e.target.files)
64 }}
65 />
66 </Form.Group>
67 <Form.Group>
68 <Button variant="info" type="submit">
69 Upload
70 </Button>
71 </Form.Group>
72 {error && <Alert variant="danger">{error}</Alert>}
73 {!error && progress && (
74 <ProgressBar now={progress} label={`${progress}%`} />
75 )}
76 </Form>
77 </Col>
78 </Row>
79 </Container>
80 )
81}
82
83export default App

In the above code, whenever an error occurs we are setting the error message to the error state and displaying using the Alert component

File Missing Error

Preventing huge file uploads

When we need to restrict the size of the file uploaded, we can add that configuration in upload.js in the server project:

upload.js
1const multer = require("multer")
2const storage = multer.diskStorage({
3 //Specify the destination directory where the file needs to be saved
4 destination: function (req, file, cb) {
5 cb(null, "./uploads")
6 },
7 //Specify the name of the file. The date is prefixed to avoid overwriting of files.
8 filename: function (req, file, cb) {
9 cb(null, Date.now() + "_" + file.originalname)
10 },
11})
12
13const upload = multer({
14 storage: storage,
15 limits: {
16 fileSize: 1024 * 1024,
17 },
18})
19
20module.exports = upload

Now let's update our switch case in App.js in client side:

1switch (code) {
2 case "FILE_MISSING":
3 setError("Please select a file before uploading!")
4 break
5 case "LIMIT_FILE_SIZE":
6 setError("File size is too large. Please upload files below 1MB!")
7 break
8
9 default:
10 setError("Sorry! Something went wrong. Please try again later")
11 break
12}

Now if you try to upload a file larger than 1 MB, you should see the error message:

Large File

Restricting file types

When we need to allow only certain type of files, we can add a fileFilter to the multer configuration as shown below:

1const upload = multer({
2 storage: storage,
3 limits: {
4 fileSize: 1024 * 1024,
5 },
6 fileFilter: (req, file, cb) => {
7 if (
8 file.mimetype == "image/png" ||
9 file.mimetype == "image/jpg" ||
10 file.mimetype == "image/jpeg"
11 ) {
12 cb(null, true)
13 } else {
14 cb(null, false)
15 return cb(new Error("INVALID_TYPE"))
16 }
17 },
18})

Also, let's tweak the error handler in index.js to accommodate the new error code:

index.js
1// ...
2//Express Error Handling
3app.use(function (err, req, res, next) {
4 // Check if the error is thrown from multer
5 if (err instanceof multer.MulterError) {
6 res.statusCode = 400
7 res.send({ code: err.code })
8 } else if (err) {
9 // If it is not multer error then check if it is our custom error for FILE_MISSING & INVALID_TYPE
10 if (err.message === "FILE_MISSING" || err.message === "INVALID_TYPE") {
11 res.statusCode = 400
12 res.send({ code: err.message })
13 } else {
14 //For any other errors set code as GENERIC_ERROR
15 res.statusCode = 500
16 res.send({ code: "GENERIC_ERROR" })
17 }
18 }
19})
20
21// ...

Finally, add a new case to the switch condition in App.js:

1switch (code) {
2 case "FILE_MISSING":
3 setError("Please select a file before uploading!")
4 break
5 case "LIMIT_FILE_SIZE":
6 setError("File size is too large. Please upload files below 1MB!")
7 break
8 case "INVALID_TYPE":
9 setError(
10 "This file type is not supported! Only .png, .jpg and .jpeg files are allowed"
11 )
12 break
13
14 default:
15 setError("Sorry! Something went wrong. Please try again later")
16 break
17}

Now upload a file that is not an image and see if it shows the error:

Invalid Type

Source code

You can view the complete source code here.

Leave a Comment

Comments

tonihooMarch 10, 2021 at 8:28 AM
Excellent, thanks!
AndiMarch 27, 2021 at 1:49 PM
Some mistakes in the code (encType, not enctype; and you cant destruct an oject that doesn't exist), but still a nice example. Thanks.
Abhishek EHMarch 29, 2021 at 5:03 AM
Corrected the typo! In which case are you seeing object cannot be destructed?
AnouarApril 15, 2021 at 3:51 PM
Good work, thanks!
© 2021 CodingDeft.Com