# lf-angular-file-drop

> Drag and drop component for angular, without any dependencies.

Latest version **1.0.1** (published 2020-05-09) · 0 weekly downloads

## Install

```sh
npm install lf-angular-file-drop
pnpm add lf-angular-file-drop
yarn add lf-angular-file-drop
bun add lf-angular-file-drop
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2020-05-09 |
| First published | 2020-05-09 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 150.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | luis_hdez87 |
| Keywords | angular, file drop, drag and drop, angular2, typescript |

## Links

- npm: https://www.npmjs.com/package/lf-angular-file-drop
- Repository: https://github.com/luishdez87/angular-drag-n-drop
- Homepage: https://github.com/luishdez87/angular-drag-n-drop#readme
- Issues: https://github.com/luishdez87/angular-drag-n-drop/issues
- npm.io page: https://npm.io/package/lf-angular-file-drop

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2020-05-09
- 1.0.0 — 2020-05-09
- 0.0.1 — 2020-05-09

## README

# Angular Drag and Drop file component

Drag and drop component for angular, without any dependencies.

You simply drag and drop, or click inside.

![](https://github.com/luishdez87/angular-drag-n-drop/blob/master/projects/demo/src/assets/normal-view.png?raw=true)

## Installation

### NPM

`npm i lf-angular-file-drop`

## Implementation

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

```javascript
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:

```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

```html

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

```
![](https://github.com/luishdez87/angular-drag-n-drop/blob/master/projects/demo/src/assets/bg-changed.png?raw=true)

```html

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

```
![](https://github.com/luishdez87/angular-drag-n-drop/blob/master/projects/demo/src/assets/bg-and-color.png?raw=true)

---
_Source: https://npm.io/package/lf-angular-file-drop · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._