File upload using react js + node js. In this tutorial, i am going to show you how to upload files in react js app with node js + express js.

React file upload tutorial; i will use node js + express framework as backend and create rest ful api to upload files into server with react js app.

React js + Node js + Express js File Upload Tutorial

• Create React Frontend App
  • Step 1 - Create React App
  • Step 2 - Install Axios and Bootstrap 4
  • Step 3 - Create File Upload Form Component
  • Step 4 - Add Component in App.js
• Create Node js + Express App
  • Step 1 - Create Node JS App
  • Step 2 - Install Required Node Modules
  • Step 3 - Create Server.js
  • Step 4 - Start Node JS App

Create React Frontend App

Step 1 - Create React App

Open your terminal and run the following command on your terminal to create a new react app:

npx create-react-app my-react-app

To run the React app, execute the following command on your terminal:

npm start

Check out your React app on this URL: localhost:3000

Step 2 - Install Axios and Bootstrap 4

Run the following command to install axios and boostrap 4 library into your react app:

npm install bootstrap --save
npm install axios --save

Import bootstrap.min.css file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
function App() {
  return (
    <div>
      <h2>react node js file upload example</h2>
    </div>
  );
}
export default App;

Step 3 - Create File Upload Form Component

Create file upload form component named FileUpload.js. And add the following code into it:

import React from 'react'
import axios from 'axios';
class FileUpload extends React.Component{
      const [file, setFile] = useState();
      const [fileName, setFileName] = useState("");
      const saveFile = (e) => {
        setFile(e.target.files[0]);
        setFileName(e.target.files[0].name);
      };
      const uploadFile = async (e) => {
        const formData = new FormData();
        formData.append("file", file);
        formData.append("fileName", fileName);
        try {
          const res = await axios.post(
            "http://localhost:3000/upload",
            formData
          );
          console.log(res);
        } catch (ex) {
          console.log(ex);
        }
      };
    render(){
      return (
        <div className="App">
          <input type="file" onChange={saveFile} />
          <button onClick={uploadFile}>Upload</button>
        </div>
      );
    }
}
export default FileUpload;

Step 4 - Add Component in App.js

Add FileUpload.js file in src/App.js file:

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

Create Node JS + Express App

Step 1 - Create Node JS App

Open your terminal and execute the following command to create node js app:

mkdir my-app
cd my-app
npm init

Step 2 - Install Required Node Modules

Run the following commands to install npm packages which will help us to create REST APIs for your react file upload app:

npm install express cors express-fileupload
npm install body-parser --save

Step 3 - Create Server.js File

Create server.js file into your node js app root directory; and add the following code into it:

const express = require("express");
const fileupload = require("express-fileupload");
const cors = require("cors");
const app = express();
app.use(cors());
app.use(fileupload());
app.use(express.static("files"));
app.post("/upload", (req, res) => {
  const newpath = __dirname + "/files/";
  const file = req.files.file;
  const filename = file.name;
  file.mv(`${newpath}${filename}`, (err) => {
    if (err) {
      res.status(500).send({ message: "File upload failed", code: 200 });
    }
    res.status(200).send({ message: "File Uploaded", code: 200 });
  });
});
app.listen(3000, () => {
  console.log("Server running successfully on 3000");
});

Step 4 - Start Node JS App

Start the server with the following command and then you can test the form:

npm start
OR
nodemon server.js

Conclusion

React js + node express js file upload example tutorial; you have learned how to upload file in react js app using node js express rest api.

Recommended React JS + Node Express JS Tutorials