Upload multiple images - NodeJS & Amazon S3 - node.js

I have been able to set up a process to upload a single image at a time using NodeJS/Express/Amazon S3/ Multer. It works perfectly. I've been trying to change the code to allow users to upload more than one image at a time. So far I have been very unsuccessful. How would I change my code below to allow multiple images to be uploaded at once? Thanks!
aws.config.update({
secretAccessKey: '*****************',
accessKeyId: '******',
region: 'us-east-2'
});
var s3 = new aws.S3();
var upload = multer({
storage: multerS3({
s3: s3,
bucket: 'myfiles',
key: function (req, file, cb) {
var fileExtension = file.originalname.split(".")[1];
var path = "uploads/" + req.user._id + Date.now() + "." + fileExtension;
cb(null, path);
}
})
});
router.post("/", upload.array('image', 1), function(req, res, next){
var filepath = undefined;
if(req.files[0]) {
filepath = req.files[0].key;
}......

you have done the hard part, all what u have to do is to modify your html file input to make it accept multiple files like so
<input type="file" name="img" multiple>
and change the number of files in the array to the maximum number of files you wan to upload
from
upload.array('image', 1)
to
upload.array('image', x)
where (x) is the maximum number of files per upload
EDIT1 : update
Here is kind of full example & to avoid "too large entity issue"
var express = require("express");
var app = express();
var multer = require('multer');
var cookieParser = require('cookie-parser');
var path = require('path');
var router = express.Router();
app.use("/", router);
app.use(bodyParser.json({limit: "50mb"}));
app.use(cookieParser());
var urlencodedParser = bodyParser.urlencoded({
extended: true,
parameterLimit: 50000
});
// in case u want to c the requsted url
router.use(function(req, res, next) {
console.log('Request URL: ', req.originalUrl);
next();
});
//the files will b uploaded to folder name uploads, html file input name is uploadedFile
app.post('/your/route', urlencodedParser, function(req, res) {
var storage = multer.diskStorage({
destination: function(req, file, callback) {
callback(null, './uploads');
},
filename: function(req, file, callback) {
var fname = file.fieldname + '-' + Date.now() + path.extname(file.originalname);
callback(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
}
});
var upload_photos = multer({
storage: storage
}).array('uploadedFile', 3);
upload_photos(req, res, function(err) {
// uploading files
});
});

https://www.npmjs.com/package/multer-s3
You can use this npm package for aws-s3 upload. I have used the same and saving files without any issue.

Related

Multer 'storage' option does not work while 'dest' one does

I'm using Multer to upload and store files. If I use the dest option files upload to my /uploads folder with no problem. Whilst this works, it's saving the uploads like 2eb3f1a6def453f7a461c5de353b06f8 so I want to use the storage option, but for some reason this doesn't work or me and the files upload (logged in console), but wont save to the folder.
I've tried a few different ways of achieving this and none work. Can anyone point out what might be wrong?
{
fieldname: 'attachments',
originalname: 'myFile.pdf',
encoding: '7bit',
mimetype: 'application/pdf',
destination: 'uploads/',
filename: '2eb3f1a6def453f7a461c5de353b06f8',
path: 'uploads/2eb3f1a6def453f7a461c5de353b06f8',
size: 57638
}
const express = require('express');
const app = express();
const multer = require("multer");
const path = require('path');
// const upload = multer({ dest: "uploads/" }); // this works, file saves to /uploads
var upload = multer({ storage: storage }); // this doesnt work/ files dont save to /uploads
// Parse URL-encoded bodies (as sent by HTML forms)
app.use(express.urlencoded());
// Parse JSON bodies (as sent by API clients)
app.use(express.json());
var storage = multer.diskStorage({
destination: function(req, file, cb) {
// cb(null, 'uploads/');
// cb(null, __dirname + '/uploads');
cb(null, './uploads');
},
filename: function (req, file, cb) {
// cb(null , file.originalname);
// cb(null, file.fieldname + '-' + Date.now());
// By default, multer removes file extensions so let's add them back
cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
}
});
// var upload = multer({ storage: storage });
app.post('/', upload.array('attachments') , (req, res) =>{
try {
res.send(req.files);
console.log('body', req.body);
console.log('files', req.files);
} catch(error) {
console.log(error);
res.send(400);
}
});
module.exports = {
path: '/api/upload',
handler: app
};
Declaring var upload = multer({ storage: storage }) after having it defined with multer.diskStorage was enough to fix OP's issue.

SyntaxError: Unexpected token - in JSON at position 0,While uploading pdf files in postman

Controller.js
var multer = require('multer');
var upload = (req, res) => {
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './uploads/');
},
filename: function (req, file, cb) {
var dateTimestamp = Date.now();
cb(null, file.originalname.split('.')[file.originalname.split('.').length - 2] + '-' + dateTimestamp + '.' + file.originalname.split('.')[file.originalname.split('.').length - 1]);
}
});
var upload = multer({
storage: storage
}).single('file');
upload(req, res, function (err) {
console.log(req.file);
if(err) {
res.json({ error_code: 1, err_desc: err });
return;
}
res.json("File uploaded sucessfully");
});
};
module.exports ={
upload:upload
}
app.js
var mongoose = require("mongoose");
var multipart = require('connect-multiparty');
app.use(cors({origin:true, credentials:true}));
app.use(bodyParser.json({limit: '50mb'}));
app.use(bodyParser.urlencoded({limit: '50mb',extended: true}));
app.use(multipart({}));
mongoose.Promise = global.Promise;
mongoose.connect("mongodb://127.0.0.1:27017/mydb");
var UploadRouter =require('./upload/uploadRouter/upload-doc-router');
app.use('/upload', UploadRouter);
var PORT = process.env.PORT || 4000;
app.listen(PORT, function(){
console.log('Running on Port 4000...');
});
router:
var express =require("express");
var URouter = express.Router();
var Upload = require('../uploadControllers/upload-doc-controllers');
URouter.route('/single/file').post(Upload.upload);
module.exports =URouter;
Above are the my code.I want to upload pdf,word document and store in one folder.when i test the api getting syntax error Unexpected token - in JSON at position 0 , JSON.parse (<anonymous>), createStrictSyntaxError like that shows error in postman .when i choose file in pdf then send the request to the api.
I removed headers and in body section i select form-data

