I have a script that allows me to upload files into a folder using React on the frontend and Node on the backend.
I have a folder named client and another named server. When I click on upload file, the file is uploaded.
So what I did is create a new project and moved just the backend, keeping client in the old one. Now, when I click on upload image, I get this error and I don"t know why:
Maybe there is something wrong with Multer?
Code:
server
const path = require("path");
const multer = require("multer");
const storage = multer.diskStorage({
destination: "uploads/",
filename: function (req, file, cb) {
cb(null, "IMAGE-" + Date.now() + path.extname(file.originalname));
},
});
const upload = multer({
storage: storage,
limits: { fileSize: 1000000 },
}).single("file");
exports.filesU = (req, res) => {
upload(req, res, (err) => {
console.log("Request ---", req.body);
console.log("Request file ---", req.file);
//Here you get file.
/*Now do where ever you want to do*/
if (!err) return res.json({ success: true, url: res.req.file.path });
});
};
client
let formdData = new FormData();
const config = {
header: { "content-type": "multipart/form-data" },
};
formdData.append("file", files[0]);
console.log(formdData);
Axios.post(
"http://localhost:4000/api/chat/uploadfiles",
formdData,
config
)
Related
I want to upload a file using Multer in a specific directory in my NodeJs app defined by the frontend in vuejs.
It is my first application with multer
The backend code is :
...
const app = express();
app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
const storage = multer.diskStorage({
destination: (req, file, cb) => {
//req.body.idUser is undefined here
let destinationPath = path.join("upload_file", req.body.idUser);
if (!fs.existsSync(destinationPath)) {
fs.mkdirSync(destinationPath);
}
cb(null, destinationPath);
},
filename: (req, file, cb) => {
let newFileName = Date.now() + path.extname(file.originalname);
cb(null, newFileName);
},
});
const upload = multer({ storage });
app.post(
"/file/add",
upload.fields([{ name: "newfile" }, { name: "idUser" }]),
(req, res) => {
res.json({
response: "file uploaded",
});
},
);
...
And the frontend code is :
...
async sendDocument(event){
const file = event.target.files[0]
const form = new FormData()
form.append("newfile", file, file.name)
form.append("idUser", this.getIdUser)
const opts =
{
method: "POST",
body: form,
}
const url = "http://localhost:3000/file/add";
try{
await fetch(url, opts)
.then(function (response) {
return response.json();
})
.then(function (res) {
console.log(res)
});
}catch(err){
console.log(err)
}
},
...
I tried to debug step by step with console.log to check why req.body.idUser is not defined in storage and I need it to complete the destinationPath
If I replace req.body.idUser by static value like "toto", all work fine
In front, this.getIdUser is working fine. And req.body.idUser is working in app.post
Thanks for your help
Try appending the ID to the form first:
const form = new FormData()
form.append("idUser", this.getIdUser)
form.append("newfile", file, file.name)
Hi I am trying to upload a file from fronend to backend using multer
Front End
var formData = new FormData();
formData.append("files", image[0]);
formData.append("data", JSON.stringify({status: 'ACK', message: "You are fu*ked"});
return http.axios
.post(apiUrl + apiDomain + "/createAnnouncement", formData, {
headers: {
"Content-Type": "multipart/form-data",
},
})
.then((res) => res);
Backend
const bodyParser = require("body-parser");
const Express = require("express");
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, config.get("announcemnt_upload_file_storage"));
},
filename: function (req, file, cb) {
cb(null, file.filename + "_" + Date.now());
},
});
var upload = multer({ storage: storage });
const Router = Express.Router();
Router.route("/createAnnouncement").post(
upload.single("files"),
(req , resp, next) => {
console.log(" >>>>>>>", req.file);//THis returns undefined
console.log(">>>>", req.files);//This returns undefined
resp.send("Siccess")
}
);
Below is my Req snapshot
Its not getting uploaded to storage and its returning undefined when called req.file
But if I try to see req.body I could see [Object File] in console
PLease suggest where I am going wrong
I think this may help https://github.com/RUSHI-GADHIYA/uploading-and-updating-image see this
I am build a web app with Node.js and React and I am trying to store some files at my backend.
For some reason i cant access to my req.path , although I configured all multer strategies.
const multer = require('multer')
const config = require('config')
const auth = require('../../middleware/auth')
const {check , validationResult } = require('express-validator');
const storage = multer.diskStorage({
destination: function(req, file , cb){
cb(null,'uploads/')
},
filename: function(req, file, cb){
cb(null, req.user.id)
}
});
const fileFilter = (req, file , cb) =>{
if(file.mimetype === 'image/jpeg' || file.mimetype === 'image/jpg' || file.mimetype === 'image/png')
cb(null,false);
else
cb(null,true);
}
my route:
router.post('/' , [auth,upload.single('image'),
[
check('status','Status is required').not().isEmpty(),
check('skills','Skills is required').not().isEmpty(),
check('gender','Gender is required').not().isEmpty()
]],
async (req,res) => {// cant access to req.file.....}
and my react form:
<div className="form-group">
<input type="text" placeholder="Choose profile image" name="profileImage" value={image}/>
<input type="file" placeholder="Upload" enctype="multipart/form-data" name="image" onChange={(e) => onChange(e)}/>
<small className="form-text">The image must not be bigger then 5MB and only JPG\JPEG\PNG types</small>
</div>
Please , what am i doing wrong?
I have used multer in my backend application and this is how I have configured it and it works properly and stores required files in server file directory.
First, installing multer
npm i multer --save
Second, initialize it at the top of required .js file
const multer = require("multer");
Now, configuring storage (storage location and filename)
const storage = multer.diskStorage({
destination: "./public/uploads/postimages/",
filename: function (req, file, cb) {
cb(
null,
file.fieldname + "-" + Date.now() + path.extname(file.originalname)
);
},
});
Init multer function, (configure own file size)
Use array if you want to upload multiple files at once, 10 is the number of files, you can modify it as needed.
const upload = multer({
storage: storage,
limits: { fileSize: 10000000000 },
}).array("image", 10);
// Use .single("image"); if you want to upload a single file.
// image is the name/key that is sent from frontend with the file(s).
If you are using array, you can create an api that stores file, which will look like this.
try {
let imagePath = "abc";
let postId = req.params.postId;
let imagesLinks = [];
await upload(req, res, (err) => {
if (err) {
console.log(err);
} else {
if (req.files == undefined) {
console.log("File not found.");
} else {
//image uploaded successfully
req.files.map(function (file) {
imagePath = "uploads/postimages/" + file.filename;
imagesLinks.push(tmp);
});
}
}
res.status(201).send(imagesLinks);
});
}
For a single file, it looks as simple as this
try {
let imagePath = "abc";
upload(req, res, (err) => {
if (err) {
res.status(300).send(err);
console.log(err);
} else {
if (req.file == undefined) {
res.status(301).send("image upload failed.");
} else {
//image uploaded successfully
imagePath = "uploads/" + req.file.filename;
storeImageLink(res, imagePath);
}
}
});
}
Look at these examples. They will be help you:
File Upload With Multer in Node.js and Express
Multer Storage:
// SET STORAGE
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads')
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now())
}
})
var upload = multer({ storage: storage })
Handling File Uploads:
app.post('/uploadfile', upload.single('myFile'), (req, res, next) => {
const file = req.file
if (!file) {
const error = new Error('Please upload a file')
error.httpStatusCode = 400
return next(error)
}
res.send(file)
})
Reactjs nodejs upload image — How to upload image using reactjs and nodejs (multer)
Node.js:
const path = require("path");
const multer = require("multer");
const storage = multer.diskStorage({
destination: "./public/uploads/",
filename: function(req, file, cb){
cb(null,"IMAGE-" + Date.now() + path.extname(file.originalname));
}
});
const upload = multer({
storage: storage,
limits:{fileSize: 1000000},
}).single("myImage");
const router = express.Router();
router.post("/upload", {
upload(req, res, (err) => {
console.log("Request ---", req.body);
console.log("Request file ---", req.file);//Here you get file.
/*Now do where ever you want to do*/
if(!err)
return res.send(200).end();
});
};);
I'm trying to make my own upload service, and I want to be able to upload a file in a local folder on my server but also on my mongoDB cloud service (Atlas).
So far, I've done both services separately and they work fine (I made a Node app for uploading files to mongo Atlas and another Node app for uploading files to the server). But now, I would like to unifiy these two into a single node app, where after each POST request, the file gets sent to both Atlas as well as the local folder. I'm using multer and gridfs.
The first attempt was to make two "file-input" fields on my index.html file, and each of those with two different POST requests: one to '/upload' which sends the file to Atlas and the second one to '/uploaddisk' which sends the file to disk. However, the second post request doesn't work (it throws me the error every time I want to submit my file). Uploading the file to mongoDB seems to work just fine every time.
Any ideas how can I do this on a single POST ? Thank you in advance!
Here is the code that I wrote for my server.js app:
//mongo DATA
const dbURI =
"myc-atlas-credentials";
mongoose.Promise = global.Promise;
// mongoose.connect(bdURI, { useNewUrlParser: true, useUnifiedTopology: true });
const conn = mongoose.createConnection(dbURI, {
useNewUrlParser: true,
useUnifiedTopology: true
});
//init gfs
let gfs;
conn.once("open", () => {
//initialize the stream
gfs = Grid(conn.db, mongoose.mongo);
gfs.collection("uploads");
});
//creating the storage engine for MONGO
const storage = new GridFsStorage({
url: dbURI,
file: (req, file) => {
return new Promise((resolve, reject) => {
const filename = file.fieldname + '-' + Date.now() + path.extname(file.originalname);
const fileInfo = {
filename: filename,
bucketName: "uploads"
};
resolve(fileInfo);
});
}
});
const upload = multer({ storage: storage });
//set storage engine with multer for disk
const diskstorage = multer.diskStorage({
destination: function(req, file, cb) {
cb(null, path.join(__dirname + '/uploads/'));
},
filename: function(req, file, cb) {
cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
}
});
const diskupload = multer({ storage: diskstorage });
//route for POST - upload data to mongo
app.post('/upload', upload.single('file'), (req, res) => {
console.log({ file: req.file });
// res.json({ file: req.file });
res.redirect('/');
});
//route for POST - upload data to disk
app.post('/uploaddisk', diskupload.single('file'), (req, res, next) => {
const file = { file: req.file };
if (!file) {
const error = new Error('Please upload a file');
error.httpStatusCode = 400;
return next(error);
}
res.redirect('/');
});
You can try it like this:
function fileUpload(req, res, next) {
upload.single('file')(req, res, next);
diskupload.single('file')(req, res, next);
next();
}
//route for POST - upload data to mongo
app.post('/upload', fileUpload, (req, res) => {
console.log({ file: req.file });
// res.json({ file: req.file });
res.redirect('/');
});
I am trying to upload an image using express but I am facing two problems, first, whenever I upload the same image again it's not getting uploaded and secondly after uploading any single image a file with image also uploading. Here is my code.
var multer = require('multer');
var uploads = multer({dest: './images'});
app.post('/uploading', uploads.single("file"), function (req, res) {
var file = __dirname +"/images" + "/" + req.file.originalname;
fs.readFile( req.file.path, function (err, data) {
fs.writeFile(file, data, function (err,data) {
if( err ){
console.error( err );
response = {
message: 'Sorry, file couldn\'t be uploaded.',
filename: req.file.originalname
};
}else{
response = {
message: 'File uploaded successfully',
filename: req.file.originalname
};
}
res.end( JSON.stringify( response ) );
});
});
})
The uploads.single("file") middleware Will handle the file upload. You don't have to specifically fs.read and fs.write the file.
var multer = require('multer');
var uploads = multer({dest: './images'});
app.post('/uploading', uploads.single("file"), function (req, res) {
//the file is uploaded automatically
})
EDIT: The above code will upload the file with hex string as filename without any extension.
In order to add rename function you need to use diskStorage. Here is the code taken from this github issue page.
var multer = require('multer');
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './images/')
},
filename: function (req, file, cb) {
crypto.pseudoRandomBytes(16, function (err, raw) {
cb(null, raw.toString('hex') + Date.now() + '.' + mime.extension(file.mimetype)); //this is the rename func
});
}
});
var uploads = multer({ storage: storage });
app.post('/uploading', uploads.single("file"), function (req, res) {
//the file is uploaded automatically
})
Now you can use the uploads variable as middleware as shown in the above snippet.
you can edit the filename: function (req, file, cb) { .. } according to your needs. Now the filename will be, <16characterhexstring>.ext
another way to handle it will be not using middleware and using multer manually with below options :
try {
var storage = multer.diskStorage({
destination: function(request, file, callback) {
//define folder here by fs.mkdirSync(anyDirName);
},
filename: function(req, file, callback) {
callback(null, anyFileName);
},
limits: self.limits
});
var upload = multer({
storage: storage,
fileFilter: function(request, file, callback) {
// here you can filter out what not to upload..
}
}).any();
upload(request, response, callback);
} catch (e) {
}
hope this helps!