VznMedia

Usage example

Import Module

app.module.ts

import { VznMediaModule } from 'vzn-media';

@NgModule({
  imports: [
    VznMediaModule.forRoot({
      defaultImgSrc: 'assets/images/image_placeholder.png', 
      maxImageSize: 512, 
    })
  ]
})

example.component.ts

import { VznMediaComponent } from 'vzn-media';

export class ExampleComponent {
  @ViewChild('vznMedia', { static: false}) vznMedia: VznMediaComponent;
  uploadUrlService;
  uploadFolder: string;
    .
    .
    .
  ngOnInit() {
    this.restService = this.restApiService.service('users');
    this.uploadUrlService = this.restApiService.service('upload-url');
    this.setFormData( data => {
      this.uploadFolder = `users/${this.id}/`;
    });
  }

  submitted(isNewItem:Boolean): Promise<any> {
    if (isNewItem) {
      return new Promise(async (resolve)=>{
        this.vznMedia.uploadFolder = `users/${this.id}/`;
        await this.vznMedia.upload();
        this.submit();
      });
    }
  }
    .
    .
    .
}

example.component.html

    <vzn-media #vznMedia formControlName="profileImage" 
        [uploadFolder]="uploadFolder" 
        [uploadUrlService]="uploadUrlService"
        [autoUpload]="id!=undefined" 
        (onUploadStart)="submitDisabled = true"
        (onUploadEnd)="(id)?submit(false):0; submitDisabled = false" 
        (onDeleted)="false"
    ></vzn-media>

This library was generated with Angular CLI version 8.2.9.

Code scaffolding

Run ng generate component component-name --project vzn-media to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project vzn-media.

Note: Don't forget to add --project vzn-media or else it will be added to the default project in your angular.json file.

Build

Run ng build vzn-media to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build vzn-media, go to the dist folder cd dist/vzn-media and run npm publish.

Running unit tests

Run ng test vzn-media to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.