web-dev-qa-db-fra.com

Comment obtenir des fichiers d'un événement angular 2 onDrop?

J'ai essayé comme ça mais la méthode onDrop ne renvoie pas les fichiers image quand j'y passe ...

onDragStart(event, data: any) {
  event.dataTransfer.setData('data', data);
}
onDrop(event, data: any) {
  let dataTransfer = event.dataTransfer.getData('data');
  event.preventDefault();
}
allowDrop(event) {
  event.preventDefault();
}


<div (drop)="onDrop($event, dropData)" (dragover)="allowDrop($event)"></div>
<div (dragstart)="onDragStart($event, dragData)"></div>

Une solution pour ça?

javascriptangulardrag-and-dropimage-upload
6
Vladimir

L'événement event onDrop ne se déclenche que lorsque onDragOver a les méthodes preventDefault() et stopPropagation() exécutées sur event.

HTML

<div
    (drop)="onDrop($event)"
    (dragover)="onDragOver($event)"
>
    Drop target
</div>

DropComponent.ts 

export class DropComponent {
    onDrop(event) {
        event.preventDefault();
    }
    onDragOver(event) {
        event.stopPropagation();
        event.preventDefault();
    }
}

UPDATE

Cela est nécessaire car, par défaut, le navigateur empêche que rien ne se produise lorsque vous passez sur l'élément HTML. Plus d’informations sur MDN - Définition d’une zone de dépôt valide

10
maryl

Voici le code complet pour glisser-déposer dans Angular 2/4/6:

drag.component.ts: 

import { Component } from '@angular/core';

@Component({
  selector: 'drag-root',
  templateUrl: './drag.component.html',
  styleUrls: ['./drag.component.css']
})
export class AppComponent {

  allowDrop(ev) {
    ev.preventDefault();
  }

  drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
  }

  drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
  }
}

drag.component.html: 

<h2>Drag and Drop</h2>
<div  id="div1" 
      (drop)="drop($event)" 
      (dragover)="allowDrop($event)">

      <img 
      src="https://images.pexels.com/photos/658687/pexels-photo-658687.jpeg?auto=compress&cs=tinysrgb&h=350" 
      draggable="true" 
      (dragstart)="drag($event)" 
      id="drag1"
      width="88" 
      height="31">
</div>

<div id="div2" 
  (drop)="drop($event)" 
  (dragover)="allowDrop($event)">
</div>

drag.component.css: 

#div1, #div2 {
    float: left;
    width: 100px;
    height: 35px;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}

Instantanés:

 Drag 1

 Drag 2

2
Shubham Verma

Vous pouvez envelopper la fonctionnalité onDrop dans une directive réutilisable. Comme ça:

https://Gist.github.com/darrenmothersele/7afda13d858a156ce571510dd78b7624

Appliquez cette directive à un élément:

<div (appDropZone)="onDrop($event)"></div>

L'événement est déclenché avec un tableau JavaScript des fichiers déposés. Ainsi, votre implémentation onDrop dans le composant ressemble à ceci:

onDrop(files: FileList) {
  console.log({ files });
}
2
Darren

Comme d'autres l'ont indiqué, vous devez appeler event.preventDefault() et event.stopPropagation() à l'événement (dragover) pour que votre conteneur soit une zone de dépôt valide.

J'ai écrit un composant hautement personnalisable Angular qui implémente le comportement correct Drag'n'Drop, je n'ai donc pas besoin de le copier encore et encore, ce qui retourne une liste des fichiers déposés en tant qu'événement de sortie. .
Ceci peut être trouvé ici .

Après avoir importé le module, vous avez accès au composant:

<ngx-dropzone [multiple]="false" [maxFileSize]="2000"></ngx-dropzone>

Vous avez quelques options à définir et cela vient avec un style par défaut décent (des captures d'écran se trouvent dans le dépôt GitHub). Si vous le souhaitez, vous pouvez même créer votre propre conteneur div avec vos styles et effets de survol personnalisés et le placer dans la zone de largage. Vous trouverez des détails à ce sujet dans la description de l'API.

<ngx-dropzone [customContent]="customDropzone" (filesDropped)="onFilesDropped($event)">
<ng-template #customDropzone>
    <div class="custom-dropzone">
        This is my custom content
    </div>
</ng-template>

0
Peter Freeman

Vous pouvez essayer d'utiliser Hostlistener decorator pour l'événement drag, vous pouvez le voir implémenté par exemple ici dans ng2-file-upload

0
Vojtech