Angular2 file input onchange

Question

I have input file (without submit - typicall input file). I'd like to call some function when chose file.

Example: I click on "Choose file" -> choose file -> now system detects change and call some function which prints all these file information (for example image name).

I can't use ngModel on input file, right? How to do that?

hirse · Accepted Answer · 2017-06-29 12:55:12Z

57

Use the following in your template:

<div class="modal-body">
   <input type="file" (change)="fileChangeEvent($event)" placeholder="Upload file..." />
   <img id="preview" src="" alt="Preview">
</div>

Then your Component fileChangeEvent() as

public fileChangeEvent(fileInput: any){
      if (fileInput.target.files && fileInput.target.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e : any) {
            $('#preview').attr('src', e.target.result);
        }

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

All Your File related info will console....

edited Jun 29, 2017 at 12:55

hirse

2,4121 gold badge23 silver badges25 bronze badges

answered Jul 20, 2016 at 8:44

Double H

4,1901 gold badge17 silver badges27 bronze badges

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

4 Comments

elzoy Over a year ago

Thank you, it works. Have you any idea how could I be able to display selected photo? There is no path in fileInput.target.files response.

Martijn van den Bergh Over a year ago

And what if i have to submit/upload the same file two times? the change event isn't fired if i choose the same file twice. Is there some sort of submit event i can use?

chrismarx Over a year ago

Is there a type we can use here instead of "any"? I've got any disabled in my project

Zhang Buzz Over a year ago

@MartijnvandenBergh see Chris answer below.

Kamalpreet · Accepted Answer · 2017-07-11 15:19:17Z

7

Here's my amendments to Double H's answer to not rely on jQuery and stop the webpack erroring out on e.target.result.

<img [src]="imageSrc" alt="" />
<input type="file" capture="camera" accept="image/*" (change)="displayPhoto($event)">

Typescript Code

displayPhoto(fileInput) {
  if (fileInput.target.files && fileInput.target.files[0]) {
  const reader = new FileReader();

  reader.onload = ((e) => {
    this.imageSrc = e.target['result'];
  });

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

}

answered Jul 11, 2017 at 15:19

Kamalpreet

1,17310 silver badges13 bronze badges

Comments

Chris · Accepted Answer · 2017-06-30 21:48:25Z

5

Double H's function didn't work for me till I added onclick="this.value = null" as found here: https://stackoverflow.com/a/42357862/634650

answered Jun 30, 2017 at 21:48

Chris

2,0663 gold badges26 silver badges40 bronze badges

Collectives™ on Stack Overflow

Angular2 file input onchange

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related