For demos please see demos page.
npm install ngx-uploader --save
// app.module.ts
import { NgUploaderModule } from 'ngx-uploader';
...
@NgModule({
...
imports: [
NgUploaderModule
],
...
})
// demo.component.ts
import { Component, NgZone, Inject } from '@angular/core';
import { NgUploaderOptions } from 'ngx-uploader';
@Component({
selector: 'demo',
templateUrl: 'demo.component.html'
})
export class DemoComponent {
options: NgUploaderOptions;
response: any;
hasBaseDropZoneOver: boolean;
constructor(@Inject(NgZone) private zone: NgZone) {
this.options = new NgUploaderOptions({
url: 'http://api.ngx-uploader.com/upload',
autoUpload: true,
calculateSpeed: true
});
}
handleUpload(data: any) {
setTimeout(() => {
this.zone.run(() => {
this.response = data;
if (data && data.response) {
this.response = JSON.parse(data.response);
}
});
});
}
fileOverBase(e: boolean) {
this.hasBaseDropZoneOver = e;
}
}<!-- demo.component.html -->
<input type="file"
ngFileSelect
[options]="options"
(onUpload)="handleUpload($event)"
(beforeUpload)="beforeUpload($event)">
<!-- drag & drop file example-->
<style>
.file-over { border: dotted 3px red; } /* Default class applied to drop zones on over */
</style>
<div ngFileDrop
[options]="options"
(onUpload)="handleUpload($event)"
[ngClass]="{'file-over': hasBaseDropZoneOver}"
(onFileOver)="fileOverBase($event)">
</div>
<div>
Response: {{ response | json }}
</div>// advanced-demo.component.ts
import { Component, NgZone, Inject, EventEmitter } from '@angular/core';
import { NgUploaderOptions, UploadedFile, UploadRejected } from 'ngx-uploader';
@Component({
selector: 'advanced-demo',
templateUrl: 'advanced-demo.component.html'
})
export class AdvancedDemoComponent {
options: NgUploaderOptions;
response: any;
sizeLimit: number = 1000000; // 1MB
previewData: any;
errorMessage: string;
inputUploadEvents: EventEmitter<string>;
constructor(@Inject(NgZone) private zone: NgZone) {
this.options = new NgUploaderOptions({
url: 'http://api.ngx-uploader.com/upload',
filterExtensions: true,
allowedExtensions: ['jpg', 'png'],
maxSize: 2097152,
data: { userId: 12 },
autoUpload: false,
fieldName: 'file',
fieldReset: true,
maxUploads: 2,
method: 'POST',
previewUrl: true,
withCredentials: false
});
this.inputUploadEvents = new EventEmitter<string>();
}
startUpload() {
this.inputUploadEvents.emit('startUpload');
}
beforeUpload(uploadingFile: UploadedFile): void {
if (uploadingFile.size > this.sizeLimit) {
uploadingFile.setAbort();
this.errorMessage = 'File is too large!';
}
}
handleUpload(data: any) {
setTimeout(() => {
this.zone.run(() => {
this.response = data;
if (data && data.response) {
this.response = JSON.parse(data.response);
}
});
});
}
handlePreviewData(data: any) {
this.previewData = data;
}
}<!-- advanced-demo.component.html -->
<div class="button-container">
<label class="upload-button is-pulled-left">
<input type="file"
class="hidden"
ngFileSelect
[options]="options"
[events]="inputUploadEvents"
(onUpload)="handleUpload($event)"
(onPreviewData)="handlePreviewData($event)"
(beforeUpload)="beforeUpload($event)">
Browse
</label>
</div>
<p>
Allowed extensions: <code><b>.jpg</b>, <b>.png</b></code>
</p>
<div>
<button type="button" class="start-upload-button" (click)="startUpload()">Start Upload</button>
</div>
<div *ngIf="response">
<pre><code>{{ response | json }}</code></pre>
</div>
<div *ngIf="errorMessage">
<code>{{ errorMessage }}</code>
</div>
<div *ngIf="previewData && !response">
<img [src]="previewData">
</div>// advanced-demo.component.ts
import { Component, NgZone, Inject, EventEmitter } from '@angular/core';
import { NgUploaderOptions, UploadedFile, UploadRejected } from 'ngx-uploader';
@Component({
selector: 'advanced-demo',
templateUrl: 'advanced-demo.component.html'
})
export class AdvancedDemoComponent {
options: NgUploaderOptions;
response: any;
sizeLimit: number = 1000000; // 1MB
previewData: any;
errorMessage: string;
startUploadEvent: EventEmitter<string>;
constructor(@Inject(NgZone) private zone: NgZone) {
this.options = new NgUploaderOptions({
url: 'http://api.ngx-uploader.com/upload',
filterExtensions: true,
allowedExtensions: ['txt', 'pdf'],
maxSize: 2097152,
data:{
'@type': "File",
"title": "My lorem.txt file",
"file": {
"data": "TG9yZW0gSXBzdW0u",
"encoding": "base64",
"filename": "lorem.txt",
"content-type": "text/plain"
}
},
customHeaders: {
'Content-Type':'application/json',
'Accept':'application/json'
},
autoUpload: false,
plainJson: true,
fieldName: 'file',
fieldReset: true,
maxUploads: 2,
method: 'POST',
previewUrl: true,
withCredentials: false
});
this.startUploadEvent = new EventEmitter<string>();
}
startUpload() {
this.startUploadEvent.emit("startUpload");
}
beforeUpload(ev : Event): void {
let file: File = ev.target['files'][0];
let myReader: FileReader = new FileReader();
myReader.onloadend = (e) => {
let tmpB64String = myReader.result.split(',');
this.options['data']['file']['data'] = tmpB64String[1] ;
this.options['data']['file']['filename'] = file.name;
this.options['data']['title'] = file.name;
}
myReader.readAsDataURL(file);
}
handleUpload(data: any) {
setTimeout(() => {
this.zone.run(() => {
this.response = data;
if (data && data.response) {
this.response = JSON.parse(data.response);
}
});
});
}
handlePreviewData(data: any) {
this.previewData = data;
}
}<!-- advanced-demo.component.html -->
<div class="button-container">
<label class="upload-button is-pulled-left">
<input type="file"
class="hidden"
ngFileSelect
[options]="options"
[events]="startUploadEvent"
(onUpload)="handleUpload($event)"
(onPreviewData)="handlePreviewData($event)"
(beforeUpload)="beforeUpload($event)">
Browse
</label>
</div>
<p>
Allowed extensions: <code><b>.jpg</b>, <b>.png</b></code>
</p>
<div>
<button type="button" class="start-upload-button" (click)="startUpload()">Start Upload</button>
</div>
<div *ngIf="response">
<pre><code>{{ response | json }}</code></pre>
</div>
<div *ngIf="errorMessage">
<code>{{ errorMessage }}</code>
</div>
<div *ngIf="previewData && !response">
<img [src]="previewData">
</div>For more information, examples and usage examples please see demos
MIT