looking to upload multiple images with express-fileupload

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>

score 3 · Answer 1 · answered Mar 28 '19 at 11:10

3

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

answered Mar 28 '19 at 11:10

Rubin bhandari

1,873
15
20

No files in req.files when I upload from – Extrange planet Aug 25 '22 at 19:00

karuna jaiswal · Answer 2 · 2022-07-06T12:07:10.717

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()
 }
}

score 0 · Answer 3 · answered Sep 10 '20 at 06:41

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');
  }
})

Kevin Muchwat · Answer 4 · 2022-03-27T11:35:37.157

0

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 });
});

edited Mar 27 '22 at 11:35

answered Dec 12 '21 at 17:08

Kevin Muchwat

1,445
18
18

1

Server is crashing if i Send 1 file. – Najam Us Saqib Mar 25 '22 at 10:40
Please ensure that you set up express-fileupload package correctly – Kevin Muchwat Mar 25 '22 at 11:34
1

Yes, I just copied your code its working with Multiple Files but if i send 1 file its not working. – Najam Us Saqib Mar 25 '22 at 12:04
1

I've just updated my code please try and let me know if it works for both single and multiple files – Kevin Muchwat Mar 26 '22 at 11:14
1

it worked now with single file. Thanks. But can you explain what was happening with single file in your previous example. – Najam Us Saqib Mar 27 '22 at 09:19
Great, what happens is that "req.files.images" returns an array when multiple files are uploaded while it returns a JSON object on a single file upload. – Kevin Muchwat Mar 27 '22 at 11:24
I did check `typeof` for both single and multiple files and both time i got `Object`. thats where i got confused. – Najam Us Saqib Mar 28 '22 at 07:18
1

I get you, both JSON and Arrays are of type Object, always use Array.isArray(test) to check if an object is an array or use test.length != undefined – Kevin Muchwat Mar 28 '22 at 08:37
Ah okay. Thanks for you help. – Najam Us Saqib Mar 28 '22 at 09:43
"No image uploaded" for multiple files. Any solution? – Extrange planet Aug 25 '22 at 19:30

looking to upload multiple images with express-fileupload

4 Answers4