[FIXED] How to limit the maximum uploads in Angular

Issue

How should i limit the maximum 5 uploads in a single input file in angular

<input type="file" class="form-control" id="inputGroupFile" 
onChange="uploadMultipleFiles($event)" > 

app.component.ts:

uploadMultipleFiles(files) {
  if (files.length > 3) {
   this.alertService.error("length exceeded; files have been truncated");
   let list = new DataTransfer;
   for (let i = 0; i < 3; i++)
    list.items.add(files[i]);
  }
}

Thanks

Solution

Like the below code, you can prevent the limit of file upload.

filesData(files, event): void {
  
    if (event.target.files.length > 5) {
      alert("Only 5 files allow");

      event.preventDefault();
      event.value = ""; // clear the older value 
    } else {
        //Put your Business logic here
    }
  }

Also, pass the $event as an argument to the function on the calling the onChange method.

 <input type="file" multiple #file (change)="filesData($event)" />

Answered By - Meet

Answer Checked By - Gilberto Lyons (PHPFixing Admin)