# ngx-upload-dragdrop

> This is a File upload Drag and Drop Library published to npm.

Latest version **0.0.14** (published 2020-05-02) · SEE LICENSE IN LICENSE license · 0 weekly downloads

## Install

```sh
npm install ngx-upload-dragdrop
pnpm add ngx-upload-dragdrop
yarn add ngx-upload-dragdrop
bun add ngx-upload-dragdrop
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.14 |
| Published | 2020-05-02 |
| First published | 2019-08-16 |
| Weekly downloads | 0 |
| License | SEE LICENSE IN LICENSE |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 121.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | sarancruzer |
| Keywords | Angular, Library |

## Links

- npm: https://www.npmjs.com/package/ngx-upload-dragdrop
- Repository: https://github.com/sarancruzer
- Homepage: https://medium.com/@sarancruzer/angular-history-293515a16524
- npm.io page: https://npm.io/package/ngx-upload-dragdrop

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Recent versions

- 0.0.14 (latest) — 2020-05-02
- 0.0.13 — 2019-08-19
- 0.0.11 — 2019-08-19
- 0.0.10 — 2019-08-19
- 0.0.8 — 2019-08-19
- 0.0.7 — 2019-08-19
- 0.0.6 — 2019-08-19
- 0.0.5 — 2019-08-19
- 0.0.4 — 2019-08-19
- 0.0.3 — 2019-08-19
- 0.0.2 — 2019-08-19
- 0.0.1 — 2019-08-16

## README

# NgxUploadDragdrop

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.0.


## Installation

Add **ngx-upload-dragdrop** module as dependency to your project.

```Angular
npm install ngx-upload-dragdrop --save
```

Include **NgxUploadDragdropModule** into your main AppModule or in module where you will use it.

```Angular

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxUploadDragdropModule } from 'ngx-upload-dragdrop';

 
@NgModule({
  imports: [
    BrowserModule,
    NgxUploadDragdropModule
  ],
  declarations: [ AppComponent ]
})
export class AppModule {}
```


or include **NgxUploadDragdropModule** into your SharedModule. This could be usefull if your project has nested Modules.

```Angular

// shared.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgxUploadDragdropModule } from 'ngx-upload-dragdrop';
...
 
@NgModule({
  imports: [
    CommonModule,
    NgxUploaderModule,
    ...
  ],
  exports: [
    CommonModule,
    NgxUploaderModule,
    ...
  ],
  ...
})
export class SharedModule {
}

```

```Angular

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SharedModule } from './shared.module';
 
@NgModule({
  imports: [
    BrowserModule,
    SharedModule
  ],
  declarations: [ AppComponent ]
})
export class AppModule {}
```


#Template Code
##For whole template code please check here.

```Angular

<enl-ngx-upload-dragdrop [uploadIconClass]="upload_icon_class" [trashIconClass]="trash_icon_class"  (onFileDropped)="uploadFiles($event)"></enl-ngx-upload-dragdrop>

```

#Typescript Code
##For whole Typescript code please check here.

```Angular
upload_icon_class = "fas fa-upload";
trash_icon_class = "fas fa-trash fa-1x";
```
```Angular

uploadFiles(event) {
    console.log(event);
  }
```

# Please use Fontawesome url on index.html

```html
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" >
  ```

 ##Upcoming features

- Presignin
- File type restrictions
- Icons
- Customclass
- File size restrictions
- Onsuccess
- OnFailure

---
_Source: https://npm.io/package/ngx-upload-dragdrop · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._