PdeioNgxFileUploader

This library was generated with Angular CLI version 11.2.3. This library uploads images/audio files to a server. In request formdata you can add following:

• custom HttpHeaders (if you have to send an XSRF-TOKEN for example),
• extra fields

Tutorial

app.module

...
import { HttpClientModule } from '@angular/common/http';
import { PdeioNgxFileUploaderModule } from 'pdeio-ngx-file-uploader';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    HttpClientModule,
    PdeioNgxFileUploaderModule
    /*
        or change its server config defaults
        PdeioNgxFileUploaderModule.forRoot({
            postMaxSize: 128,
            maxUploads: 50,
            maxFileSizeInMB: 6,
            multiplePreview: false,
    })
    */
  ],
  ...
})
export class AppModule { }

app.component.html

<!-- with bootstrap classes -->
<div class="container">
  <button class="btn btn-warning" (click)="fileUploader.openFileDialog()" type="button">choose photos</button>
  <button class="btn btn-success" (click)="onSave();" type="button">save</button>

  <file-uploader #fileUploader (uploadingStatus)="sendNotification($event)"></file-uploader>

  <!-- Preview Image -->
  <div class="mt-5" *ngIf="fileUploader.previewImage">
    <img src="{{fileUploader.previewImage}}" alt="">
    <h1> {{ status }} </h1>
  </div>

</div>

app.component.ts

...
import { PdeioNgxFileUploaderComponent } from 'pdeio-ngx-file-uploader';
...

export class AppComponent {
  status: string;
  @ViewChild('fileUploader', { static: true })
  fileUploader: PdeioNgxFileUploaderComponent;
  constructor() {}

  onSave() {
    const url = 'https://example.com/api/user/images';

    /* OPTIONAL */
    const headers = new HttpHeaders({
      Accept: 'application/json',
      'X-Requested-With': 'XMLHttpRequest',
      'X-XSRF-TOKEN': 'XSRF-TOKEN-HERE',
    });

    /* OPTIONAL */
    const extraFields = [
      {
        name: 'id',
        value: 1,
      },
      {
        name: 'type',
        value: 'images',
      },
      ...
    ];

    this.fileUploader.onSave(url, headers, extraFields);
  }

  sendNotification(event: { event: string; progress?: number }) {
    switch (event.event) {
      case 'started':
        this.status = 'Started uploading';
        break;
      case 'uploading':
        this.status = 'uploading ' + event.progress + '%';
        break;
      case 'finished':
        this.status = 'everything was uploaded';
        break;
      case 'failed':
        this.status = 'Ops.. We have a problem';
        break;
    }
  }
}

will send to server, formdata like this

id: 1
type: images
files[0]: (binary)
...

FileUploader INPUT parameters

  @Input() multiple = false; // enable/disable multi files selection
  @Input() fileType: 'image' | 'audio' = 'image';

FileUploader OUTPUT events

  @Output() readyToUpload = new EventEmitter<boolean>(); // true | false
  @Output() uploadingStatus = new EventEmitter<{event: string, progress ?: number}>(); // progress : 0 - 100
  @Output() saved = new EventEmitter<boolean>(); // true | false

Public methods

  ---soon---