looking to upload multiple images with express-fileupload - node.js

Question

looking to upload multiple images i am able to do it individually as in code but now i want all gallery images to be sent in a single input and support multiple uploads without restricting numbers here is my code.
router.post('/add-product', isAdmin, function (req, res, next) {
console.log(req.files);
errorMsg = req.flash('error')[0];
successMsg = req.flash('success')[0];
var imageFile, imageFile1, imageFile2, imageFile3;
if (!req.files) {
res.send('No files were uploaded.');
return;
}
imageFile = req.files.imageFile;
imageFile1 = req.files.imageFile1;
imageFile2 = req.files.imageFile2;
imageFile3 = req.files.imageFile3;
imageFile.mv('public/images/' + req.user._id + req.body.code + req.body.name + '.png', function (err) {
if (err) {
res.status(500).send(err);
}
});
imageFile1.mv('public/images/' + req.user._id + req.body.code + req.body.name + 'g1' + '.png', function (err) {
if (err) {
res.status(500).send(err);
}
});
imageFile2.mv('public/images/' + req.user._id + req.body.code + req.body.name + 'g2' + '.png', function (err) {
if (err) {
res.status(500).send(err);
}
});
imageFile3.mv('public/images/' + req.user._id + req.body.code + req.body.name + 'g3' + '.png', function (err) {
if (err) {
res.status(500).send(err);
}
});
product = new Product({
name: req.body.name,
code: req.body.code,
Wifi: req.body.Wifi,
campfire: req.body.campfire,
Pool: req.body.Pool,
parking: req.body.parking,
title: req.body.title,
Duration: req.body.Duration,
Product_Group: req.body.Product_Group,
price: parseFloat((req.body.price * 100).toFixed(2)),
description: req.body.description,
shippable: req.body.shippable,
taxable: req.body.taxable,
category: req.body.category,
Longitude: req.body.Longitude,
Latitude: req.body.Latitude,
imagePath: '/images/' + req.user._id + req.body.code + req.body.name + '.png',
imagePathg1: '/images/' + req.user._id + req.body.code + req.body.name + 'g1' + '.png',
imagePathg2: '/images/' + req.user._id + req.body.code + req.body.name + 'g2' + '.png',
imagePathg3: '/images/' + req.user._id + req.body.code + req.body.name + 'g3' + '.png',
});
console.log(product);
product.save(function (err) {
if (err) {
req.flash('error', 'Error: ' + err.message);
return res.redirect('/admin/products');
}
//console.log("product: " + product);
return res.redirect('/admin/products');
});
});
the front part is as in the below code html part of the same with different inputs for different images but now looking to make multiple inputs for the same the node module supporting the function is express-fileupload
<div class="form-group">
<ul class="list-group">
<li class="list-group-item">
<label for='imageFile'>Display Image</label>
<input type='file' name='imageFile' class='form-control'>
</li>
</ul>
</div>
<div class="form-group">
<ul class="list-group">
<li class="list-group-item">
<label for='imageFile1'>Gallery1</label>
<input type='file' name='imageFile1' class='form-control'>
</li>
</ul>
</div>
<div class="form-group">
<ul class="list-group">
<li class="list-group-item">
<label for='imageFile2'>Gallery2</label>
<input type='file' name='imageFile2' class='form-control'>
</li>
</ul>
</div>
<div class="form-group">
<ul class="list-group">
<li class="list-group-item">
<label for='imageFile3'>Gallery3</label>
<input type='file' name='imageFile3' class='form-control'>
</li>
</ul>
</div>

Answer 1

You can do something like this
if(req.files){
const file = req.files.filename;
for(let i = 0 ; i < file.length; i++){
file[i].mv('./upload/'+file[i].name, function (err){
if(err){
res.send(err);
}
})
}
res.send('files uploaded);
}
Make sure to change the upload directory to ur directory

Answer 2

Using express-fileupload, I uploaded multiple and single images
if (!req.files) {
next()
}
else {
//for uploading mutiple images
var uploadedFiles = []
// images is a field name
uploadedData = req.files.images
if(uploadedData.length > 1){
for (let i = 0; i < uploadedData.length; i++) {
const uploadPath = path.join(__dirname, '..', '/uploads/',
uploadedData[i].name)
const fileName = path.join(__dirname, '..', '/uploads/',
uploadedData[i].name)
uploadedFiles.push(fileName)
res.filepath = uploadedFiles
uploadedData[i].mv(uploadPath, function (err) {
if (err) {
res.send(err);
}
})
}
}
else{
// for single image
const uploadPath = path.join(__dirname, '..', '/uploads/', uploadedData.name)
const fileName = path.join(__dirname, '..', '/uploads/', uploadedData.name)
uploadedFiles.push(fileName)
res.filepath = uploadedFiles
uploadedData.mv(uploadPath, function (err) {
if (err) {
res.send(err);
}
})
}
next()
}
}

Answer 3

In this code I am trying to save a file in the ./uploads folder and entering the details into a database as i move each file, also i am changing the file name as they get moved to the uploads folder with a unique name. I used a library called uniqueFilename for this you can omit the uniqueFilename and database operations as per your need. Also var ext is used to store the extension of that file and used later to add in the database..
You can also call savemulti to save a single file.
const savemulti = async (file)=>{
var filename = file.name
var re = /(?:\.([^.]+))?$/;
var ext = re.exec(filename)[1];
var nm = uniqueFilename('')
file.mv('./uploads/'+nm+'.'+ext,(err)=>{
if(err){
throw err
}else{
var sql3 = "insert into your_db_name (name1,name2,filetitle,mime_type,file_size,upload_date) values (?)";
var date = new Date();
var values = [filename,nm+'.'+ext,filename,file.mimetype,file.size,date]
con.query(sql3,[values],(err,result)=>{
if(err){throw err}
console.log("Inserted")
})
}
})
return Promise
}
const savefiles = async (filesarray)=>{
for(const file of filesarray)
{
await savemulti(file)
}
return Promise.resolve(1)
}
app.post('/testfileupload',async (req,res)=>{
if(req.files)
{
console.log(req.files)
const file = req.files.Upload
try{
if(Array.isArray(file))
{
await savefiles(file).then(()=>{
res.status(200).send("File uploaded")
})
}
}catch(err){
return res.status(404).send('an error occured')
}
}else{
res.status(404).send('no file attached');
}
})

Answer 4

Front end:
<form method="POST" action=".../add-product" enctype="multipart/form-data">
<input multiple type="file" name="images" />
<input type="submit" />
</form>
Back end:
app.post('/add-product', async (req, res) => {
if (!req.files) {
return res.send({
success: false,
message: 'No image uploaded!'
});
}
const file = req.files.images;
const data = [];
function move(image) {
try { image.mv('public/images/' + image.name); }
catch (e) {
return res.send({
success: false,
message: 'upload error'
});
}
data.push({
name: image.name,
mimeType: image.mimetype,
size: image.size
});
}
Array.isArray(file) ? file.forEach((file) => move(file)) : move(file);
return res.send({ success: true, message: 'uploaded successfully', data });
});