1.0.2 • Published 4 years ago
ngx-easy-file-drop v1.0.2
About ngx-easy-file-drop
This module for easy drag and drop file for Angular\ Based on Angular Material
Installation
npm install ngx-easy-file-drop --save
How use
Class NgxEasyFileDropConfig
- dropZoneClass - Custom style class to be used on the drop zone
- labelClass - Custom style class to be used on the label zone
- labelText - Custom text for label zone
- listItemClass - Custom style class to be used on the files list
- buttonClass - Custom style class to be used on the button "Browse"
- buttonText - Custom text for button "Browse"
- matButtonType - Change type (style) material button "Browse" (NgxEasyFileDropMatButtonType)
- useRipple - Use ripple effect
- multiply - Multiple or single files are accepted
- listItemIcon - Material icon for files list
- deleteIcon - Material icon for delete button
- allowedExtensions - Accepted file extension
- maxFileSize - Max size for dropping file
- allowDublicate - Allow duplicate files
- useAnimation - Allow animation on component
Enum NgxEasyFileDropMatButtonType
- MatButtonType - Button style mat-button
- MatRaisedButtonType - Button style mat-raised-button
- MatFlatButtonType - Button style mat-flat-button
- MatIconButtonType - Button style mat-icon-button
- MatFabButtonType - Button style mat-fab-button
- MatMiniFabButtonType - Button style mat-mini-fab-button
Enum NgxEasyFileDropErrorType
- ExtensionError - File extension not included in allowed extensions (allowedExtensions)
- SizeError - File size larger than configured (maxFileSize)
- ReadError - Error reading file
- DublicateError - Duplicate file found by name
Class NgxEasyFileDropFileModel
- body - Base-64 encoded file
- file - Interface File (lib.dom.ts)
Class NgxEasyFileDropErrorModel
- file - Interface File (lib.dom.ts)
- type - enum NgxEasyFileDropErrorType
Class NgxEasyFileDropComponent
- config - Configuration component NgxEasyFileDropConfig
- onDropFile - Fires when a file is dumped to an area drop-zone
- onErrorFile - Fires on file processing error
- onDeleteFile - Fires on delete file
Example
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgxEasyFileDropModule } from 'ngx-easy-file-drop';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
NgxEasyFileDropModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
import {Component} from '@angular/core';
import {NgxEasyFileDropConfig, ,
NgxEasyFileDropErrorModel,
NgxEasyFileDropFileModel,
NgxEasyFileDropErrorType} from 'ngx-easy-file-drop';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
config: NgxEasyFileDropConfig;
constructor() {
this.config = new NgxEasyFileDropConfig();
this.config.allowedExtensions = ['exe', 'pdf'];
this.config.maxFileSize = 5;
}
onError(event: NgxEasyFileDropErrorModel[]) {
for (let i = 0; i < event.length; i++) {
switch (event[i].type) {
case NgxEasyFileDropErrorType.ExtensionError:
alert('File extension error ' + event[i].file.name);
break;
case NgxEasyFileDropErrorType.SizeError:
alert('File size error ' + event[i].file.name);
break;
case NgxEasyFileDropErrorType.ReadError:
alert('File read error ' + event[i].file.name);
break;
case NgxEasyFileDropErrorType.DublicateError:
alert('Dublicate file ' + event[i].file.name);
break;
}
}
}
onDelete(event: NgxEasyFileDropFileModel){
alert('Delete file ' + event.file.name);
}
onDrop(event: NgxEasyFileDropFileModel[]){
for(let i = 0; i < event.length; i++){
alert('Dropped file ' + event[i].file.name);
}
}
}
<ngx-easy-file-drop
[config]="config"
(onErrorFile)="onError($event)"
(onDeleteFile)="onDelete($event)"
(onDropFile)="onDrop($event)">
</ngx-easy-file-drop>