lf-angular-file-drop v1.0.1

Angular Drag and Drop file component

Drag and drop component for angular, without any dependencies.

You simply drag and drop, or click inside.

Installation

NPM

npm i lf-angular-file-drop

Implementation

Just add the DragNDropModule to your app.module.ts:

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

import { AppComponent } from './app.component';
import { DragNDropModule } from 'drag-n-drop';


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

and use it in your html:

  <lf-drag-n-drop 
    multiple="true"
    labelBackground="green"
    color="white"
    (fileDropped)="handleFiles($event)">
  </lf-drag-n-drop>

Properties

Examples

  <lf-drag-n-drop 
    multiple="true"
    labelBackground="green"
    color="white"
    (fileDropped)="handleFiles($event)">
  </lf-drag-n-drop>

  <lf-drag-n-drop 
    labelBackground="white"
    color="purple"
    (fileDropped)="handleFiles($event)">
  </lf-drag-n-drop>