Improve nuxeo-dropzone UX

• Prevent error:
  • Under the "drag and drop" label, add a description to prevent errors. This description alerts to the supported file types.
  • This description can be edited by the configurator and can include the maximum file size. The configurator can also decide to hide this description.

• Uploading files - feedback:
  • Once the user chooses files to upload, the browser-specific upload window closes and the files will appear over the dropzone. If there are already existing files, show the recently uploaded/uploading files beneath the existing ones.
  • The ideal order of the uploading files is: successfully uploaded, failed to upload and uploading. If the files that failed to upload are separate from the successfully uploaded and uploading, then show the failed uploads first.

• • For single blobs, once a file is uploaded, the dropzone is replaced by the inline notification of the uploaded file with actions to replace and remove on the top right corner. If the file is removed, the dropzone is displayed again

• • When the file is successfully uploaded and automatically created, highlight it for 4 seconds: title becomes semi-bold and in nuxeo-primary color
  • Any error that may occur with the file should appear as an inline error notification. The description of the error shows under the filename
  • When the file is uploading, show size and time estimate if we can get that information, under the filename. If we can’t get that information, the indeterminate circular progress indicator should be on loop

• Alert when dropzone is a required field and is left empty:
  • If this is a required field and the user is trying to create/save the form without any input in it, show error message underneath the dropzone

• Prevent duplicated files (error prevention):
  • If a file has the same name and type of one that already exists, show dialog asking confirmation if the user wants to replace the file or create a new file
  • If more than one file being uploaded has the same name and type of those that already exist, show an option to “apply to all” files, which checkbox. If the user checks this option, the action decided on this dialog will be applied to all files
  • If the user decides to keep both files, add the number of files with that same name, between parentheses, after the filename of the file uploaded (“file title (2).png”)

Structure

Title:

• Font-size: 14px;

• Color: nuxeo-text-default;

Error description:

• Font-size: 12px;

• Color: paper-input-container-invalid-color;

File size/time estimate:

• Font-size: 12px;

• Color: paper-input-container-invalid-color;

Design guidelines here

Invision link: https://nuxeo.invisionapp.com/share/ENVLMNL9SMH