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.