angular4-files-upload
v1.0.2
Published
Angular4 files upload by click or/and drag and drop
Downloads
265
Maintainers
Readme
angular4-files-upload
Upload files by clicking or dragging
Getting started
npm i --save angular4-files-upload
Add following lines into your
module:
import { Ng4FilesModule } from './ng4-files';
add Ng4FilesModule to your module imports section
imports: [ Ng4FilesModule ]
component template:
Upload by click:
<ng4-files-click (filesSelect)="filesSelect($event)">
<span>Click me to upload</span>
</ng4-files-click>
Upload with drag'n'drop:
<ng4-files-drop (filesSelect)="filesSelect($event)">
<div style="display: inline-block; height: 100px; width: 100px; background-color: gray">
{{selectedFiles}}
</div>
</ng4-files-drop>
component ts:
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
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
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
<ng4-files-click (filesSelect)="filesSelect($event)" [configId]="'my-image-config'">
<span>Upload</span>
</ng4-files-click>
<ng4-files-drop (filesSelect)="filesSelect($event)" [configId]="'my-video-config'">
<div style="display: inline-block; height: 100px; width: 100px; background-color: gray">
{{selectedFiles}}
</div>
</ng4-files-drop>
API
Config
acceptExtensions values: string[] or '*' examples: ['ts', 'spec.ts'], ['js'], '*'
maxFilesCount: values: [number]
maxFileSize: values: [number] (bytes)
totalFilesSize: values: [number] (bytes)
Template
<ng4-files-click (filesSelect)="YOUR_HANDLER($event)" [configId]="YOUR_CONFIG">
filesSelect emit when files attached and pass Ng4FilesSelected object to YOUR_HANDLER:
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 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 ng4-files-click
Don't: html
<ng4-files-click>
<button></button>
</ng4-files-click>
ng4-files-click content is wrapped in label tag, so prefer something like
<ng4-files-click>
<span role="button" style="btn">Give me file ^.^</button>
</ng4-files-click>```