Problem/Motivation

File and Image fields are displayed inside a collapsed container when configured to be multi-value. That can be nice because it saves some space, but can also be confusing. There is a pronounced UX flaw when user uploads files using "Upload" button (AJAX). Files will be uploaded and displayed, but container will be collapsed. This is specially confusing when you have required alt/title or description fields, which can be easily overlooked when field is collapsed.

It could also be nice to indicate that there are files in field even when collapsed:

Proposed resolution

Widget expanded by default when there are files in it or at least stays expanded after upload.

Remaining tasks

None yet. Discussion is open.

User interface changes

None yet.

API changes

None are expected.

Original report by [username]

This issue was reported by tsvenson in #625958-92: Support Uploading Multiple Files for HTML5 Browsers via #multiple attribute.

CommentFileSizeAuthor
#13 file_mwidget.png11.35 KBandypost
#13 1912784-13.patch2.59 KBandypost
#9 improve_multivalue_file_field_ux_1912784_9.patch2.66 KBslashrsm
#6 improve_multivalue_file_field_ux_1912784_6.patch2.62 KBslashrsm
#3 improve_multivalue_file_field_ux_1912784_3.patch1.6 KBslashrsm
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

slashrsm’s picture

slashrsm CreditAttribution: slashrsm commented
Issue tags: +user experience, +#d8ux, +Media Initiative

Add some tags.

tsvenson’s picture

tsvenson CreditAttribution: tsvenson commented

Thanks for filing this issue @slashrsm. I think it is very important that we identify situation like this where Drupal doesn't allow the for enough tuning of the UX for users.

This is a great example where small adjustments and control over the default behaviour can greatly enhance the UX for those working with the content.

However, just making these options available for each individual fieldgroup isn't enough. It needs to be complemented with the ability to create a site-wide default behaviour. Then allow for making it possible to override that on individual fieldgroups.

The UX win here is that it will create a predictable expected behaviour for the users. No longer will they feel the need of having to expand fieldgroups just to check if they need to do anything in there.

It would also be a win for sitebuilders as they configure this behaviour in one place. Those few times they need to override it will be easily identified as a result.

slashrsm’s picture

slashrsm CreditAttribution: slashrsm commented
Status: Active » Needs review
FileSize
improve_multivalue_file_field_ux_1912784_3.patch1.6 KB

First we have to define when do we display this field expanded and when collapsed. Do we display expanded when we have files in it and collapsed when not? Do we display expanded only after upload? Some other behaviour? I am personally against first option as it could end up in files being expanded all the time and this is probably not what we wanted to achieve with wrapper at first place.

I, however, like the idea of making summary a bit more comprehensive. Attached patch adds info about number of files in the field.

Status: Needs review » Needs work

The last submitted patch, improve_multivalue_file_field_ux_1912784_3.patch, failed testing.

swentel’s picture

swentel CreditAttribution: swentel commented

Partially duplicate of #1884148: field widget disappears when increase cardinality for image to allow multiple values - however, I can see the 'count' as an interesting feature request though ..

slashrsm’s picture

slashrsm CreditAttribution: slashrsm commented
FileSize
improve_multivalue_file_field_ux_1912784_6.patch2.62 KB

This fixes tests, but it is most likely not the best solution. Currently we modify field's title, which affects also other usages of the title. It would be better to achieve this without that (most likely by modifying theme function that handles element).

slashrsm’s picture

slashrsm CreditAttribution: slashrsm commented
Status: Needs work » Needs review
swentel’s picture

swentel CreditAttribution: swentel commented
Title: Multivalue File/Image fields collapsed by default event when there are files in it » Add counter to fieldsets of files and images
Category: bug » feature

#1884148: field widget disappears when increase cardinality for image to allow multiple values got in fixing the original bug - this is now more of a feature request I guess.

Adjusting the title

slashrsm’s picture

slashrsm CreditAttribution: slashrsm commented
FileSize
improve_multivalue_file_field_ux_1912784_9.patch2.66 KB

And here is the re-roll against latest 8.x.

slashrsm’s picture

slashrsm CreditAttribution: slashrsm commented
Issue summary: View changes

Updated issue summary.

nancy.beutels’s picture

nancy.beutels CreditAttribution: nancy.beutels commented

SprintWeekend 2014
tried to test patch 9 with simplytest.me but got an error while loading patch

nancy.beutels’s picture

nancy.beutels CreditAttribution: nancy.beutels commented
Assigned: Unassigned » nancy.beutels
Issue summary: View changes

SprintWeekend2014
This patch no longer applies?

slashrsm’s picture

slashrsm CreditAttribution: slashrsm commented
Status: Needs review » Needs work

