Angular 5: How to upload an image [duplicate]

Question

I am using Angular 5. I have an requirement where I need to upload an image on a page and display the image?

Is there any Angular 5 tag or html tag I can do this?

I am attaching a screen shot what it look like. The user click "upload" button and there should be a pop-up where the user choose the file to upload. After they choose the file to upload and click open button. The image will appear on page?

Any hint or suggestion will be greatly appreciated it!!

Have you checked <input type="file"> ? There are many Angular libraries for processing file uploads and such, a quick Google search may be helpful. — Deepak Kamat
– Deepak Kamat, Commented Jan 19, 2018 at 15:00
Refer this stackoverflow.com/questions/47936183/angular-file-upload — core114
– core114, Commented Sep 6, 2018 at 7:10

Samy Sammour · Accepted Answer · 2020-05-25 14:05:34Z

8

You can use the tag from HTML:

<input type="file" name="file" id="file" (change)="onFileChanged($event)" />

and in the component:

public files: any[];

contructor() { this.files = []; }

onFileChanged(event: any) {
  this.files = event.target.files;
}

onUpload() {
  const formData = new FormData();
  for (const file of this.files) {
      formData.append(name, file, file.name);
  }
  this.http.post('url', formData).subscribe(x => ....);
}

The formData will hold the stream to your upload.

P.S. you can mark the HTML with the attribute: "multiple" and you can upload multiple data if your server can handle it.

edited May 25, 2020 at 14:05

answered Jan 19, 2018 at 15:09

Samy Sammour

2,4553 gold badges35 silver badges70 bronze badges

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

Collectives™ on Stack Overflow

Angular 5: How to upload an image [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related