ngx-file-dnd

Demo / StackBlitz Issue Template

npm i @raoinfotech/ngx-file-dnd --save

This is a Drag and Drop componant for File upload.

• dropzones optionally support external/native draggables (img, txt, file)
• [maxFiles] Maximum file count support
• [maxSize] Maximum size of file support
• fileExt="JPG, JPEG, PNG" : Developer can mention their support Extension
• (fileExtension)="handleFileExtension($event)"
• (change)="onFileSelected($event)" : Every events can be handle by your custom validation as user want's
• utilize EffectAllowed
• custom CSS classes
• touch support by using a polyfill
• AOT compatible

This has dropzones though :+1: The idea is that the directive does not handle lists internally so the dndDropzone can be general purpose.

Usage

app.component.html

<!--a draggable element-->
<app-file-dnd [maxFiles]="maxFiles" [maxSize]="maxSize" fileExt="JPG, JPEG, PNG" (uploadedFile)="handleInputChange($event)" (fileExtension)="handleFileExtension($event)">
    <input type="string" accept=".jpg, .png" class="form-control" (change)="onFileSelected($event)" formControlName="chooseFile" autocomplete="off">
</app-file-dnd>
<!--a dropzone-->

app.component

import { Component } from '@angular/core';

@Component()
export class AppComponent {

  handleFileExtension(event: any) {
    console.log("event handleFileExtension : ", event);
  }

  handleInputChange(event: any) {
    console.log("event handleInputChange : ", event);
  }

  onFileSelected(event: any) {
    console.log("event onFileSelected");
    if (event.target.files && event.target.files[0]) {
      this.files = event.target.files;
      console.log(" First File ", this.files[0]); // Use with the looping for multiple files
      const reader = new FileReader();
      reader.onload = (event: any) => {
        // reader.result 
      };
      reader.readAsDataURL(this.files[0]); // Use for the First File preview  
    }
  }
}

app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { FileDndModule } from "@raoinfotech/ngx-file-dnd";

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FileDndModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}