Upload and handle file from ReactJs and NodeJs using FormData.

Introduction

You may not have ever handled file uploads in React or any other technologies, but there is a high possibility you’ll encounter the need for it, whether tor update profile photos of users, CSV files, or PDFs, to mention but a few. In this guide, you’ll learn how to upload files in your React apps(Frontend) to NodeJs(Backend).

Set Up an App

To get started, run the following command in your terminal or visit https://react.new to get a fully configured React development environment via https://codesandbox.io.

npx create-react-app <YOUR_APP_NAME>

<YOUR_APP_NAME> refers to your preferred app name.

Next, create a simple component that has a file input with an upload button.

import { useState } from "react";
import "./../App.css";
const FileUpload = () => {
 const [selectedFile, setSelectedFile] = useState();
 const [isFilePicked, setIsFilePicked] = useState(false);
 const changeHandler = (event) => {
  setSelectedFile(event.target.files[0]);
  event.target.files[0] && setIsFilePicked(true);
 };
 const handleSubmission = () => {
  // HANDLING FILE AS SENDING FILE INTO BACKEND
  if (!isFilePicked) return;
  const formData = new FormData();
  formData.append("File", selectedFile);
   // ALSO ADD RANDOM VALUE IF YOU WANT LIKE STRING , OBJECT OR      ARRAY
  formData.append("carDetail", {
   car: "honda",
   engine: "1498 cc",
   fuel_Type: "Petrol & Diesel",
 });
// API CALL
 fetch("http://localhost:3001/", {
  method: "POST",
  body: formData,
 })
 .then((response) => response.json())
 .then((result) => {
  console.log("Success:", result);
 })
 .catch((error) => {
   console.error("Error:", error);
  });
 };
return (
 <div className="App">
 <input type="file" name="file" onChange={changeHandler} />
  <div>
   <button onClick={handleSubmission}>Submit</button>
  </div>
 {isFilePicked ? (
 <div>
  <p>Filename: {selectedFile.name}</p>
  <p>Filetype: {selectedFile.type}</p>
  <p>Size in bytes: {selectedFile.size}</p>
  <p>
   lastModifiedDate:{" "}
   {selectedFile.lastModifiedDate.toLocaleDateString()}
  </p>
 </div>
 ) : (
 <div>
  <p>Select a file</p>
  </div>
 )}
 </div>
 );
};
export default FileUpload;

Network Response Will be like:

1. File will be in binary.

Next, create a Backend with mongodb which will recieve FormData from frontend and process it

var express = require(“express”);
const upload = require(“express-fileupload”);
var cors = require(“cors”);
var app = express();
//MIDDLEWARES
app.use(upload());
app.use(cors());
//ROUTE DEFINE
app.post(“/”, async function (req, res) {
 try {
  // IN REQ.FILES.”YOUR_FILE_NAME” WILL BE PRESENT
  const file = req.files;
  const bodyData = req.body;
  // console.log(file);
  // console.log(bodyData);
  res.status(200).send({
  message: “FILE RECEIVED!”,
 });
 } catch (error) {
 res.send(“ERROR”);
 }
});
var PORT = 3001;
app.listen(PORT, function () {
 console.log(“Server is running on PORT:”, PORT);
});

Conclusion

For refernce i have added my github repo so you can run it and also look into code deeply.

https://github.com/Saksham-coder/React_file_upload

Thank You.