javascripthtmlnode.jsmulti-upload

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

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">
Solution

  • 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