Attachment Selector Revamp

[amilica]

Hello everyone! I’m here to talk about some improvements we could make to the Attachment Selector modal.

Current situation

Modal version (there is a in-page version too, but they look the same)

Identified issues:

• after browsing and choosing the file, the user still needs to click Upload and Select, which is not a normal UX pattern and also prelongs the action that the user wanted to achieve.
• the X icon is not cohesive with the icon that we use now for forever delete (the trash)
• the check icon isn’t clear in its meaning, especially when it’s near the X icon.
• visually unbalanced layout, not enough space between elements (UI / aesthetics issue)
• there is no functionality for replacing files with their latest version.
• opening images in their full size is not clearly defined as an action. It is not intuitive that clicking on the thumbnail will open the image in full.

Redesign

Explanations

Globally, the redesign keeps elements on a vertical layout that’s easily scalable for mobile, with lots of breathing space between elements.

---

Opening the modal, the first action that the user is shown is the Upload one.

Clicking on the Upload button, a file dialogue opens, the user chooses the file and it gets directly uploaded without needing to click another button like in the current version.

While uploading the file, we can replace the button with a standard loading bar.
If the file can’t be uploaded, an error message box will appear after the file format.

---

In the Select Files section, the files are sorted based on date they were uploaded (the newly uploaded ones first).

---

All files have a relevant thumbnail: images are just scaled down in their gray (panel-colored) boxes and documents have their first page shown as thumbnail. If the latter involves more development effort than anticipated, we can just generate a thumbnail showing the icon of the format, the full title and the date of the upload.

---

In this section, 3 actions can be done:

#1 Searching for a file - In case we have a big variety of files, a simple search bar allowing the user to filter by title/ keywords will prove useful.

#2 Choosing a file - In the updated version, clicking on the thumbnail of the file will immediately choose the corresponding file and exit the UI. Choosing the file is the main action of the UI so it should be as simple as possible.

The following actions are available from the 3 dots menu:

#3 Opening the file in a new tab / Downloading it - This action should be clearly defined so the user can perform it with intent not just by guessing (as it currently is for images).

#4 Selecting a file for replacement - In the current version, the user can’t replace a file. I believe that for internal usage in an organization, the functionality of replacing a file in an attachment selector is important to avoid file duplication and to keep a single of truth. Clicking the switch icon will open a file dialogue. After upload, the user is returned to the current UI where he can see the replaced file in the list. When replacing a file, the title stays the same.

#5 Deleting a file - Clicking the trash icon, the file is deleted forever. We make the delete action red, together with its icon, to signal a distructive action.

---

At the bottom right of the whole modal we move the Cancel button so we’d be more cohesive with all other modal UI’s in the XS.

What do you think?

• Proposal link
• Issue link

[CharpentierLucas]

Hi! Thanks for handling this
Note that in a lot of places, we use the ImagePicker instead of the Attachment picker.

---

Recently I proposed a PR to improve things in this modal a bit but it’s not on the scale of a whole redesign.

Considering the changes in the layout, I think it’s fair to expect to break some of this UI backward compatibility here. Most of the custom CSS written for the current AttachmentPicker will probably not work for the new one.

@amilica

While uploading the file, we can replace the button with a standard loading bar.

Do we have a standard loading bar component?

@amilica

All files have a relevant thumbnail: images are just scaled down in their gray (panel-colored) boxes and documents have their first page shown as thumbnail. If the latter involves more development effort than anticipated, we can just generate a thumbnail showing the icon of the format, the full title and the date of the upload.

I never searched about it, but from a quick look, it’s not that easy. Even doing manually for one file type (PDF), it’s not straightforward. Maybe we could use an icon corresponding to the filetype for files that are not pictures?

---

Overall this looks good to me, +1

Thank you!
Lucas C.

[mflorea]

@amilica

there is no functionality for replacing files with their latest version.

There is actually, see Loading... .

@amilica

Opening the modal, the first action that the user is shown is the Upload one.

Have you considered showing / styling the upload action as the first attachment in the list below? It’s a common practice when you have a list that the user can add items to, to have the add action as the first item in the list.

But I agree the upload should happen right away.

@amilica

#2 Choosing a file - In the updated version, clicking on the thumbnail of the file will immediately choose the corresponding file and exit the UI. Choosing the file is the main action of the UI so it should be as simple as possible.

I’m a bit worried about this because the user can select and close the modal by mistake. I don’t think we use this pattern anywhere else in XWiki (where we use modals). We have this for suggest inputs, but that’s inline (not using a modal). I think I prefer to have the Select button next to Cancel, and allow users to double-click to select the attachment.

@amilica

#3 Opening the file in a new tab / Downloading it - This action should be clearly defined so the user can perform it with intent not just by guessing (as it currently is for images).

I think it’s important, for images at least, to be able to view the file in full-screen without leaving context, using the lightbox for instance.

@amilica

In the current version, the user can’t replace a file.

They can. But what you propose makes it more intuitive.

@amilica

#5 Deleting a file - Clicking the trash icon, the file is deleted forever. We make the delete action red, together with its icon, to signal a distructive action.

Why forever? These are attachments, so they end up in the recycle bin no?

Looks good overall.

Thanks,
Marius

[nikpetrenko]

Hello and thank for opening proposal.

I would prefer to introduce functionality only in a limited area, i.e first places that XWiki users visit for changes - user logo and avatar. This covers requests for UI improvements. Loading... Loading.... But not globally in XWiki.

[vmassol]

Hi Adina,

Overall this looks good to me, thx!

The only questions I’m asking myself are the following (they’re independent of your proposal though):

• AFAIK the attachment picker is only used for changing the avatar in XS, right?
• When the user goes to the attachment tab, there’s a different UI for uploading attachments and the attachment picker is yet proposing something different. Do we need to merge something for consistency?
• Same question with the image selector in our WYSIWYG editor: it’s yet a different UI but serves the same purpose as this attachment selector macro. Should we merge them somehow?

Thanks