How to avoid input type file to add multiple files?

Question

I want to take only one file as input whenever i choose a file i want to take new one but my current code taking more than one file.

 <input id="input-file" type="file" name="file" (change)="onFileSelected($event)" accept="application/pdf;image/jpeg;image/gif;image/tif;image/tiff;image/jpg;image/png;application/vnd.openxmlformats-officedocument.presentationml.presentation" />

typescript code:

 onFileSelected(event){
    let file = event.target.value;

}

input [type="file"] always returns a FileList, even if it's just one file. To retrieve the file, use fileList[0] — LordAlpaca
– LordAlpaca, Commented Aug 9, 2018 at 12:57

Chellappan வ · Accepted Answer · 2018-08-09 13:03:03Z

1

If you want to upload One File

Html

<input type='file' accept="application/pdf;image/jpeg;image/gif;image/tif;image/tiff;image/jpg;image/png;application/vnd.openxmlformats-officedocument.presentationml.presentation" (change)="onSelectFile($event)" >

ts

 onSelectFile(event) {
        if (event.target.files && event.target.files[0]) {                         
                    var reader = new FileReader();        
                    reader.onload = (event) => {
                      console.log(event.target.result);
                       this.urls=event.target.result; 
                    }

                    reader.readAsDataURL(event.target.files[0]);
            }
        }

Example:https://stackblitz.com/edit/angular-multi-file-upload-preview-qt5zrt

answered Aug 9, 2018 at 13:03

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to avoid input type file to add multiple files?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related