@khanhvuongnh/media-upload v13.0.5

Table of contents

1. Usage & Demo
2. Installation
3. Compatibility

Usage & Demo

You can view a live demo here:

Installation

Install bootstrap from npm:

npm install bootstrap

Install ngx-bootstrap from npm:

npm install ngx-bootstrap

Install @khanhvuongnh/media-upload from npm:

npm install @khanhvuongnh/media-upload

Important

Copy assets folder from node_modules to assets folder of current project.

Add module to NgModule imports:

import { MediaUploadModule } from '@khanhvuongnh/media-upload';

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

Add to demo.component.ts:

import { Component } from '@angular/core';
import { UploadMediaResponse } from '@khanhvuongnh/media-upload';

@Component({...})
export class DemoComponent {
  file: File;
  base64: string;
  src: string;

  mediaChanged(item: UploadMediaResponse) {
    console.log(item);
  }

  submit() {
    console.log(this.file);
    console.log(this.base64);
  }
}

Add to demo.component.html:

<div style="width: 200px; margin: 5rem;">
  <media-upload
    [buttonUpload]="true"
    [buttonRemove]="true"
    [hoverEffect]="false"
    [src]="src"
    [openLinkInNewTab]="false"
    [(file)]="file"
    [(base64)]="base64"
    (response)="mediaChanged($event)">
  </media-upload>

  <button class="btn btn-success mt-5" (click)="submit()">Submit</button>
</div>

Compatibility

Three dependencies are Angular, Bootstrap and Ngx-Bootstrap. Here is the versions compatibility list: