lf-angular-file-drop

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

Name	Optional	Description
(fileDropped)	No	Returns the file (s) in an event
multiple (boolean)	Yes	Allows you to recieve one or multiple files, this value is a boolean and false by default
labelBackground (string)	Yes	Changes the label background color
color (string)	Yes	Changes the label font color

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>