#2 Resolving Server Side Multer diskStorage destination errors on production environment (vercel)

Introduction
When deploying Node.js applications to production environments such as Vercel, you might encounter issues with file uploads using Multer. One common error is related to the diskStorage destination, which often occurs due to the read-only file system in such environments.

In this post, we'll explore a solution to this problem by using in-memory storage with Multer and uploading files directly to a cloud service (like Cloudinary).

//Previous Code with Error

//multerConfig.js
const multer = require('multer');
// Set up Multer for file upload
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/'); // Directory to save uploaded files
  },
  filename: (req, file, cb) => {
    cb(null, `${file.originalname}`); // File naming convention
  },
});
const uploads = multer({ storage });
module.exports = uploads;
//Profile Upload Route
// In your routes file
router.post('/profile/profile_upload', uploads.single('photo'), profile_upload);
//photo is the key or fieldname from the client-side
//Profile Upload Function
const profile_upload = asyncHandler(async (req, res) => {
  try {
    const filePath = req.file.path;
    const userId = req.user._id;

    // Upload the image to Cloudinary with user ID as part of the public ID or metadata
    const uploadResult = await cloudinary.v2.uploader.upload(filePath, {
      asset_folder: 'upload_profile',
      resource_type: 'image',
      public_id: `${userId}`,
    });

    // Clean up the uploaded file from the server
    fs.unlinkSync(filePath);

    const profile_image = {
      public_id: uploadResult.public_id,
      url: uploadResult.secure_url
    };

    const userImage = await UserImage.create({
      user_id: userId,
      profile_image
    });

    res.status(201).json(userImage);
  } catch (error) {
    console.error(error);
    res.status(500).send('Failed to upload image.');
  }
});

//Solution to the Problem

// multerConfig.js
const multer = require('multer');
const storage = multer.memoryStorage();
const uploads = multer({ storage });
module.exports = uploads;
//Updated Profile Upload Function
const profile_upload = asyncHandler(async (req, res) => {
  try {
    const file = req.file;
    const userId = req.user._id;

    if (!file) {
      return res.status(400).send('No file uploaded.');
    }

    // Upload the file buffer directly to Cloudinary
    const uploadResult = await new Promise((resolve, reject) => {
      const uploadStream = cloudinary.v2.uploader.upload_stream({
        asset_folder: 'upload_profile',   // Optional: specify a folder for the image
        resource_type: 'image',
        public_id: `${userId}`,     // Set the public_id for the image
      }, (error, result) => {
        if (error) {
          reject(error);
        } else {
          resolve(result);
        }
      });

      // Write the buffer to the stream
      uploadStream.end(file.buffer);
    });

    const profile_image = {
      public_id: uploadResult.public_id,
      url: uploadResult.secure_url
    };

    const userImage = await UserImage.create({
      user_id: userId,
      profile_image
    });

    res.status(201).json(userImage);
  } catch (error) {
    console.error(error);
    res.status(500).send('Failed to upload image.');
  }
});

This approach ensures that we can handle file uploads in environments like Vercel without running into file system issues. By using in-memory storage and uploading directly to a cloud service, we bypass the limitations of a read-only file system.
With this solution, you can deploy your application to Vercel and handle file uploads without any errors. Happy coding!

Blog

#2 Resolving Server Side Multer diskStorage destination errors on production environment (vercel)

Salihu Kutiriko Abubakar.

Join Our Newsletter. No Spam, Only the good stuff.

Related