internal server error while using Multer ( node.js )

I am trying to upload image using multer, by following a youtube tutorial. But not able to understand why it is not working properly.

code:

index.html

<body>

<form method="post" action="/upload" enctype="multipart/form-data">
    <input type="file" name="image">
    <input type="submit">
</form>

</body>

server.js

const path = require('path');
const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);


app.use(express.static(path.join(__dirname,"../public")));

const multer=require('multer');

const storage=multer.diskStorage({
    destination:(req,file,cb)=>{
        cb(null,"./Images")
    },
    filename: (req,file,cb)=>{
        console.log(file)
        cb(path.extname(file.originalname));
        console.log("---")
    }
});

const upload=multer({storage:storage});


app.post("/upload",upload.single('image'),(req,res)=>{

    console.log("up")
});


app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname,'../public/index.html'));
  });

server.listen(3000, () => {
  console.log('listening on *:3000');
});

logs:

 listening on *:3000
{
  fieldname: 'image',
  originalname: 'vidLogo.jpg',
  encoding: '7bit',
  mimetype: 'image/jpeg'
}
---

as you can see, logs are generated till the end.

the server throws internal server error(500) and send response file as below:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>.jpg</pre>
</body>
</html>

Solution

in your server.js, check the current directory then move to your "Images" folder
check that "Images" folder exists on project in rigth path
Add "/" at the end of destination

${process.cwd()}/Images/`)

Add error parameter to callback function : cb (error can be null)

const storage = multer.diskStorage({
  destination(req, file, cb) {
    cb(null, `${process.cwd()}/Images/`); // destination
  },
  filename(req, file, cb) {
     cb(
      null,
      `${file.fieldname}-${Date.now()}${path.extname(file.originalname)}` // filename
     );
  },
});

Full exemple with advanced validations by uploading files

import path from "path";
import express from "express";
import multer from "multer";
import asyncHandler from "express-async-handler";
import process from "process";

const router = express.Router();

const storage = multer.diskStorage({
  destination(req, file, cb) {
    cb(null, `${process.cwd()}/uploads/documents/`);
  },
  filename(req, file, cb) {
    cb(
      null,
      `${file.fieldname}-${Date.now()}${path.extname(file.originalname)}`
    );
  },
});

function checkFileType(file, cb) {
  const extensionsAutorisees = [
    "text/plain",
    "application/pdf",
  ];

  if (extensionsAutorisees.includes(file.mimetype)) {
    return cb(null, true);
  } else {
    return cb(
      new Error(`Only documents of type PDF, Text are authorized`)
    );
  }
}

const upload = multer({
  storage,
  limits: {
    fileSize: 1024 * 1024 * 5, // 5Mb file size limit
  },
  fileFilter: function (req, file, cb) {
    checkFileType(file, cb);
  },
}).single("document");

router.route("/").post(
  protect,
  asyncHandler(async (req, res) => {
    upload(req, res, async (err) => {
      if (
        err &&
        err.name &&
        err.name === "MulterError" &&
        err.code == "LIMIT_FILE_SIZE"
      ) {
        return res.status(400).send({
          error: err.name,
          message: `Document too large, the maximum size is 5Mb`,
        });
      }

      // handle other errors
      if (err) {
        return res.status(500).send({
          error: "FILE UPLOAD ERROR",
          message: `Document loading error : ${err.message}`,
        });
      }

      return res.status(201);

    });
  })
);