ng5-files
Upload files by clicking or dragging
Getting started
npm i --save ng5-files
Add following lines into your
module:
;
add Ng5FilesModule to your module imports section
imports:
component template:
Upload by click:
Click me to upload
Upload with drag'n'drop:
{{selectedFiles}}
component ts:
; ... public selectedFiles; public filesSelectselectedFiles: Ng5FilesSelected: void
Configure
To pass config to ng5-files add following lines to you component.ts file:
Shared Config
; ... constructor private ng5FilesService: Ng5FilesService private testConfig: Ng5FilesConfig =; ngOnInit
Private configs
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
; ... public selectedFiles; private configImage: Ng5FilesConfig =; private configVideo: Ng5FilesConfig =; constructor private ng5FilesService: Ng5FilesService ngOnInit public filesSelectselectedFiles: Ng5FilesSelected: void
.html
Upload {{selectedFiles}}
API
Config
acceptExtensions
values: string[] or '*'
examples: ['ts', 'spec.ts'], ['js'], '*'
maxFilesCount:
values: [number]
maxFileSize:
values: number
totalFilesSize:
values: number
Template
<ng5-files-click (filesSelect)="YOUR_HANDLER($event)" [configId]="YOUR_CONFIG">
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> <button></button> </ng5-files-click>
ng5-files-click content is wrapped in label tag, so prefer something like
Give me file ^.^```