Improve Dropzone UX Design with CSS in APEX 20.2

With the release of APEX 20.2 in October 2020, a new Dropzone component for uploading files was added as a native component in the Page Designer. Until then, it was necessary to rely on existing external plug-ins for such an upload functionality. In this post, I would like to show how to optimise the design of the Dropzone component by adding a little piece of CSS code to the page.

Dropzone without customization

The text informs the users that they can select a file using the file browser. Nevertheless, the new component has a simple design, which makes it for the user difficult to see that an upload area is available here and that the file can also be directly dragged into the area by “drag and drop”.

I have added a few lines of CSS code for the dropzone component to improve the User experience. The dropzone element should have a dotted border and a slightly darker background colour. Additionally, when holding a file and hover over the area, the border should be highlighted in blue.

Improved layout of the Dropzone element with border
Selecting a file and hovering over the Dropzone will show a blue border

Below is the CSS code I used that can be added to an APEX page as inline code or within a static file for the new appearance of the Dropzone component.