title: How to make simple customized drag and drop functionality in angular2 with file upload option
body: <p>Please check the code HTML file</p>
  
  <pre><code>&lt;div class='multiple'&gt;&lt;span *ngFor="let filename of fileList" class="fileLoaded"&gt;{{filename}}&lt;dew-icon [options]="{icon:'cross'}" (click)="deleteItem(filename)" class="file-close"&gt;&lt;/dew-icon&gt;
  &lt;/span&gt;
  &lt;/div&gt;
  &lt;label for="file-upload-{{Id}}" class="custom-file-upload"&gt;
      &lt;span&gt;&lt;dew-icon class='sizeIcon' [options]="{icon:'lnr lnr-move'}"&gt;&lt;/dew-icon&gt;&lt;/span&gt;
      &lt;i class="fa fa-cloud-upload"&gt;&lt;/i&gt; Drag and Drop /Browse
  &lt;/label&gt;
  &lt;input accept="application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation,text/plain,image/jpeg,image/gif,image/png,image/tiff,image/vnd.dwg,application/zip,application/x-rar-compressed,application/step,application/iges" id="file-upload-{{Id}}" multiple (change)="onChange($event)" sm="25" type="file" /&gt;
  </code></pre>
  
  <p>Please check the code ts file</p>
  
  <p>import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';</p>
  
  <pre><code>@Component({
    selector: 'dew-file-upload',
    templateUrl: './file-upload.component.html',
    styleUrls: ['./file-upload.component.less']
  })
  export class FileUploadComponent implements OnInit {
  
    @Input() Id: String;
    public fileList = [];
    constructor() {
    }
  
    @Output() fileObject = new EventEmitter();
    ngOnInit() {
    }
  
    onChange(event: any) {
      let files = [].slice.call(event.target.files);
      // input.value = files.map(f =&gt; f.name).join(', ');
      let multFile = files.map(f =&gt; f.name);
      for (let entry of multFile) {
        var found = false;
  
        for (let existFile of this.fileList) {
  
          console.log(entry.indexOf(existFile));
          if (entry.indexOf(existFile) != -1) {
  
            found = true;
  
          }
  
        }
  
        if (found == false) {
  
          this.fileList.push(entry);
  
        }
      }
      this.fileObject.emit(files);
    }
  
    deleteItem(obj) {
      for (let i = 0; i &lt; this.fileList.length; i++) {
        if (obj == this.fileList[i]) {
          this.fileList.splice(i, 1);
          break;
        }
      }
    }
  
  }
  </code></pre>
  
  <p>Please let me know how to implement the drag and drop functionality together with the file upload.</p>