web-dev-qa-db-fra.com

Dropzone js avec 4 angulaire

Quelqu'un utilise-t-il la bibliothèque Dropzone Js avec un angle de 2 ou 4 avant? Et s'il existe des exemples ou des liens utiles Merci

angulardropzone.js
7
Abdelrahman Hussien

Il existe un wrapper Angular 5+ pour Dropzone qui peut être trouvé ici .

4
dvlsc

Peut-être qu'il est un peu tard, après quelques recherches, j'ai trouvé ces informations pour faire fonctionner dropzone 5.0.2 avec Angular

  • placez la bibliothèque dropzone.js sous src/js/ (créez le répertoire js, s'il n'est pas déjà créé)
  • ajouter js/dropzone.js dans la liste des scripts dans .angular-cli.json

  • Comme décrit ici , exécutez la commande suivante dans cmd/Shell, à la racine de votre projet angulaire (où se trouve .angular-cli.json):

    npm install --save @types/dropzone

  • Vous pouvez maintenant importer des zones de transfert dans vos classes TypeScript de la manière suivante:

    import * as dropzone from 'dropzone';

Vous pouvez également l'intégrer en tant que composant Angular (Angular 2+) comme décrit ci-dessus cet article .

WARNING: Je n'ai pas testé, donc peut-être qu'il manque quelque chose ou un problème. J'ai finalement utilisé une autre bibliothèque.

3
Aymen Turki

Si vous n'êtes pas lié à dropzone.js car il n'est pas optimisé pour une utilisation avec Angular, je pourrais vous suggérer la bibliothèque suivante.

J'ai écrit un composant Angular hautement personnalisable qui implémente le comportement Drag'n'Drop. Il 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