Html input type file

Question

I'm working on an application, I have to upload more than 4k files with Angular 5 and Html, I'm using input type file but after I select all files I can't see the files and if I check the event target I can see the length of the list is 0. So is it a limitation from Html and input ? And their is a solution to avoid this problem ? Best regards Quentin

post your angular code here with html – Dipak Feb 12 '18 at 17:08 — Dipak, Feb 12 '18 at 17:08
Have you added the attribute multiple? `` – Germano Plebani Feb 12 '18 at 17:08 — Germano Plebani, Feb 12 '18 at 17:08

score 1 · Answer 1 · answered Feb 12 '18 at 22:00

In Angular applications you should use (change)-event on your file input-tag. In this change-event you should call an function, which handles the event value. Give to this function your files. Here is an example:

<div class="form-group">
    <label for="file">Choose File</label>
    <input type="file"
           id="file"
           (change)="handleFileInput($event.target.files)" multiple>
</div>

In your component.ts file you should create handleFileInput function. In this function you can manage selected files. Define an global variable for single (of type File) or for multiple files (of array type File[]). Here is an example:

singleFileToUpload: File = null;
multipleFilesToUpload: File[] = [];

handleFileInput(files: FileList) {
    this.singleFileToUpload = files.item(0);
    this.multipleFilesToUpload = files;
}

After that you can upload a single file or iterate multiple files and upload that. Beware: use FormData to uplaod file to API via POST.

Here is an answer, which have good explanation about file upload in angular.

hello there, when I use `$event.target.files` as an argument, it fails to compile. I came here from your other post, and everything works well except for this part, what could possibly be wrong here? I am using Angular 12 , thanks for your attention — Sadaf Shafi, Aug 06 '21 at 15:02

Html input type file

1 Answers1