Redesign the File Upload avatar configuration.
Review Request #9486 — Created Jan. 16, 2018 and submitted
The File Upload avatar configuration didn't really fit in with the rest
of the UI. The avatar area was pretty large, and the file input bumped
up against the Save button. It also lacked some niceties that we offer
elsewhere for file selection, like drag-and-drop uploading.This change completely redesigns it to provide a more self-contained,
guided experience for providing an avatar. The file input is gone (well,
hidden), replaced by instructional text with a "browse" link inside.
The avatar is shrunk down to 48x48px, which is a more appropriate size
for the UI.The entire configuration area for setting the avatar is now within a
dashed box, which functions as a drop area for drag-and-drop operations.
When dragging over the box, the instructional text changes to let the
user know they can drop it there to set the text. On drop, we attempt to
set the file input's list to that of the drop operation. If that fails
(which will be the case on older browsers and on IE/Edge currently), we
display a helpful little alert telling them to try browsing instead.The browse dialog no longer accepts any file type by default. Instead,
on browsers that support this, we list the mimetypes we're comfortable
with. This will default the dialog to showing only compatible files.
Tested clicking the "browse" text to open the dialog and browse for
image files.Tested clicking the avatar icon to open the dialog and browse for
image files.Tested dragging-and-dropping image files onto the drop area to set a
file. Confirmed that on browsers that did not support setting the file
input, I received an alert and didn't hit any JavaScript errors (and
the avatar was not updated). Confirmed on browsers that did support
setting the file input, the image was set and I could upload it.Tested drag-and-dropping PNGs, JPEGs, GIFs, and other file types to
check for errors.Tested drag-and-dropping multiple files at once to check for errors.
Tested saving the form with new avatars using all methods.
All tests were performed on Chrome, Firefox, Safari, IE 10, and Edge.
- Change Summary:
-
Fixed a variable conflict.
- Commit:
-
dbcb28ebeee2798714fa07f888554e80a01354624242674beea7e7c5cfad014d1b3abd067a54d5f0