Set Upload Directory dynamically when uploading a file in NodeJs

I am a novice at NodeJS and I created a service to upload images to a shared location. However, I need to set the upload folder dynamically based on the user id: for e.g. the folder will be /uploads/{userid}/file.txt
I am not sure how to do it and I have been searching today with no luck.
The NodeJS service looks like:
var express = require('express')
var multer = require('multer')
var Storage = multer.diskStorage({
destination: function (req, file, callback) {
callback(null, "./Uploads");
},
filename: function (req, file, callback) {
callback(null, file.fieldname + "_" + Date.now() + "_" +
file.originalname);
}
});
var upload = multer({ Storage: Storage })
var app = express()
app.post('/upload', upload.array('uploads[]', 12), function (req, res, next)
{
return res.end("Files uploaded sucessfully!.");
})
Thank you for the help.
Try this
app.use(multer({
dest: './uploads/',
"rename" : function (fieldname, filename, req, res) {
return path.join(fieldname, req.params.user_id+".txt");
}
})

How to access uploaded file from multer?

Im able to upload an image to S3. Now, if the file selected is .gif, I want to be able to convert the .gif file to .mp4 and upload the converted file to S3. I am able to convert a .gif to .mp4 with ffmpeg only if I give the path of the file. How do I access the uploaded file from Multer? Below is my code :
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
var aws = require('aws-sdk');
var multer = require('multer');
var multerS3 = require('multer-s3');
var s3 = new aws.S3();
var ffmpeg = require('fluent-ffmpeg');
var upload = multer({
storage: multerS3({
s3: s3,
bucket: 'myBucket',
key: function (req, file, cb) {
console.log(file);
var extension = file.originalname.substring(file.originalname.lastIndexOf('.')+1).toLowerCase();
if(extension=="gif"){
console.log("Uploaded a .gif file");
ffmpeg(file) //THIS IS NOT WORKING
.setFfmpegPath("C:\\ffmpeg\\bin\\ffmpeg.exe")
.output('./outputs/2.mp4') //TRYING TO UPLOAD LOCALLY, WHICH FAILS
.on('end', function() {
console.log('Finished processing');
})
.run();
}
cb(null, filename);
}
})
});
I'm trying to access the uploaded file like this: ffmpeg(file) since file is an argument passed in the multer function.
My form :
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="file"> <br />
<input type="submit" value="Upload">
</form>
In which part of the process do I convert the file?
Please help. Many thanks.
You are trying to process a file locally that's on s3. The file needs to be your server's file system or at the very least be publicly available on s3. So you have two options here.
a) You could first upload all the files to the server where express is running (not on s3, first we store them temporarily). If the file is a .gif, process it and upload the resulting .mp4 file, otherwise upload to s3. Here's a working example:
var fs = require('fs')
var path = require('path')
var express = require('express');
var bodyParser = require('body-parser');
var aws = require('aws-sdk');
var multer = require('multer');
var ffmpeg = require('fluent-ffmpeg');
var shortid = require('shortid');
aws.config.update(/* your config */);
var app = express();
var s3 = new aws.S3();
var bucket = 'myBucket';
var upload = multer({
storage: multer.diskStorage({
destination: './uploads/',
filename: function (req, file, cb){
// user shortid.generate() alone if no extension is needed
cb( null, shortid.generate() + path.parse(file.originalname).ext);
}
})
});
//----------------------------------------------------
app.post('/upload', upload.single('file'), function (req, res, next) {
var fileInfo = path.parse(req.file.filename);
if(fileInfo.ext === '.gif'){
var videoPath = 'uploads/' + fileInfo.name + '.mp4';
ffmpeg(req.file.path)
.setFfmpegPath("C:\\ffmpeg\\bin\\ffmpeg.exe")
.output(videoPath)
.on('end', function() {
console.log('[ffmpeg] processing done');
uploadFile(videoPath, fileInfo.name + '.mp4');
})
.run();
}
else {
uploadFile(req.file.path, req.file.filename);
}
res.end();
});
//----------------------------------------------------
function uploadFile(source, target){
fs.readFile(source, function (err, data) {
if (!err) {
var params = {
Bucket : bucket,
Key : target,
Body : data
};
s3.putObject(params, function(err, data) {
if (!err) {
console.log('[s3] file uploaded:');
console.log(data);
fs.unlink(source); // optionally delete the file
}
else {
console.log(err);
}
});
}
});
}
app.listen(3000);
b) Alternatively if you're ok with making your s3 files public you could upload them all using multer-s3. Since ffmpeg also accepts network locations as input paths you can pass it the s3 location of your .gif files and then upload the converted .mp4 files:
var fs = require('fs')
var path = require('path')
var express = require('express');
var bodyParser = require('body-parser');
var aws = require('aws-sdk');
var multer = require('multer');
var ffmpeg = require('fluent-ffmpeg');
var multerS3 = require('multer-s3');
aws.config.update(/* your config */);
var app = express();
var s3 = new aws.S3();
var bucket = 'myBucket';
var upload = multer({
storage: multerS3({
s3: s3,
bucket: bucket,
key: function (req, file, cb) {
cb(null, file.originalname);
},
acl: 'public-read'
})
});
----------------------------------------------------
app.post('/upload', upload.single('file'), function (req, res, next) {
var fileInfo = path.parse(req.file.originalname);
if(fileInfo.ext === '.gif'){
var videoPath = 'uploads/' + fileInfo.name + '.mp4';
ffmpeg(req.file.location)
.setFfmpegPath("C:\\ffmpeg\\bin\\ffmpeg.exe")
.output(videoPath)
.on('end', function() {
console.log('[ffmpeg] processing done');
uploadFile(videoPath, fileInfo.name + '.mp4');
})
.run();
}
res.end();
})
//----------------------------------------------------
function uploadFile(source, target){
fs.readFile(source, 'base64', function (err, data) {
if (!err) {
var params = {
Bucket : bucket,
Key : target,
Body : data,
ContentType : 'video/mp4'
};
s3.putObject(params, function(err, data) {
if (!err) {
console.log('[s3] file uploaded:');
console.log(data);
fs.unlink(source); // optionally delete the file
}
else {
console.log(err);
}
});
}
});
}
app.listen(3000);
For both examples, remember to create an uploads/ folder and use your aws configuration.

