angular - Cómo hacer una funcionalidad de arrastrar y soltar personalizada simple en angular2 con opción de carga de archivos

Por favor, revise el archivo de código HTML

<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" />

Por favor, revisa el archivo de código ts

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;
      }
    }
  }

}

Por favor, háganme saber cómo implementar la funcionalidad de arrastrar y soltar junto con la carga de archivos.

Respuesta #1

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

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

¡Para la funcionalidad de arrastrar y soltar, puedes usar las bibliotecas de componentes de Angular! Echa un vistazo a cualquiera de estos tres:

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

Además, las bibliotecas de componentes de Angular contienen opciones de carga de archivos también:

Hay muchas formas de implementar la funcionalidad que deseas, pero utilizar algunos de estos componentes debería hacer tu vida mucho más fácil.

¡El proceso de instalación y la implementación de cada uno de estos componentes se explican en los archivos README.md en sus respectivos repositorios!

¡Buena suerte!