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>