Multer not adding file extension

I'm working on a Node.js/MongoDB based website and i'm trying to upload images directly on server using Express, Jade, and Multer, but no matter what i do, i can't achive to upload the file with extension.
I've got this on my app.js file:
var express = require('express');
var mongoose = require('mongoose');
var bodyParser = require('body-parser');
var multer = require('multer');
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './uploads')
},
filename: function (req, file, cb) {
cb(null, file.originalname)
}
});
var upload = multer({ storage: storage });
var app = express();
mongoose.connect("mongodb://localhost/primera_pagina");
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.use(multer({dest: "./uploads"}).single("image_avatar"));
var productSchema = {
title:String,
description:String,
imageURL:String,
pricing:Number
};
var Product = mongoose.model("Product", productSchema);
app.set("view engine","jade");
app.use(express.static("public"));
app.get("/",function(req,res){
res.render("index");
});
app.post("/productos",function(req,res){
if(req.body.password == "123"){
var data = {
title: req.body.title,
description: req.body.description,
imageURL: "image_avatar",
pricing: req.body.pricing
}
var product = new Product(data);
console.log(req.file)
}else{
res.render("index");
}
});
app.get("/productos/new",function(req,res){
res.render("productos/new");
});
app.listen(8080);
Any idea? I've search on Internet and tried every single method to add file extension with multer, but none has worked.
Multer strips the file extension for both security and collision reasons. For a workaround, try this:
var path = require('path')
var multer = require('multer')
var mime = require('mime-types')
var storage = multer.diskStorage({
destination: './uploads/',
filename: function (req, file, cb) {
crypto.pseudoRandomBytes(16, function (err, raw) {
if (err) return cb(err)
cb(null, raw.toString('hex') + mime.extension(file.mimetype))
})
}
})
var upload = multer({ storage: storage })
(from https://github.com/expressjs/multer/issues/170#issuecomment-123402678)
It assigns a random file name, but keeps the file extension in tact.
You should also be using the authorize field in multer, since it looks like you only want files when the user has the correct password. Do something like this:
var upload = multer({ storage: storage }, limits : { fileFilter: authorize });
function authorize(req, file, cb) {
if (req.body.password == PASS) {
cb(null, true); //accept
} else {
cb(null, false); //reject
}
}
This will only save the file to disk if the user has inputted the correct password.
You can pass the right parameters for Multer like this in order to save the file extension:
var multer = require('multer');
var path = require('path')
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/')
},
filename: function (req, file, cb) {
cb(null, Date.now() + path.extname(file.originalname))
}
})
var upload = multer({ storage: storage });

Resources