pdeio-ngx-file-uploader
v0.0.1
Published
This library was generated with [Angular CLI](https://github.com/angular/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
Downloads
3
Readme
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---