angular4-files-upload

Upload files by clicking or dragging

Getting started

npm i --save angular4-files-upload Add following lines into your module: ```typescript import { Ng4FilesModule } from './ng4-files'; ``` add Ng4FilesModule to your module imports section
```typescript imports: Ng4FilesModule ```
component template: Upload by click: ```html Click me to upload ``` Upload with drag'n'drop: ```html ```
component ts: ```typescript import { Ng4FilesStatus, Ng4FilesSelected } from './ng4-files'; ... public selectedFiles; public filesSelect(selectedFiles: Ng4FilesSelected): void {

if (selectedFiles.status !== Ng4FilesStatus.STATUS_SUCCESS) {

this.selectedFiles = selectedFiles.status;

return;

// Hnadle error statuses here

}

this.selectedFiles = Array.from(selectedFiles.files).map(file => file.name);

} ```

Configure

To pass config to angular4-files-upload add following lines to you component.ts file:

Shared Config

```typescript import { Ng4FilesService, Ng4FilesConfig, } from './ng4-files'; ... constructor(

private ng4FilesService: Ng4FilesService

) {} private testConfig: Ng4FilesConfig = {

acceptExtensions: ['js', 'doc', 'mp4'],

maxFilesCount: 5,

maxFileSize: 5120000,

totalFilesSize: 10120000

}; ngOnInit() {

this.ng4FilesService.addConfig(this.testConfig);

} ```

Private configs

Config added this way
this.ng4FilesService.addConfig(this.testConfig);
is shared config. All components will use it. But you can add multiple configs for your upload components.
Let's say, you have two upload components and you want to allow user upload just one video and 5(max) images.
To do this create 2 configs and pass it to upload components as named configs. .ts ```typescript import { Ng4FilesService, Ng4FilesConfig, Ng4FilesStatus, Ng4FilesSelected } from './ng4-files'; ... public selectedFiles; private configImage: Ng4FilesConfig = {

acceptExtensions: ['jpg', 'jpeg'],

maxFilesCount: 5,

totalFilesSize: 101200000

}; private configVideo: Ng4FilesConfig = {

acceptExtensions: ['mp4', 'avi'],

maxFilesCount: 1

}; constructor(

private ng4FilesService: Ng4FilesService

) {} ngOnInit() {

this.ng4FilesService.addConfig(this.configImage, 'my-image-config');

this.ng4FilesService.addConfig(this.configVideo, 'my-video-config');

} public filesSelect(selectedFiles: Ng4FilesSelected): void {

if (selectedFiles.status !== Ng4FilesStatus.STATUS_SUCCESS) {

this.selectedFiles = selectedFiles.status;

return;

}

// Handle error statuses here

this.selectedFiles = Array.from(selectedFiles.files).map(file => file.name);

} ``` .html ```html configId="'my-image-config'"> Upload configId="'my-video-config'"> ```

API

Config

acceptExtensions
values: string or \'\*\'
examples: 'ts', 'spec.ts', 'js', '' maxFilesCount:
values: number
maxFileSize:
values: number (bytes) totalFilesSize:
values: number (bytes)

Template

(filesSelect)="YOURHANDLER($event)" configId="YOURCONFIG"> filesSelect
emit when files attached and pass Ng4FilesSelected object to YOURHANDLER: ``` export enum Ng4FilesStatus {

STATUS_SUCCESS,

STATUS_MAX_FILES_COUNT_EXCEED,

STATUS_MAX_FILE_SIZE_EXCEED,

STATUS_MAX_FILES_TOTAL_SIZE_EXCEED,

STATUS_NOT_MATCH_EXTENSIONS

} export interface Ng4FilesSelected { status: Ng4FilesStatus; files: File; } ``` ! Note on statuses STATUSMAXFILESIZEEXCEED or STATUSNOTMATCHEXTENSIONS you get files not passed validation, so you shouldn't filter it manually to find all invalid files. configId
Pass your named config with configId

Caveat

Please don't use button tag in template inside ng4-files-click
Don't: ```html

<button></button>

```

ng4-files-click content is wrapped in label tag, so prefer something like ````html

<span role="button" style="btn">Give me file ^.^</button>

``` ````