Upload multiple image using angular 10+

In this article, I discuss how to integrate multiple image uploads in our angular application.
For that first, we need to install a module called “angular2-image-upload” using the below command.

npm install angular2-image-upload --save

After installing the module we need to import in app.module.ts file to use the display in the below code how to add code in that file.

import { ImageUploadModule } from "angular2-image-upload";

    imports: [

Now you can use image-upload declaration and you can use it in your Html code. It’s display like below code

  [headers]="{Authorization: 'MyToken'}"
  [buttonCaption]="'Select Images!'"
  [dropBoxMessage]="'Drop your images here!'"

In the above, some attributes for customization explain below

max: maximum number of pictures that can be uploaded through this element.
url: It’s URL where form submit form image data send for upload
buttonCaption: It’s change the button name which display
dropBoxMessage: Dropbox place holder name to change
extensions: Which format image you want to upload
class: custom class name for the image upload container

Custom headers also you can pass using header directive display in below code

[headers]="{Authorization: 'MyToken'}"

(removed)=”onRemoved($event)”: It fired when remove image or clear button was clicked.
(uploadFinished)=”onUploadFinished($event)”: This event is fired when component gets a response from the server by [url] which we used for upload image path.
(uploadStateChanged)=”onUploadStateChanged($event)”: This event is fired when image upload state was changed.

Spread the love