File Field design update

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

Image may be NSFW.
Clik here to view.

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.

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

• #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

Related Issues

View all styleguide issues

Image may be NSFW.
Clik here to view.

Screenshots (patch #158)

Single file/image fields
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.

Single file/image fields (RTL)
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.

Single file/image fields (No JS)
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.

Multi file/image fields
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.

Multi file/image fields (RTL)
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.

Multi file/image fields (No JS)
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.

Default image
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.

Default image (No JS)
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.