Uploading and Reading PDF Files with Node.js and React

Introduction

In the modern web development landscape, handling file uploads and processing them is a common requirement. In this article, we will explore how to upload a PDF file from a React client and read its contents using Node.js on the server side. By the end of this tutorial, you’ll have a deeper understanding of file uploads, the Node.js ecosystem, and how to efficiently manage files in your applications.

Understanding the flow from the front end to the back end is crucial for building full-stack applications. This guide is designed to take beginners and experienced developers alike through the entire process of creating a simple PDF upload feature. We will harness the power of React for the front end and Node.js along with the ‘pdf-parse’ library for reading the PDF file’s contents.

Let’s dive into the practical implementation and unlock the exciting potential of file uploads with JavaScript frameworks!

Setting Up the Project

To get started, we will first set up our project environment. We will create a new React application and a Node.js server from scratch. Make sure you have Node.js installed on your machine. If you don’t have it yet, you can download it from the official Node.js website.

Use the following command to create a new React application using Create React App:

npx create-react-app pdf-upload-example

This command will set up a new folder named pdf-upload-example with all the necessary boilerplate code for a React application. Once the setup is complete, navigate into your project folder and start the development server:

cd pdf-upload-example
npm start

Now, let’s create the Node.js server. In the root directory of your project, create a new folder called server. Inside the server folder, initialize a new Node.js project:

npm init -y

This command will generate a package.json file for our server. Now, we need to install the necessary dependencies such as express, multer for handling file uploads, and pdf-parse to read PDF files:

npm install express multer pdf-parse

Building the React Front End

Now that our backend is set up, let’s turn our attention to the React front end. We’ll create a simple form that allows users to upload a PDF file. Inside your React application, locate the src/App.js file and modify it as follows:

import React, { useState } from 'react';
import axios from 'axios';

function App() {
  const [file, setFile] = useState(null);

  const onFileChange = (event) => {
    setFile(event.target.files[0]);
  };

  const onFileUpload = async () => {
    const formData = new FormData();
    formData.append('file', file);

    try {
      const response = await axios.post('http://localhost:5000/upload', formData, {
        headers: { 'Content-Type': 'multipart/form-data' }
      });
      console.log(response.data);
    } catch (error) {
      console.error('Error uploading file:', error);
    }
  };

  return (
    

      
Upload PDF File

      

      
    

  );
}

export default App;

In this code, we use React’s state management to control the selected file and provide a file input that accepts only PDF files. Upon file selection, we update the state and later upload the file using Axios when the user clicks the ‘Upload!’ button.

Don’t forget to install Axios for making HTTP requests by running:

npm install axios

When you integrate this into your React app and run it, you should see a simple file upload interface.

Creating the Node.js Back End

Now that our front end is ready, let’s set up the back end. Create a new file in the server folder named server.js. This file will contain the Express server that handles uploading and processing the PDF file:

const express = require('express');
const multer = require('multer');
const pdf = require('pdf-parse');
const path = require('path');

const app = express();
const port = 5000;

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads');
  },
  filename: (req, file, cb) => {
    cb(null, `${Date.now()}_${file.originalname}`);
  }
});

const upload = multer({ storage });

app.post('/upload', upload.single('file'), (req, res) => {
  const filePath = path.join(__dirname, 'uploads', req.file.filename);

  const dataBuffer = fs.readFileSync(filePath);
  pdf(dataBuffer).then((data) => {
    res.json({ text: data.text });
  }).catch((error) => {
    res.status(500).json({ error: 'Error reading PDF file.' });
  });
});

app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

In this server setup, we use Multer to handle file uploads. The uploaded files are saved in an uploads directory. The server reads the PDF file using the pdf-parse library and responds with the text data of the PDF.

To ensure everything runs smoothly, we have to create the uploads directory in the server’s root folder. You can do this by running:

mkdir uploads

Then start your server with:

node server.js

This will make our server ready to accept file uploads from the React client.

Testing the File Upload

With both the React front end and the Node.js back end set up, it’s time to test our PDF upload functionality. Make sure your Node.js server is running and open your React application in the browser.

Try selecting a PDF file using the upload interface we created. When you click on the ‘Upload!’ button, the file should be sent to the server, and if successful, you should see the extracted text output in the browser’s console.

If you encounter any issues, check the developer console in your browser for errors and ensure that your server is properly running and accessible. Pay special attention to CORS issues, as the client and server are running on different ports.

Handling Errors and Edge Cases

File uploads can sometimes lead to unexpected errors. It’s essential to handle different types of errors gracefully. Here are some tips and best practices for robust error handling:

  • File Size Limits: Use Multer’s limits option to restrict file size and reject excessively large files.
  • File Type Validation: Use Multer’s fileFilter option to restrict uploads to PDF files only. This avoids unnecessary processing.
  • Server Response Handling: Ensure that your front end appropriately handles successful responses and errors, displaying user-friendly messages accordingly.
  • Cleaning Up Files: Depending on your application needs, consider deleting files after processing to save storage and prevent clutter.

Implementing these practices will enhance your application’s user experience and robustness, ensuring that it gracefully handles edge cases.

Conclusion

In this tutorial, we successfully created a full-stack application enabling users to upload PDF files and read their contents. We utilized React for the client side and Node.js with Express for the back end, using Multer for file uploads and pdf-parse to extract text from PDFs.

From understanding file uploads to managing server responses, you’ve gained insights into both the front-end and back-end aspects of web development. This foundational knowledge will empower you to build more sophisticated applications that handle a wide range of file types and processing scenarios in the future.

As technology continues to evolve, staying updated on best practices and incorporating new features will keep your skills sharp and relevant. Explore further into file uploads, cloud storage solutions, or even integrating third-party APIs to enhance your applications even more. Happy coding!

Related Posts

Scroll to Top