In this tutorial, we are going to learn about file uploading in React with using Express as a backend.

Creating Express Backend server

First, we are creating a post API using NodeJS & express, which helps us to upload the files like (images, pdf, etc) to the backend server.

Setup the backend project

Let’s setup the node.js backend project by running the following commands one by one.

mkdir fileupload cd fileupload npm init -y

Installing packages

Now, we need to install four packages which are express , express-fileupload , cors and nodemon .

Run the below command to install packages.

npm i express express-fileupload cors nodemon

Now open the fileupload folder in your favorite code editor and create a new file called server.js .

Add the following code to the server.js file.

server.js

const express = require ( 'express' ) ; const fileUpload = require ( 'express-fileupload' ) ; const cors = require ( 'cors' ) const app = express ( ) ; app . use ( express . static ( 'public' ) ) ; app . use ( cors ( ) ) ; app . use ( fileUpload ( ) ) ; app . post ( '/upload' , ( req , res ) => { if ( ! req . files ) { return res . status ( 500 ) . send ( { msg : "file is not found" } ) } const myFile = req . files . file ; myFile . mv ( ` ${ __dirname } /public/ ${ myFile . name } ` , function ( err ) { if ( err ) { console . log ( err ) return res . status ( 500 ) . send ( { msg : "Error occured" } ) ; } return res . send ( { name : myFile . name , path : ` / ${ myFile . name } ` } ) ; } ) ; } ) app . listen ( 4500 , ( ) => { console . log ( 'server is running at port 4500' ) ; } )

In the above code, we first imported three packages which are express , express-fileupload and cors , next we created express application by invoking express() function.

Our post API route is /upload .

We are placing files inside the public folder so that we need to create a public folder inside our backend project.

Adding scripts

To run and restarting the server we are using the nodemon , open your package.json file and add the following code to scripts object.

"server" : "nodemon server.js"

Now start the backend server by running npm start server command in your terminal.

Creating React App

Let’s create the new react app by running the following command.

npx create-react-app react-fileupload

Now change your current working directory by running the below command.

cd react-fileupload

Installing Axios library

We also need to install the axios http client library which is used to make the http requests.

npm i axios

Creating file upload component

Open the react-fileupload folder in your favorite code editor and create a new file called fileupload.js inside the src folder.

Now add the following code.

fileupload.js

import React , { useRef , useState } from 'react' ; import axios from 'axios' ; function FileUpload ( ) { const [ file , setFile ] = useState ( '' ) ; const [ data , getFile ] = useState ( { name : "" , path : "" } ) ; const [ progress , setProgess ] = useState ( 0 ) ; const el = useRef ( ) ; const handleChange = ( e ) => { setProgess ( 0 ) const file = e . target . files [ 0 ] ; console . log ( file ) ; setFile ( file ) ; } const uploadFile = ( ) => { const formData = new FormData ( ) ; formData . append ( 'file' , file ) ; axios . post ( 'http://localhost:4500/upload' , formData , { onUploadProgress : ( ProgressEvent ) => { let progress = Math . round ( ProgressEvent . loaded / ProgressEvent . total * 100 ) + '%' ; setProgess ( progress ) ; } } ) . then ( res => { console . log ( res ) ; getFile ( { name : res . data . name , path : 'http://localhost:4500' + res . data . path } ) } ) . catch ( err => console . log ( err ) ) } return ( < div > < div className = "file-upload" > < input type = "file" ref = { el } onChange = { handleChange } / > < div className = "progessBar" style = { { width : progress } } > { progress } < / div > < button onClick = { uploadFile } className = "upbutton" > Upload < / button > < hr / > { } { data . path && < img src = { data . path } alt = { data . name } / > } < / div > < / div > ) ; } export default FileUpload ;

In the above code, we have used react hooks to manage the state and we have two functions which are handleChange and uploadFile .

The handleChange function is invoked once a user selected the file.

The uploadFile() function is used to upload the file to our /upload api.

There is also a progress bar, which shows the how much amount of file is uploaded to the server and also we are displaying the image once a response comes from the server.

Adding css styles

Add the following styles to your App.css file.

.App { margin : 2rem auto ; max-width : 800px ; } img { width : 500px ; height : 500px ; object-fit : contain ; } .progessBar { height : 1rem ; width : 0% ; background-color : rgb ( 68 , 212 , 231 ) ; color : white ; padding : 2px } .file-upload { box-shadow : 2px 2px 2px 2px #ccc ; padding : 2rem ; display : flex ; flex-direction : column ; justify-content : space-between ; font-size : 1rem ; } input , div , button { margin-top : 2rem ; } .upbutton { width : 5rem ; padding : .5rem ; background-color : #2767e9 ; color : aliceblue ; font-size : 1rem ; cursor : pointer ; }

Now, import the FileUpload component inside the App.js file.

App.js

import React from 'react' ; import FileUpload from './fileupload' ; import './App.css' ; function App ( ) { return ( < div className = "App" > < FileUpload / > < / div > ) ; } export default App ;

Start the react app by running npm start .

Testing react file upload component

Let’s test our FileUpload component by uploading a sample image file.

Note: Make sure that your backend server is on.

Open your browser and navigate to localhost:3000 .

Code repositories