[SPIKE] Dropzone interface for file upload component

[querkmachine]

One of the items flagged in the recent audit of Frontend was the lack of a user interface indicating that files could be dragged and dropped into the File Upload component.

• Upload file component has no visual target area when dragging and dropping a file #3685

Putting aside that our file upload component is the browser's native control with only light style customisations (and the usability issue is probably the onus of browser vendors, not us), I figured I'd do a technical spike of how we could do something about it in Frontend.

This is principally a technical prototype. It is intentionally very basic and ugly, and probably not as accessible as it could be, but it does (basically) what it says on the tin.

Screenshots

Initial state

Appears as a standard, native file input.

With a file dragged over the viewport

A previously hidden div with a dashed grey border and instructions that the user can drop a file here are revealed. The native file input is hidden.

With a file dragged over the dropzone

The div with instructions gains a more prominently coloured border when the user's cursor is within the bounds of it, indicating that it is safe to drop the file.

After a file is dropped

The component returns to only showing the native file input, with the value correctly set.

[owenatgov]

I'm aware this is in draft however an initial thought: Could the "drag here" UI be on the component by default? That would save the need for js at all. Probably needs a designer to sus this out but this is still just a spike so it's not urgent.

[querkmachine]

@owenatgov It absolutely could, that's how I've built them in the past when on greenfield projects. In this case, I was looking to avoid potential breaking changes, but I suppose that's a practicality I shouldn't worry about too much in a spike.

Edit: Actually, you do still need JS if you want to enhance it in certain ways, such as presenting the name of the file(s) back to the user, or applying a visual change when the user drags a file over the droppable area (as opposed to on any kind of hover).