Probably needs reroll.

andypost’s picture

andypost
he/him
Primary language Russian
CreditAttribution: andypost at Skilld commented
Assigned: nancy.beutels » Unassigned
Issue summary: View changes
Status: Needs work » Needs review
FileSize
1912784-13.patch2.59 KB
file_mwidget.png11.35 KB

New patch:
1) render of counter moved to special variable to be able access string translation
2) sad use of safe markup... title should be changed here because before this place it will be used for all sub-elements
3) css moved to file module... needs better ideas
4) test moved to widget test but somehow failed but widget works

  1. +++ b/core/modules/file/lib/Drupal/file/Plugin/field/widget/FileWidget.php
@@ -140,12 +140,14 @@ protected function formMultipleElements(EntityInterface $entity, array $items, $
+      $title_suffix = $count ? format_plural($count, 'Contains one file', 'Contains @count files') : t('Field empty');

    no such function 

  2. +++ b/core/modules/file/lib/Drupal/file/Plugin/field/widget/FileWidget.php
@@ -140,12 +140,14 @@ protected function formMultipleElements(EntityInterface $entity, array $items, $
+      $elements['#title'] = $title . ' <span>(' . $title_suffix . ')</span>';

+++ b/core/themes/seven/style.css
@@ -547,6 +547,10 @@ details summary {
+details summary span {
+  text-transform: none;
+  font-weight: normal;

    suppose that span should be added later in processMultiple()

    and why this details placed into seven theme but not in file module or classy theme?

Status: Needs review » Needs work

The last submitted patch, 13: 1912784-13.patch, failed testing.

The last submitted patch, 13: 1912784-13.patch, failed testing.

Version: 8.0.x-dev » 8.1.x-dev

Drupal 8.0.6 was released on April 6 and is the final bugfix release for the Drupal 8.0.x series. Drupal 8.0.x will not receive any further development aside from security fixes. Drupal 8.1.0-rc1 is now available and sites should prepare to update to 8.1.0.

Bug reports should be targeted against the 8.1.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.2.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.1.x-dev » 8.2.x-dev

Drupal 8.1.9 was released on September 7 and is the final bugfix release for the Drupal 8.1.x series. Drupal 8.1.x will not receive any further development aside from security fixes. Drupal 8.2.0-rc1 is now available and sites should prepare to upgrade to 8.2.0.

Bug reports should be targeted against the 8.2.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.6 was released on February 1, 2017 and is the final full bugfix release for the Drupal 8.2.x series. Drupal 8.2.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.3.0 on April 5, 2017. (Drupal 8.3.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.3.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.6 was released on August 2, 2017 and is the final full bugfix release for the Drupal 8.3.x series. Drupal 8.3.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.4.0 on October 4, 2017. (Drupal 8.4.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.4.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.4 was released on January 3, 2018 and is the final full bugfix release for the Drupal 8.4.x series. Drupal 8.4.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.5.0 on March 7, 2018. (Drupal 8.5.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.5.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.5.x-dev » 8.6.x-dev

Drupal 8.5.6 was released on August 1, 2018 and is the final bugfix release for the Drupal 8.5.x series. Drupal 8.5.x will not receive any further development aside from security fixes. Sites should prepare to update to 8.6.0 on September 5, 2018. (Drupal 8.6.0-rc1 is available for testing.)

Bug reports should be targeted against the 8.6.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.6.x-dev » 8.8.x-dev

Drupal 8.6.x will not receive any further development aside from security fixes. Bug reports should be targeted against the 8.8.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.9.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.7 was released on June 3, 2020 and is the final full bugfix release for the Drupal 8.8.x series. Drupal 8.8.x will not receive any further development aside from security fixes. Sites should prepare to update to Drupal 8.9.0 or Drupal 9.0.0 for ongoing support.

Bug reports should be targeted against the 8.9.x-dev branch from now on, and new development or disruptive changes should be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.9.x-dev » 9.2.x-dev

Drupal 8 is end-of-life as of November 17, 2021. There will not be further changes made to Drupal 8. Bugfixes are now made to the 9.3.x and higher branches only. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.15 was released on June 1st, 2022 and is the final full bugfix release for the Drupal 9.3.x series. Drupal 9.3.x will not receive any further development aside from security fixes. Drupal 9 bug reports should be targeted for the 9.4.x-dev branch from now on, and new development or disruptive changes should be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.9 was released on December 7, 2022 and is the final full bugfix release for the Drupal 9.4.x series. Drupal 9.4.x will not receive any further development aside from security fixes. Drupal 9 bug reports should be targeted for the 9.5.x-dev branch from now on, and new development or disruptive changes should be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.