Angular Drag and Drop

Drag and drop directive adds a behavior to elements in your Angular applications where you can receive a list of files

Report Bug · Wiki

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. Contributing
6. License
7. Contact

About The Project

Built With

• Angular
• TypeScript
• SASS

Getting Started

To get a local and running follow these simple steps.

Prerequisites

Install NPM packages

• npm

  npm install npm@latest -g

Installation

1. With npm installed, run.

   npm i @cesarbr/angular-dragndrop-input

Usage

Import NgDragndropInput on module

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgDragndropInput } from 'ng-dragndrop-input';

@NgModule({
  declarations: [AppComponent],
  imports: [NgDragndropInput],
  providers: [],
  bootstrap: []
})
export class AppModule { }

Using the directive on your component and listen 'fileDropped' emitter

<div dragndrop
    (fileDropped)="uploadFiles($event)">
    <button
    class="upload-button">Upload Documents</button>
</div>

FileDropped event emitter a 'FileList' you can use as you prefer

import { Component, EventEmitter, OnInit, Output } from '@angular/core';

@Component({
  selector: 'app-button-with-drop',
  templateUrl: './button-with-drop.component.html',
  styleUrls: ['./button-with-drop.component.scss']
})
export class ButtonWithDropComponent implements OnInit {

  @Output() filesToUpload = new EventEmitter<any>();

  public uploadFiles(fileList: any) {
    this.filesToUpload.emit(fileList);
  }

}

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature-IssueNumber)
3. Commit your Changes (git commit -m 'Create a new feature or fix bug')
4. Push to the Branch (git push origin feature-IssueNumber)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Project Link: https://github.com/CESARBR/angular-dragndrop-input