Introduction

Welcome to the ng2-file-uploader wiki!

Here your find the most important code lines for your integration in your own @angular project. With this uploader you get the possibility to hook into the or to overwrite uploader functions. Based on your way to write code.

Sitemap

1. Introduction
2. Module API
3. FAQ - (still waiting for questions)

Important code lines which are often used

Here are some example code lines which are often used by user.

Install via NPM

npm install @uniprank/ng2-file-uploader --save

Integration to your model

import { FileUploaderModule } from '@uniprank/ng2-file-uploader';
@NgModule({
    declarations: [ ],
    imports: [
       FileUploaderModule
    ],
    exports: [ ]
})
export class ExampleModule {
}

Setup component simple

import { FileUploader } from '@uniprank/ng2-file-uploader';

export class ExampleComponent {
    public uploader: FileUploader;

    constructor () {
        // Bind FileUploader class to variable
        this.uploader = new FileUploader({
            // API url to call
            url: 'https://uniprank.github.io/ng2-file-uploader/example/'
        });
    }
}

<!-- HTML for ExampleComponent -->
<div>
    <input type="file" ng2File2Select [uploader]="uploader" />
</div>
<div>
    <input type="file" ng2File2Select [uploader]="uploader" multiple />
</div>
<div>
    <div ng2File2Drop [uploader]="uploader"></div>
</div>      

Setup component advanced

import { Transfer, FileUploader, FileFilter, hookType, UploaderHook } from '@uniprank/ng2-file-uploader';

export class ExampleComponent {
    public uploader: Transfer;
    public hasFiles: boolean;

    constructor () {
        // Bind FileUploader class to variable
        this.uploader = new FileUploader({
            // API url to call
            url: 'https://uniprank.github.io/ng2-file-uploader/example/',
            removeBySuccess: false,
            autoUpload: false,
            // filter implementation possible
            filters: [
                new FileFilter('only:JPG', new RegExp('image/jpeg'), 'type')
            ]
        });

        // Hook implementation if needed
        this.uploader.hook(new UploaderHook(
            // define hook type
            hookType.successUploadFile,
            // callback function
            function(response: any, status: any, headers: any){
                console.log(response, status, headers);
            },
            // priority number 0 is low. number > 0 is higher
            0
        ));

        // Subscribe to queue (async) to get the current queue length
        this.uploader.queue$.subscribe((data: any) => {
            this.hasFiles = (data.length > 0);
        });
    }
}