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";

@NgModule({
    imports: [
        ...,
        ImageUploadModule.forRoot(),
        ...
    ]
})

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

<image-upload
  [max]="100"
  [url]="'example.com/images/upload'"
  [headers]="{Authorization: 'MyToken'}"
  [buttonCaption]="'Select Images!'"
  [dropBoxMessage]="'Drop your images here!'"
  [extensions]="['jpg','png','gif']"
  [uploadedFiles]="['http://example.com/path/to/my/file']"
  [class]="'customClass'"      
  (removed)="onRemoved($event)"
  (uploadFinished)="onUploadFinished($event)"
  (uploadStateChanged)="onUploadStateChanged($event)">
</image-upload>

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'}"

Events
(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