ngx-easy-file-drop

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>

License

MIT