How to Upload PDF Files in React js Node js Mongo Db using Multer

If you’re looking to upload PDF files in a React js application with a Node js backend and Mongo Db database, then you’ll want to make use of the Multer library. Multer is a middleware for handling multipart/form-data, which is typically used for file uploads.

To get started, you’ll need to have a basic understanding of React js for the frontend, Node js for the backend, and Mongo Db for the database. Additionally, you’ll need to install the Multer library in your Node js project using npm. Once you have all of that set up, you can begin the process of uploading PDF files.

Step 1: Set up the Backend

In your Node js backend, you’ll need to set up a route for handling file uploads. This route will make use of the Multer middleware to process the incoming file. Here’s an example of how you might set up the route:

“`javascript
const express = require(‘express’);
const multer = require(‘multer’);
const upload = multer({ dest: ‘uploads/’ });

const app = express();

app.post(‘/upload’, upload.single(‘pdfFile’), (req, res) => {
// handle the uploaded file
});

app.listen(3000, () => {
console.log(‘Server is running on port 3000’);
});
“`

In the above example, the route /upload is configured to accept a single file with the name pdfFile. When a file is uploaded to this route, the file will be processed by Multer and stored in the uploads/ directory.

Step 2: Create the Frontend Component

In your React js frontend, you’ll need to create a component for handling file uploads. This component will make use of the fetch API to send the file to the backend route you set up in step 1. Here’s an example of how you might create the component:

“`javascript
import React, { useState } from ‘react’;

const FileUpload = () => {
const [file, setFile] = useState(null);

const handleFileChange = (e) => {
setFile(e.target.files[0]);
};

const handleFileUpload = () => {
const formData = new FormData();
formData.append(‘pdfFile’, file);

fetch(‘http://localhost:3000/upload’, {
method: ‘POST’,
body: formData
})
.then(response => {
// handle the response
});
};

return (

);
};

export default FileUpload;
“`

In the above example, the FileUpload component allows the user to select a file using an input element and then upload the file by clicking a button. When the button is clicked, the file is sent to the /upload route on the backend using the fetch API. The file is added to a FormData object before being sent.

Step 3: Save the File in Mongo Db

Once the file has been uploaded to the backend using Multer, you can then save the file in your Mongo Db database. You may want to add some additional logic to the /upload route in order to handle saving the file in the database.

With these steps completed, you will have successfully set up a system for uploading PDF files in a React js application with a Node js backend and Mongo Db database using Multer. This process allows for easy file uploads and storage, making it a great solution for handling PDF files in your application.