'Add from files' on a many_many field only allows the selection of a single file

[kinglozzer]

From @DorsetDigital on November 9, 2017 13:8

I have a page with a many_many relationship to Image
In the CMS, it is possible to drag & drop multiple files to the UploadField as expected.

If you choose 'Add from files', the file selection popup appears, but it is only possible to select a single file at a time. I would expect to see the checkbox functionality here so I can add multiple files in one operation.

Copied from original issue: silverstripe/silverstripe-cms#2019

Acceptance Criteria

• Using an UploadField allowing multiple uploads, I can select multiple files from the "add from files" view
• I get a clear visual indication in the "add from files" view if it's possible to select multiple files
  Design note: Checkbox on multiple, checkmark on single
• I can view the details for a file on multiple selection mode without being forced to select it for insertion
  Design note: Click on whole item both selects and views detail for single select mode. Click on checkbox selects on multi select mode.
• If selecting multiple files is allowed, I get an overview of how many files I have selected before inserting
  Design note: Count on button (multi select only)
• I can unselect files in multi select mode
• It's not possible to click "Insert" when no files are selected

Notes

• Excludes moving batch actions to the bottom consistently (AssetAdmin and modals) - separate story
• Excludes mobile view visual changes (see Modals should take entire space on mobile silverstripe-admin#437)
• Excludes lasso selection in modal
• Excludes fixing multi insert in TinyMCE (should be done by content blocks anyway)
• Excludes disabling already associated items
• Excludes creating Behat tests (more startup effort required)
• Relates to Move Asset bulk actions bar down #735

Pull requests

• Fix stop fileSchema abolishing actions from previous props silverstripe-admin#450
• Multi-selection for upload field in gallery #743
• Fix aligns Form actions container with the rest of the "bottom bars" silverstripe-admin#456

Designs

Single:
https://invis.io/WZFWVRZC9Q2#/280025971_Files_Single_File_Insert_Start

Multi-select:
https://invis.io/NP79NDU4J#/270792056_Pages_Batch_Insert_Upload_Selected_One_File_Copy_8

Edit and replace a single file
https://invis.io/NP79NDU4J#/275421963_Pages_Batch_Insert_Upload_Select_Files_Inserted_Copy_4

[tractorcow]

For modal popups, we could enable a single batch action (select / insert), but only for multi-select, and not for embed modals. I.e. UploadField with multi=true, but not html editor insert media.

[tractorcow]

Since the modal intentionally was limited to a single file insert, I'm re-classifying this as an enhancement.

[chillu]

@newleeland @clarkepaul The UX challenge here is to harmonise the "insert" sidebar on the modal (showing a single file) with the fact that you should be able to select multiple ones. Ideas?

[newleeland]

@chillu
This may be more work on the frontend, than simply implementing an "insert X files" into the "page" as it may skip a couple of configurations checks that selecting a single item has in the sidebar. e.g.

• Tooltip/Alt text for accessibility
• Permissions
• Image configurations (alignment, scaling)

I'd imagine there will a lot of cases where multiple images will need to be uploaded to the same configuration like a gallery view. If we simply inserted a couple of images, the user may need to configure the images individually after inserting.

The full solution would be to give users step through, and configure all the files AND
have the ability (i.e. Button) to just insert all of them.

[newleeland]

Potential design
https://invis.io/NP79NDU4J#/268880546_Pages_Batch_Insert_Media_Copy

This leans towards the UI and behaviour already used in asset admin.
I would also be good to have side panel/file detail appear on checking an item as well, rather than just appearing on selecting the overall file.

Design Excludes changes to search

[clarkepaul]

Had a chat to @newleeland and there are still a few things which need to be resolved.

• Confusing with the terminology selected vs checked (user is NOT inserting the option being viewed)
• Without checking an item can they insert?
• What happens when a user edits an image but instead of swapping it one for one with another file, but instead swaps it for multiple files?
• "Select all" "Deselect" could be separated out—I'm not even sure if that is something which is as high priority as the rest of the issue IMHO

It might be good to take the flow from:

1. Inserting a single item in TinyMCE (previously nothing selected),
2. Replacing single item
3. Replacing single item with multiple (presume this would work after these changes)
4. Editing the different already inserted items and saving

[clarkepaul]

Had chat to @chillu and this is going to be limited to uploadfield which I didn't click on to, so no preview needed when inserting multiple.

[newleeland]

[Feedback required] Update on batch insert via uploadfield design https://invis.io/NP79NDU4J#/269647120_Pages_Batch_Insert_Upload_Selected_One_File

[chillu]

Latest designs look good. I assume those toolbar placements at the bottom are consistent with what we'd do in the main AssetAdmin section? We might drop the "insert X files" and just use "insert file(s)" if it turns out to be a pain to implement.

[tractorcow]

@newleeland I think we would be safer to use a consistent batch alert popup, whether that's floating from the top, or as you've designed from the bottom. What is your feeling on this?

[newleeland]

Updated design
https://invis.io/NP79NDU4J#/269919919_Pages_Batch_Insert_Upload_Selected_One_File_Copy_4

• Includes cards with "View" buttons that allows users to look into the items from the side panel. This fixes the main flaw with the previous design, which didn't allow users to "check/review" the files when more than one item is selected.
• When more than one item is selected, carousel navigation will appear on the side panel
• Updated "selected" state different to AssetAdmin as the interaction are different, there is no "checked" states.

@chillu Yeah, "insert file(s)" is fine. I've updated the design for this
@tractorcow Yes! we are trying to build it a consistent pattern with assetsadmin. The direction we are leaning towards is having it selected action bar on bottom i.e current mobile position. throughout the CMS (inc. files area) rather than the top where it will compete for space with other actions. We need to update some patterns here to accommodate new functionality, as current patterns are quite limiting.

[flamerohr]

Hi, the suggestions from @newleeland in the previous post about "Carousel navigation" is quite a scope creep...

I don't quite understand the point here

This fixes the main flaw with the previous design, which didn't allow users to "check/review" the files when more than one item is selected.

If we re-enabled checkboxes then the ability to view is still available when more than one is selected, like how the asset-admin currently functions.

This would almost seem more suited to rebuild a modal-purposed Gallery, rather than continuing to bastardise the current admin-section designed gallery.

[chillu]

Agree with @flamerohr that carousel is out of scope - but @newleeland had already indicated that as optional in the designs anyway.

I get Jared's point about maximising the click area for this use case, rather than making users aim for the checkbox, and have "view item" as the main action. It also allows users to insert faster, by not forcing them to load the edit form before an "insert" button appears. In most cases, the thumbnail plus shortened title in the thumbnail view are enough info to be sure what you're inserting.

@flamerohr How much work do you think it is to (cleanly) create this variation (in points), vs. just enabling the existing checkboxes?

"Editing state" is a bit of a misleading annotation here - when you select one or more files to be associated with an UploadField, there's no ability to edit them in the modal dialog. An edit trigger there takes you to another window. Here's how it looks:

[flamerohr]

puppy! so cute

@chillu
To create this variation:

• Clean up the css - it's a bit hardcoded to be the way it is designed currently
• Refactor the onclick behaviour
• Add new "View" corner icon
  To enable checkboxes:
• Re-enable it in the GalleryItem component

Both will need the following:

• Test and if possible enable the drag-select feature (possibly not for MVP)
• Remove the Insert button on the form
• Define a Batch action to trigger insert
• refactor UploadField to accept multiple files from selection.

I've suggested to enabled checkboxes as a short-term solution and the variation as a long-term solution, but keen to hear how the user-testing is going from Jared

[newleeland]

Potential prototype if Batch/single files insert
Multi-select https://invis.io/NP79NDU4J#/270792056_Pages_Batch_Insert_Upload_Selected_One_File_Copy_8

• Only clicking checkbox, selects items to be inserted
• Click on anywhere on the rest of "card" would highlight (blue border) the card and cause the info panel to open, closing it will also remove the highlighting

Single select variant https://invis.io/NP79NDU4J#/275139299_Pages_Batch_Insert_Upload_Selected_One_File_Copy_19

Edit/Replace media file from UploadField
https://invis.io/NP79NDU4J#/275421963_Pages_Batch_Insert_Upload_Select_Files_Inserted_Copy_4

[tractorcow]

Looks good @newleeland.

We just need to add this footer bar to the modal view.

[chillu]

@newleeland Please review the "insert media" designs for the HTML editor, and see if we need to consolidate the position of the "insert button". Also link to the ux issue where we plan to move the batch actions in asset admin down to the bottom, mgith be best to do this at the same time

[newleeland]

@chillu
With us upgrading UploadField file insert with single AND new multiple files insert UIs, the file single file insert modal for TinyMCE editor (which at the moment uses the same modal UI as the current modal UI as Uploadfield) should use the same updated UI for single file insert as Uploadfield would use. So insert single files are consistent
i.e.
Single:
https://invis.io/WZFWVRZC9Q2#/280025971_Files_Single_File_Insert_Start

Multi-select: https://invis.io/NP79NDU4J#/270792056_Pages_Batch_Insert_Upload_Selected_One_File_Copy_8

Edit and replace a single file
https://invis.io/NP79NDU4J#/275421963_Pages_Batch_Insert_Upload_Select_Files_Inserted_Copy_4

Mobile view insert (new)

https://invis.io/NP79NDU4J#/278948651_Pages_Insert_Media_Modal_Selected_Multiple_Files_Mobile

There isn't a story to move the Bulk actions toolbar down, So I'm going to create one.