Wie Dropzone JS zu Verbesserungen der Benutzeroberfläche und der redaktionellen Abläufe beiträgt

Ich finde es immer toll, wenn Websites die Drag-and-Drop-Funktionalität zum Hochladen von Bildern oder Dateien anbieten. So einfach! Es ist einfach intuitiv, und das macht es zur besten Komponente der Benutzeroberfläche. Schließlich sollte eine gute Benutzeroberfläche immer intuitiv und reaktionsschnell sein.

Wie funktioniert Dropzonejs?

DropzoneJS ist eine Open-Source-Bibliothek, die Drag-and-Drop-Datei-Uploads mit Bildvorschau ermöglicht. Um sie auf Ihrer Website zu verwenden, müssen Sie lediglich ein Formular-Tag mit der Klasse "dropzone" einfügen, und es sollte ein Aktionsattribut vorhanden sein, um anzugeben, was Sie mit der Datei tun möchten.

<form action = "scriptfile.php"
        class = "dropzone"></form>

Sie können auch die von DropzoneJS vorgegebenen Stile überschreiben, wenn Sie möchten.

Das Drupal DropzoneJS-Modul implementiert alle oben genannten Schritte für Sie, ist aber leider auf redaktionelle Verbesserungen beschränkt. Die Entwickler-Community arbeitet jedoch daran, es für eine bessere Benutzeroberfläche auf die Benutzerseite zu bringen.

Verwendung von DropzoneJs für redaktionelle Verbesserungen in Drupal

In Drupal kann DropzoneJs für redaktionelle Verbesserungen verwendet werden, um die Dinge zu vereinfachen, indem man einfach per Drag & Drop hochlädt, während man Bilder oder Dateien mit dem Editor hinzufügt. Es funktioniert mit dem Entity Browser-Modul.

• Installieren Sie die Module mit dem folgenden Drush-Befehl in Ihrem Terminal:

drush en dropzonejs, dropzonejs_entity_browser_widget -y

• Sie können die Module auch manuell installieren.
   
• Nachdem Sie die beiden Module installiert und aktiviert haben. Gehen Sie zu Konfiguration > Entity Browser > Klicken Sie auf Entity Browser hinzufügen.
   
• Nehmen Sie Ihre passende Konfiguration vor, Sie werden mit Hinweisen/Dokumentationen darunter unterstützt, hier ist meine Konfiguration, ich habe ein Label als Dropzone vergeben, Display Plugin Modal ausgewählt, Sie können auch Ihre benutzerdefinierte Ansicht für Selection Display Plugin verwenden. Klicken Sie nach der Konfiguration auf Weiter.

• Stellen Sie die Anzeigegröße des DropzoneJS-Widgets ein und klicken Sie auf Weiter. Ich habe die Standardeinstellungen verwendet.

• Nachdem Sie Ihre Konfiguration eingerichtet haben, klicken Sie auf Fertig stellen.

• Wählen Sie das DropzoneJS-Widget aus. Nachdem Sie den Entity Browser eingerichtet haben, gehen Sie zu Struktur > Inhaltstypen > Klicken Sie auf Felder verwalten für den Inhaltstyp Artikel.
   
• Gehen Sie zu Formular verwalten >> Registerkarte Anzeige >> Suchen Sie das Bildfeld >> Stellen Sie es auf Entity Browser ein >> Klicken Sie auf Speichern.

Fertig, einfach, oder? Wenn Sie Ihren Artikel bearbeiten, sollten Sie eine Registerkarte "Bild" sehen. Öffnen Sie sie, um Entitäten hinzuzufügen. Hier haben wir es so eingerichtet, dass Bilder hinzugefügt werden, Sie können es so einrichten, wie Sie es möchten.

Hier können wir unser DropzoneJS in Aktion sehen. Ziehen Sie einfach Ihre Bilder per Drag & Drop.

Einfach zu verwendende Tipps bei der Verwendung von Dropzone

• Wenn Sie die Standardmeldung überhaupt nicht wünschen ("Dateien zum Hochladen hierher ziehen (oder klicken)"), können Sie ein Element mit der Klasse dz-message in Ihr Dropzone-Element einfügen, und Dropzone erstellt die Meldung nicht für Sie.
   
• Dropzone übermittelt alle versteckten Felder, die Sie in Ihrem Dropzone-Formular haben. Eine einfache Möglichkeit, zusätzliche Daten zu übermitteln. Sie können auch die Option params verwenden.
   
• Dropzone fügt dem Dateiobjekt Daten hinzu, die Sie verwenden können, wenn Ereignisse ausgelöst werden. Sie können auf file.width und file.height zugreifen, wenn es sich um ein Bild handelt, sowie auf file.upload, ein Objekt, das Folgendes enthält: progress (0-100), total (die Gesamtbytezahl) und bytesSent.
   
• Wenn Sie dem Datei-Upload zusätzliche Daten hinzufügen möchten, die für jede Datei spezifisch sein müssen, können Sie sich für das Sendeereignis registrieren.
   
• Wenn Sie möchten, dass der gesamte Body eine Dropzone ist und die Dateien woanders angezeigt werden sollen, können Sie einfach ein Dropzone-Objekt für den Body instanziieren und die Option previewsContainer definieren. Der previewsContainer sollte die Klasse dropzone-previews oder dropzone haben, um die Dateivorschauen korrekt anzuzeigen.

DropzoneJS kann eine lobenswerte Komponente einer guten Benutzeroberfläche sein. Es gilt als Selbstverständlichkeit und ist elegant, wenn man es anstelle von "Dateien durchsuchen" verwendet, was meistens die beste Option ist. Lassen Sie uns in den Kommentaren unten wissen, wie es Ihnen geholfen hat.