J3.07.2file picker alternativedesignresearch

Drag-and-drop upload needs a file picker

Aliases: choose file · browse files · input type file

What it is

Dragging a file into a dashed box is a common primary upload path. Keyboard, switch, and many assistive technologies have no “pick up a file on the desktop and drop it into the browser” action. The alternative widget is choose file: a native file picker, a system share sheet, or a Browse button that opens an equivalent chooser. No chooser, drop zone only, and upload closes for anyone not using a pointer.

This leaf names that widget. It is not move-up / move-down for sorting, and not the existence claim “some click alternative”.

Why it happens

Drop upload bridges two worlds: file objects in the OS and a drop target in the browser. The bridge is pointer drag-out and drag-in. Keyboard users live inside the page document and cannot reach desktop icons; mobile AssistiveTouch is also poor at dragging items from a system folder into a WebView. A file picker turns the same bridge into an explicit system dialogue: the person chooses in their own file UI, and the page receives a file list. The path changed; the payload is still files.

Making the drop zone “look clickable” without input type="file" or an equivalent API means the click does nothing. An error after a failed drop that says “please use the desktop app” is not a picker either. The picker must be a focusable, activatable entry on the page.

Studying it

Disable the pointer (or use only keyboard / switch). On the upload component, find Choose file / Browse / Add and complete one local-file upload. Record: is the entry in the tab sequence, does the system picker open, does the selection join the same processing pipe as a drop.

Contrast: drop the same file. Check whether success conditions and errors are the same set. If the picker is single-file while drop accepts folders, log that against capability equivalence. This leaf first confirms the picker exists and can send at least one file.

Where it stops holding

A native app that already uses the system file provider (Files on iOS, Storage Access Framework on Android) already has a picker; it does not need a fake web dashed box. Clipboard-paste of an image can be an extra path and cannot replace the picker — not every file lives on the clipboard. Camera capture is another source; “upload an existing file” still needs the picker. On intranet drive mappings and scan-to-folder workflows, the picker is closer to real work than dragging.

Applying it

  • Pair every drop-upload zone with a focusable Choose file or Browse that opens the system picker.
  • Run picker and drop through the same validation, progress and error handling. Do not treat them as two unacquainted uploads.
  • How to check: drag nothing. Open the picker from the keyboard and send one allowed file. If the entry cannot be found or activation does nothing, drop upload has no choose-file alternative.

Related

  • Same group: J3.07.1 Reordering needs move-up/move-down or a position field · J3.07.3 The alternative path must match the main path's capabilities
  • Nearby: J3.05 Single-pointer alternatives · C1.08 Drag and drop · J3.01 Keyboard access
  • Search terms: file picker · input type=file · drop zone alternative

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/J3.07.2