Node.js Image Upload System: File Handling, Storage, and Database Integration

In our previous article, we implemented a client-side image upload functionality using React. Now, it's time to build out the server-side infrastructure to handle these uploads effectively. In this tutorial, we'll create a backend system that not only receives and stores images but also manages their metadata and serves them back to our application. We'll cover setting up file storage, integrating with a database to track image information, and creating endpoints that return essential image data like storage locations. Let's dive into building a complete image management system with Node.js. 1. Configuring New Route, Controller, and Multer for handling multipart/form-data So, what is the idea? Ok, we will create a separate route that will accept the image, send the file to the storage, and then return some data about that file to the frontend. On the frontend, we will get that data, and add it to the post payload before sending the "create new post" request. Now we will start with configuring a new route in our Node.js server. inside our "posts.router.js" file we need to add one more route; postsRouter.post('/post-image', protect, postsController.uploadPostImage); use the "npm i multer" command to install the "multer" module to our server; import "fs" (is a built-in Node.js module that provides an API for interacting with the file system, allowing us to read, write, delete, and manage files and directories), path (is a built-in Node.js module that provides utilities for working with file and directory paths, allowing us to resolve, join, normalize, and manipulate paths in a cross-platform way), multer (is a Node.js middleware for handling multipart/form-data, primarily used for uploading files in Express applications); const multer = require('multer'); const fs = require('fs'); const path = require('path'); define the "uploadPostImage" controller. First, create a "directory" structure where we will store our images, with the help of the "path" module. Second, check if the directory exists, if not create one with the help of the "fs" module. Third, create a storage variable that will store all necessary data for our file success upload (like name, directory, etc...). Finally, build an "upload" function that will use all "storage" and "file" data to upload the file and return the resulting code; function uploadPostImage(req, res) { let uploadDir = path.join(__dirname, '../../../../public/uploads/post-images'); if (!fs.existsSync(uploadDir)) { fs.mkdirSync(uploadDir, { recursive: true }); } const storage = multer.diskStorage({ destination: (req, file, cb) => { cb(null, uploadDir); }, filename: (req, file, cb) => { cb(null, file.originalname); } }); const upload = multer({ storage }).single('file'); upload(req, res, (err) => { if (err) { console.error('Error uploading file:', err); return res.status(500).json({ error: 'File upload failed' }); } res.status(200).json({ status: 200, message: 'Post image uploaded successfully', imageUrl: req.file.path }); }); } Nice, now, we have a file uploading feature ready to use in our "server" app, and let's move on. 2. DELETE Endpoint for Image Removal Functionality We will start from "posts.router.js" file: create a new "remove-image" route inside our post router list; postsRouter.post('/remove-image', protect, postsController.deletePostImage); define the "deletePostImage" controller, which will: receive the image name, create a file path to the folder with our images, and "fs.unlink" (fs.unlink is a Node.js method used to asynchronously delete a file from the filesystem) image we need; function deletePostImage(req, res) { const { imageName } = req.body; let uploadDir = path.join(__dirname, '../../../../public/uploads/post-images'); const filePath = path.join(uploadDir, imageName); fs.unlink(filePath, (err) => { if (err) { console.error('Error deleting file:', err); return res.status(500).json({ error: 'File deletion failed' }); } res.status(200).json({ status: 200, message: 'Post image deleted successfully' }); }); } Great. But we have functionality that allows us to save posts to our database, to fix this we need to modify our frontend part, it should send images into our new routes before saving the post. 3. Sending Images from Frontend Part We need to open our "posts.services.js" file from the "admin" folder once again and add two more endpoints. export const uploadPostImage = (data) => HTTP.post('/posts/post-image', data).then(({data}) => data ); export const removePostImage = (data) => HTTP.post('/posts/remove-image', data).then(({data}) => data ); Then, inside the "PostForm.

postsRouter.post('/post-image', protect, postsController.uploadPostImage);

const multer = require('multer');
const fs = require('fs');
const path = require('path');

function uploadPostImage(req, res) {
    let uploadDir = path.join(__dirname, '../../../../public/uploads/post-images');
    if (!fs.existsSync(uploadDir)) {
        fs.mkdirSync(uploadDir, { recursive: true });
    }
    const storage = multer.diskStorage({
        destination: (req, file, cb) => {
            cb(null, uploadDir);
        },
        filename: (req, file, cb) => {
            cb(null, file.originalname);
        }
    });
    const upload = multer({ storage }).single('file');
    upload(req, res, (err) => {
        if (err) {
            console.error('Error uploading file:', err);
            return res.status(500).json({ error: 'File upload failed' });
        }
        res.status(200).json({
            status: 200,
            message: 'Post image uploaded successfully',
            imageUrl: req.file.path
        });
    });
}

postsRouter.post('/remove-image', protect, postsController.deletePostImage);

function deletePostImage(req, res) {
    const { imageName } = req.body;
    let uploadDir = path.join(__dirname, '../../../../public/uploads/post-images');
    const filePath = path.join(uploadDir, imageName);
    fs.unlink(filePath, (err) => {
        if (err) {
            console.error('Error deleting file:', err);
            return res.status(500).json({ error: 'File deletion failed' });
        }
        res.status(200).json({
            status: 200,
            message: 'Post image deleted successfully'
        });
    });
}