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>
CodePudding user response:
- 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);
});
})
);
CodePudding user response:
The error is in the second callback inside filename
function where you need to provide null
as an error and a file name as a value: cb(null, path.extname(file.originalname));
Try to update your code like this:
const storage=multer.diskStorage({
destination:(req,file,cb)=>{
cb(null,"./Images")
},
filename: (req,file,cb)=>{
console.log(file)
// I updated the file name as well so that it is not extension only
cb(null, file.fieldname path.extname(file.originalname)); // <--- HERE
console.log("---")
}
});