ng5-files

Upload files by clicking or dragging

Getting started

npm i --save ng5-files

Add following lines into your

module:

``typescript
import { Ng5FilesModule } from './ng5-files';
`

add Ng5FilesModule to your module imports section

`typescript
imports: [ Ng5FilesModule ]
`




component template:

Upload by click:
`html

Click me to upload

`

Upload with drag'n'drop:
`html

{{selectedFiles}}

`




component ts:

`typescript
import {
Ng5FilesStatus,
Ng5FilesSelected
} from './ng5-files';

...

public selectedFiles;

public filesSelect(selectedFiles: Ng5FilesSelected): void {
if (selectedFiles.status !== Ng5FilesStatus.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 ng5-files add following lines to you component.ts file:

$3

`typescript
import {
Ng5FilesService,
Ng5FilesConfig,
} from './ng5-files';

...

constructor(
private ng5FilesService: Ng5FilesService
) {}

private testConfig: Ng5FilesConfig = {
acceptExtensions: ['js', 'doc', 'mp4'],
maxFilesCount: 5,
maxFileSize: 5120000,
totalFilesSize: 10120000
};

ngOnInit() {
this.ng5FilesService.addConfig(this.testConfig);
}
`

$3

Config added this way

this.ng5FilesService.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 {
Ng5FilesService,
Ng5FilesConfig,
Ng5FilesStatus,
Ng5FilesSelected
} from './ng5-files';

...

public selectedFiles;

private configImage: Ng5FilesConfig = {
acceptExtensions: ['jpg', 'jpeg'],
maxFilesCount: 5,
totalFilesSize: 101200000
};

private configVideo: Ng5FilesConfig = {
acceptExtensions: ['mp4', 'avi'],
maxFilesCount: 1
};

constructor(
private ng5FilesService: Ng5FilesService
) {}

ngOnInit() {
this.ng5FilesService.addConfig(this.configImage, 'my-image-config');
this.ng5FilesService.addConfig(this.configVideo, 'my-video-config');
}

public filesSelect(selectedFiles: Ng5FilesSelected): void {
if (selectedFiles.status !== Ng5FilesStatus.STATUS_SUCCESS) {
this.selectedFiles = selectedFiles.status;
return;
}

// Handle error statuses here

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

`

.html

`html

Upload

{{selectedFiles}}

`

API

$3

_acceptExtensions_

values: string[] or \'\*\'

examples: ['ts', 'spec.ts'], ['js'], '*'

_maxFilesCount_:

values: [number]


_maxFileSize:_

values: [number] (bytes)

_totalFilesSize:_

values: [number] (bytes)

$3

_filesSelect_

emit when files attached and pass Ng5FilesSelected object to YOUR_HANDLER:

`
export enum Ng5FilesStatus {
STATUS_SUCCESS,
STATUS_MAX_FILES_COUNT_EXCEED,
STATUS_MAX_FILE_SIZE_EXCEED,
STATUS_MAX_FILES_TOTAL_SIZE_EXCEED,
STATUS_NOT_MATCH_EXTENSIONS
}

export interface Ng5FilesSelected {
status: Ng5FilesStatus;
files: File[];
}
`

_! Note on statuses STATUS_MAX_FILE_SIZE_EXCEED or STATUS_NOT_MATCH_EXTENSIONS 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 ng5-files-click

Don't: `html


`



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

Give me file ^.^
`
```