File Field design update: Upload field.

Problem/Motivation

In terms of interaction, file fields could be a lot more accessible. The style guide proposes both a new appearance and a new interaction design.

Proposed resolution

1. Files can be added from the local filesystem using drag-and-drop, or using the traditional click-browse-attach workflow (which hands the action off to the OS and back)
2. Files upload automatically once added by dropping or browsing.
3. Uploaded files provide a preview where possible (images) or a file-type-specific icon where not.
4. File fields with multiple attachments use progressive disclosure to reveal each additional slot in turn. They should support dropping multiple files onto a single dropzone to upload multiple files at once.
5. The “Browse Library” functionality is speculative at this time, but designed to accommodate contrib.
6. Some aspects of the design are postponed to follow ups (improving multiple file fields, the progress bar, mobile improvements). See the complete list below.

An important reason to encapsulate much of this functionality, is that it tends to scale much better amongst many items and especially if placed between forms it can serve as a clear visual landmark.

Aspects of proposed design postponed to follow-ups

• #3029340: File Field design update: Multiple file fields
• #2115469: Image Field style update
• #2863846: File Field design update progress bar
• #2863808: File Field design update mobile specific table issue

Test Pages

• A file field will have to be created and add to an existing content type

Screenshots (patch #191)

Empty file/image fields

Filled file/image fields