How to make simple customized drag and drop functionality in angular2 with file upload option

问题

Please check the code HTML file

<div class='multiple'><span *ngFor="let filename of fileList" class="fileLoaded">{{filename}}<dew-icon [options]="{icon:'cross'}" (click)="deleteItem(filename)" class="file-close"></dew-icon>
</span>
</div>
<label for="file-upload-{{Id}}" class="custom-file-upload">
    <span><dew-icon class='sizeIcon' [options]="{icon:'lnr lnr-move'}"></dew-icon></span>
    <i class="fa fa-cloud-upload"></i> Drag and Drop /Browse
</label>
<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" />

Please check the code ts file

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

@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 => f.name).join(', ');
    let multFile = files.map(f => 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 < this.fileList.length; i++) {
      if (obj == this.fileList[i]) {
        this.fileList.splice(i, 1);
        break;
      }
    }
  }

}

Please let me know how to implement the drag and drop functionality together with the file upload.

回答1:

For drag and drop functionality, you can use Angular's component libraries! Check out any of these three:

https://github.com/valor-software/ng2-dragula

https://github.com/akserg/ng2-dnd

https://github.com/ObaidUrRehman/ng2-drag-drop

Additionally, the Angular component libraries contain file-upload options as well:

https://github.com/valor-software/ng2-file-upload

https://github.com/jkuri/ngx-uploader

There are many ways to implement your desired functionality, but utilizing some of these components should make your life much easier.

The installation process and implementation for each of these components is explained in the README.md files in their respective repositories!

Good luck!

来源：https://stackoverflow.com/questions/45182190/how-to-make-simple-customized-drag-and-drop-functionality-in-angular2-with-file