How do I make the user upload a set amount of pictures at once in a web app?

Question

I have a web app written in Node,js where I want the user to be able to submit his images if they took a set amount of pictures using their mobile phones, e.g. 20 pictures (they cannot submit more or less). I know I can collect an image in html using the following line, but don't quite know how to enforce the only upload if the user has taken x pictures rule.

<input type="file" accept="image/*" capture="user">

Answer 1

Simplest solution

You can get the number of files selected in the input simply from input.files.length.

This code snippet should help you. I have inserted comments in code to clarify it, comments also contain code you should use for a better experience.

If you are not an ES6 person check out the snippet below. Also, check out the Further Reading section at the bottom of this answer.

const theInput = document.getElementById('theInput');
const theChooser = document.getElementById('theChooser');

let theNumber; //Or "let theNumber = your-default-number" if you want to avoid possible error when user selected 0 files

theChooser.oninput = () => {
  theNumber = theChooser.value * 1 //Multiplying it to 1 will make the (already number) input a number anyways
}

theInput.onchange = () => {
  theInput.files.length === theNumber ? theFunction() : theWarning()
  // To do nothing when user selected 0 files (user clicked Cancel) do this
  /*
  theInput.files.length === theNumber ? theFunction() : theInput.files.length === 0 ? null : theWarning()
  */
}

function theFunction() {
  console.log(`You chose exactly ${theNumber} files. Yay!`);
}

function theWarning() {
  console.log(`¯\\_(ツ)_/¯ Watcha doing, you told to choose only ${theNumber} files.`);
}

<input type="number" id="theChooser" placeholder="Set your number of files">
<br>
<input type="file" id="theInput" multiple>

Not familiar with ES6, see this snippet. Comparing both snippets will help you get familiar with ES6.

const theInput = document.getElementById('theInput');
const theChooser = document.getElementById('theChooser');

let theNumber; //Or "let theNumber = your-default-number" if you want to avoid possible errors when user selected 0 files

theChooser.addEventListener('input', function() {
  theNumber = theChooser.value * 1; //Multiplying it to 1 will make the (already number) input a number anyways
})

theInput.addEventListener('change', function() {
  if (theInput.files.length === theNumber) {
    theFunction();
  } else {
    theWarning();
  }
  // To do nothing when user selected 0 files (user clicked Cancel) do this
  /*
  if (theInput.files.length === theNumber) {
    theFunction();
  } else if (theInput.files.length === 0) {
  } else {
    theWarning();
  }
  */
})

function theFunction() {
  console.log("You chose exactly " + theNumber + " files. Yay!");
}

function theWarning() {
  console.log("¯\\_(ツ)_/¯ Watcha doing, you told to choose only " + theNumber + " files.");
}

<input type="number" id="theChooser" placeholder="Set your number of files">
<br>
<input type="file" id="theInput" multiple>

Further Reading

• input type="file" on MDN
• input event listener on MDN
• change event listener on MDN

Answer 2

You can refer sample as, You need to use 'multiple' keyword in HTML as,

<input type="file" name="userPhoto" multiple />

IMHO, Multer is one of the good npm package to handle file upload. You can configure the no. of files you wanna allow uploading

 var upload = multer({ storage : storage }).array('userPhoto',20);

Sample Node.JS code

var bodyParser = require("body-parser");
var multer = require('multer');
var app = express();

app.use(bodyParser.json());

var storage = multer.diskStorage({
  destination: function (req, file, callback) {
    callback(null, './uploads');
  },
  filename: function (req, file, callback) {
    callback(null, file.fieldname + '-' + Date.now());
  }
});

var upload = multer({ storage : storage }).array('userPhoto',20); // here you can set file limit to upload

app.get('/',function(req,res){
      res.sendFile(__dirname + "/index.html");
});

app.post('/api/photo',function(req,res){
    upload(req,res,function(err) {
        //console.log(req.body);
        //console.log(req.files);
        if(err) {
            return res.end("Error uploading file.");
        }
        res.end("File is uploaded");
    });
});

app.listen(3000,function(){
    console.log("Working on port 3000");
});

Answer 3

To allow multiple file upload you'll have to include the multiple attribute in the input tag.

<input type="file" accept="image/*" capture="user" multiple="true" id="file-inp" />

You should validate the number of files uploaded on the client and alert the user incase of wrong action.

$('#file-inp').change(function() {
    var files = $(this)[0].files;
    if(files.length != 20){
        alert("only a total of 20 files should be uploaded");
    }
    //enter code here
});