I have been searching a while but not got answer please help
So I want to upload files to server, I have code
var upload = multer({ storage: common.storage , fileFilter : common.fileFilter,limits:{fileSize:config.maxSize} }).array('media');
upload(req, res, function (err) {
if (err) {
res.json({'success' : false , 'err' : err , msg : 'Something went wrong please try again'});
}else{
if(req.fileValidationError) {
return res.end(req.fileValidationError);
}`
Its some code to upload file on multer where common.storage function is as
'storage' : multer.diskStorage({
destination: function (req, file, cb) {
console.log(req.pathToSaveFile)
cb(null, 'uploads/' + req.pathToSaveFile)
},
filename: function (req, file, cb) {
console.log('file' , file)
cb(null, req.timestamp +'_'+ file.originalname)
},
}),
after console file nothing happens, please help me in this
`
If your server is running with PM2 than its the most common error we got, because of watch here is an example for file upload with node js.
const multer = require('multer');
var storage = multer.diskStorage({server
destination: function (req, file, callback) {
callback(null, 'UPLOAD_FOLDER_PATH');
},
filename: function (req, file, callback) {
callback(null, new Date().toISOString().replace(/[-T:\.Z]/g, "") + file.originalname) ; // toISOString has been used to rename your file.
}
});
var upload = multer({ storage : storage}).single('YOUR_INPUT_FIELD_NAME');
upload(req,res,function(err) {
if(err) {
return res.end("Error uploading file.");
} else {
// File uploaded successfully.
// Do you stuff.
}
Note : There are two way to use for the following code with PM2
1) Start PM2 server without watch. (Not recommended.)
pm2 start index.js
2) Start PM2 server with watch and ignore file upload folder.
pm2 start index.js --watch --ignore-watch "UPLOAD_FOLDER_PATH"
Happy coding cheers!
Related
I'm trying to get Multer to save images in an src/uploads directory. Everything seems to work fine with no errors but the src/uploads directory is empty after the endpoint is called.
I'm using a microservices architecture using Node, Express, and running it locally DockerDesktop + Kubernetes using Skaffold.
Here is my route:
const router = express.Router();
let storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, path.join(__dirname, './uploads'));
},
filename: function (req, file, cb) {
cb(null, file.originalname);
},
});
let upload = multer({ storage });
router.post(
'/api/products/images',
upload.single('image'),
async (req: Request, res: Response) => {
console.log(req.file);
res.status(201).send('success');
},
);
export { router as imageRouterRouter };
My app file includes:
app.use(imageRouterRouter);
app.use('/uploads', express.static(__dirname));
I know I'm receiving the file successfully via postman, Multer is 'uploading' it and the path is correct as I'm logging the following req.file:
[products] {
[products] fieldname: 'image',
[products] originalname: 'cute-dog.jpeg',
[products] encoding: '7bit',
[products] mimetype: 'image/jpeg',
[products] destination: '/app/src/uploads',
[products] filename: 'cute-dog.jpeg',
[products] path: '/app/src/uploads/cute-dog.jpeg',
[products] size: 18473
[products] }
Any help would be much appreciated as I've spent a couple days on it with no luck. Thanks.
I figured out what the problem was.
I was checking the src/uploads directory on my LOCAL machine, expecting it to contain the new files. But because I'm using docker, the new files were written to the container instead.
Using the below, I explored the container and confirmed the files were there:
docker exec -it <container_id> /bin/sh
Hope this helps anyone else who is as silly as me.
I have simple multer image uploading.
// Multer settings
// STORAGE FOR USER AVATAR
var storageAvatar = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'public/uploads/avatars/')
},
filename: function (req, file, cb) {
cb(null, req.user.id + '.jpg')
}
})
// STORAGE FOR ARTICLE THUMBNAILS
var storageThumbnail = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'public/uploads/thumbnails/')
},
filename: function (req, file, cb) {
cb(null, "clanok" + '.jpg')
}
})
// SETTING UPLOAD FOLDER
var upload = multer({
storage: storageAvatar
})
// Multer BEFORE CSRF!!!
app.use(upload.fields([{
name: 'avatar',
maxCount: 1,
}, {
name: 'thumbnail',
maxCount: 1,
}]));
my problem is that i am unable to set different folder for avatars and thumbnails. I can set only one folder for both :/ Anything else i tried ends with invalid CSRF. Thanks for anny suggestions.
EDIT: in one form i am using only one thing. So for example in profile update i have only possibility to change avatar in article adding i have only ability to change thumbnail of article. They not need to bey in upload fields can be seperate but dont know how.
I found on forum way how to go over csrf problem by adding ?_csrf={{csrfToken}} to the end of action in form so i can use official way of using multer :)
I'm facing issues for uploading local images to my google cloud storage.
I've already tried two methods. The first one is uploading with multer
var storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, './uploads/')
},
filename: (req, file, cb) => {
cb(null, file.fieldname + '-' + Date.now())
}
});
var upload = multer({storage: storage}).single('image');
app.post('/upload',function(req,res,next){
upload(req,res,(err) => {
if(err){
console.log(err)
}else{
console.log(req.file)
}
})
})
Then, i've tried directly with GCS
var bucket = admin.storage().bucket('mybucket')
app.post('/upload',function(req,res,next){
bucket
.save(file)
.then(() => {
})
for both of these solutions , req.files is always undefined whereas req.body is a buffer like this :
<Buffer 2d 2d 2d 2d ...>
when i try to save this buffer on my GCS bucket, i the .jpg/png file is created in my bucket but it is corrupted.
I'm browsing the web seeking for a solution but i found nothing that helped me to overcome this situation.
Any advice ?
You need multer, multer-google-storage and ofcourse bodyParser if you have additional form values. You need to sent data in multipart/form-data
In your .env file
GCS_BUCKET = <bucket name>
GCLOUD_PROJECT = <project id>
GCS_KEYFILE = <key file location>
You can download key file from GCP Console>Your Project>I AM & Admin>Service Accounts
In your route
const multer = require('multer');
const multerGoogleStorage = require("multer-google-storage");
var uploadHandler = multer({
storage: multerGoogleStorage.storageEngine()
});
router.post('/', uploadHandler.single('image'), function (req, res, next) {
const body = req.body;
res.json({fileName: req.file.filename});
res.end();
}
This will store file on to GCS with name [random-string-generated-by-gcs]_[YOUR FILE NAME WITH EXTENTION]. The same can be access under the route via req.file.filename.
Documentation
Make sure you have added enctype="multipart/form-data" attribute to your form. A probable reason for req.files being undefined.
i am uploading files with multer nodejs. Everything Works fine but when input type="file" contains name="warranty[][warantycopy]" i am unable to access this file.
Below is my code in index.js:
var multer = require('multer');
var invoice_copies = '';
var storage_Copies = multer.diskStorage({
destination: function (req, file, cb) {
// console.log("fileefefef");
// console.log(file);
cb(null, 'uploads/'+file.fieldname)
},
filename: function (req, file, cb) {
invoice_copies=(file.originalname).replace(/ /g,"_")
cb(null, invoice_copies)
}
});
var uploadCopies = multer({ storage: storage_Copies })
post request contains this code
router.post('/vehicle-battery',uploadCopies.fields([{name:'invoice_copy1'},
{name:'warrantyDetails'}]), function(req, res) {
//my code
}
my jade file is :
form#formAddUser(name="addVehicle",method="post",action="/vehicle-battery",enctype="multipart/form-data")
input(type="file", name="invoice_copy1",class="form-control")
input#warrantyCard(type="text", placeholder="warranty Card Number", name="warrantyDetails[0][warrantyCardNumber]",class="form-control")
input#warrantyCardExpiry(type="text", placeholder="warranty Card Expiry in Month", name="warrantyDetails[0][warrantyCardExpiry]",class="form-control")
input#warrantyCardCopy(type="file", placeholder="warranty Card Expiry copy", name="warrantyDetails[0][warrantyCardCopy]",class="form-control")
textarea(placeholder="Particulars" name="battery_paticulars")
button#btnSubmit(type="submit",class="form-control") submit
if i am using
input#warrantyCardCopy(type="file", placeholder="warranty Card Expiry copy", name="warrantyDetails",class="form-control")
this code working fine.
From a comment above:
after working for research for so long time i solved it . I am providing my solution so that it can help someone else. i have used
router.post('/vehicle-battery',uploadCopies.any(), function(req, res) { //my code }
does anyone know how to use tinyPNG's API with multer? The docs seem deceptively simple:
var source = tinify.fromFile("unoptimized.jpg");
source.toFile("optimized.jpg");
though there's no clear indication of where this is meant to go, especially in something as convoluted as this:
var storage = multer.diskStorage(
{
destination: function (req, file, callback) {
callback(null, './uploads');
},
filename: function (req, file, callback) {
//use date to guarantee name uniqueness
callback(null, file.originalname + '-' + Date.now());
}
}
);
//.any() allows multiple file uploads
var upload = multer({ storage : storage}).any()
app.post('/api/photo', function(req,res){
upload(req,res,function(err) {
if(err) {
return res.end("Error uploading file.");
}
res.end("File is uploaded");
});
});
Where am I meant to "intercept" the file uploaded by multer so that I can compress it with tinyPNG?
Thanks in advance for the help!
Use following basic sample that changes uploaded photo/gallery files:
// Import express and multer.
var express = require('express');
var multer = require('multer');
// Setup upload.
var upload = multer({ dest: 'uploads/' });
var multipleFiles = upload.fields([{ name: 'photo', maxCount: 1 },
{ name: 'gallery', maxCount: 8 }]);
// Setup tinify.
var tinify = require("tinify");
tinify.key = "YOUR_API_KEY";
// Get request handler for '/' path.
var app = express();
app.get('/', function (req, res) {
res.setHeader("Content-Type", "text/html");
res.end(
"<form action='/api/photo' method='post' enctype='multipart/form-data'>" +
"<input type='file' name='photo' />" +
"<input type='file' name='gallery' multiple/>" +
"<input type='submit' />" +
"</form>"
);
});
// Upload file handler with '/api/photo' path.
app.post('/api/photo', multipleFiles, function (req, res) {
req.files['gallery'].forEach(function(file) {
// Your logic with tinify here.
var source = tinify.fromFile(file.path);
source.toFile(file.path + "_optimized.jpg");
});
res.end("UPLOAD COMPLETED!");
});
Feel free to change express middleware how you need it, just make sure you use upload.fields and authenticate using tinify.key = "YOUR_API_KEY";
https://github.com/expressjs/multer
https://tinypng.com/developers/reference/nodejs#compressing-images
I recently worked out a similar problem for myself using the tinify package and found the docs to be somewhat lacking.
I have a Vue front end collecting file uploads from the user using vue2dropzone. These are sent to a node / Express back end.
I have a need to compress the file and upload it to an S3 instance without storing on disk. That means using multer memory storage.
As a result there won’t be an ability to use tinify.fromFile() as there is no file stored locally.
In my images middleware:
Const multer = require(“multer”);
const tinify = require("tinify");
tinify.key = "your_key";
exports.singleFile = multer({ storage: multer.memoryStorage() }).fields([{ name: "file", maxCount: 1 }]);
exports.uploadCompImage = async (req, res, next) => {
try {
const fileName = `${req.params.name}${path.extname(req.files.file[0].originalname)}`;
const source = tinify.fromBuffer(req.files.file[0].buffer);
source.store({
service: "s3",
aws_access_key_id: "your_id",
aws_secret_access_key: "your_key
region: "your_region",
headers: {
"Cache-Control": "public"
},
path: `your_bucket/your_folder/${fileName}`
});
return res.status(200).send(`path_to_file/${fileName}`)
} catch (err) {
console.log(err);
next(err);
}
}
Then in my routes file:
Const images = require(“../middleware/images”);
// skipped several lines for brevity
productRouter
.route("/images/:name")
.post(images.singleFile, images.uploadCompImage)
This process creates a multer singleFile upload to memoryStorage, making the file available at req.files.file[0] (req.files[“file”] because I specified “file” as the name in multer fields, loop through this array if uploading multiple).
After setting that up I get the file name, set the source by using tinify to read from req.files.file[0].buffer as a buffer.
Then I set the source to my s3 instance and send back a public link to the file.
Hopefully this answer helps you. I could definitely see altering the process to change where the file goes or even write it to disk by altering the multer options.