Improve UX in single file upload field

• Type: Bug
• Status: Closed
• Resolution: Won't Fix
• Affects Version/s: Master
• Fix Version/s: None
• Component/s: Documents & Media
• Labels: None
• Fix Priority: 4

This has been an issue in previous Liferay versions, but since we are actively working on improving DM it is now relevant to point out.

Steps to reproduce:

1. Navigate to Documents and Media
2. Add a basic document to access the form field

Expected result:
1. The styling of the button should be updated to be consistent with file upload buttons elsewhere in Portal, like in the Google Drive shortcut:

2. The text could also be updated to be consistent with file uploads elsewhere; i.e. use "Select File"/"No file selected"

3. The choose file button should be outside the File field, like in Open Graph/Google Drive shortcut

4. Since no changes can/should be made to the File field, it should be disabled.

Actual result:
1. The styling of the upload button is outdated. It is also off-center in the File field.

2. The text reads "Choose File"/"No file chosen"

3. The upload button is inside the file field. However, clicking on any part of the File field triggers the uploader so it is pointless having a button within the field.

O5wG1sg4Lt.mp4

4. See #3

Reproduced on:
Tomcat 9.0.37 + MySQL 5.7.
Portal master 5aceff3ec63a5118178d7967f0903964b769a773

 

Design

Proposal