CODEWITHSUNDEEP
javascripthtml
Diego
Diego

Reputation: 964

Validate maximum amount of images in input type html5

Hi I want to use an input type for uploading x amount of images. I want an alert to appear after the file Upload closes. I´m only using pure JavaScript for this.

I know I can use the option multiple for accepting multiple images.

<input type="file" accept=".png, .jpg, .jpeg" multiple />

I know I can use the query selector for getting the amount of files. I´m not sure which is the event I should be calling so the below code could run just after the file manager window closes.

amount = document.querySelector('input[type=file]').files 
if (amount > 3){
  alert("Only 3 images are allowed!!!")
}

Thanks for your help

Upvotes: 0

Views: 39

Answers (1)

Edmar Miyake
Edmar Miyake

Reputation: 12390

var input = document.querySelector('input[type=file]');
var form = document.querySelector('#fileup');
input.onchange = function () {
    if (input.files.length > 3){
      alert("Only 3 images are allowed!!!");
      form.reset();
    }
};
<form id="fileup">
<input type="file" accept=".png, .jpg, .jpeg" multiple />
</form>

Upvotes: 1

Related Questions