Dropzone UX Design mit CSS verbessern in APEX 20.2

Mit der Veröffentlichung von APEX 20.2 im Oktober 2020 wurde eine neue Dropzone-Komponente zum Hochladen von Dateien nativ im Page Designer zur Verfügung gestellt. Bislang war es nötig, für eine solche Upload-Funktionalität auf bestehende externe Plug-Ins zurückzugreifen. In diesem Artikel möchte ich zeigen, wie man mit wenig CSS-Code die Gestaltung der Dropzone-Komponente optimieren kann.

Der Text weißt den Webseiten-Besucher darauf hin, dass er hier eine Datei per Mausklick über den File Browser auswählen kann. Dennoch ist die neue Komponente schlicht gestaltet, weshalb nicht direkt erkennbar ist, dass hier eine Upload-Schaltfläche zur Verfügung steht und die Datei auch direkt per „Drag and Drop“ in den Bereich hineingezogen werden kann.

Ich habe für die Dropzone-Komponente wenige Zeilen CSS-Code hinzugefügt, um die UX zu verbessern. Die Dropzone soll mit einem gepunkteten Rand und mit einem etwas dunkleren Hintergrund versehen werden. Zusätzlich soll beim Überfliegen des Mauszeigers mit einer Datei der Rahmen in blauer Farbe hervorgehoben werden.

Im Folgenden ist der genutzte CSS-Code zu sehen, der für das neue Design des Dropzone-Elements auf einer APEX-Seite hinzugefügt werden kann.