I just got started with Entity Browser and was super happy to find File Browser module, great work!
Before including it in my distribution I wanted get rid of some critical UX problems, i.e. you can keep selecting files if the cardinality set on the field won't support it. Thankfully I found this problem was already solved in a collaboration of both the Enhanced Entity Browser module and Lightning Media. I ported over their code to work with File Browser.
I also considered creating a patch for Entity Browser but as of now this code needs to know row classes of the views used as well as make sure the Entity Browser does not use Multi-step selection. I hope this code can later join the Entity Browser.

Behaviors added by Patch:

Cardinality = 1
User can select only 1 file. Clicking a new file results in deselecting of selected file. You can double click on a file as a shortcut to select and submit it.

Cardinality = between 1 and unlimited
Users can select multiple files until cardinality is reached. When cardinality equals count of selected files, all unselected files are disabled (look desaturated). Clicking selected files deselects them.

Cardinality = unlimited
You can select as many files as you like.

p.s. because without multi step form it is more important to clearly highlight selected files I incraesed the border size 1px on selected files and made the green color a bit brighter. (and matched the green color to the green check mark on Drupal core's status report page)

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

JurriaanRoelofs created an issue. See original summary.

JurriaanRoelofs’s picture

To make this patch work you have to set your entity browser to Selection display plugin: None in General information.
Then in widget setting you have to uncheck Automatically submit selection on your view.

The problem is that using multi-step selection like in the File Browser included solution Drupal keeps detaching and re-attaching the behaviors after each file selection, side-stepping the Onclick function. I didn't see how to make this work with the multi selection. However, the patch does not break behavior for multi step selection, it just doesn't provide the cardinality support.

I think it would be better to just move away from the multi step selection because it's not what users expect, I also think it's confusing you can select one file multiple times when clicking. The industry standard is to unselect when clicking a selected file and in UX following these standards is super important.

Please note the users I credited in the commit message since I just ported over their code.

JurriaanRoelofs’s picture

Issue summary: View changes
Status: Active » Needs review

I see adding things in the commit message field didn't work, how to I attribute the patch? The original authors are RajabNatshah, phenaproxima, balsama

JurriaanRoelofs’s picture

Status: Needs review » Needs work

The last submitted patch, 2: support-cardinality-in-views-selection-2917823-1.patch, failed testing. View results
- codesniffer_fixes.patch Interdiff of automated coding standards fixes only.

JurriaanRoelofs’s picture

JurriaanRoelofs’s picture

Status: Needs work » Needs review
JurriaanRoelofs’s picture

Issue summary: View changes
samuel.mortenson’s picture

Wow, great work on this @jurriaanroelofs! Do you think the logic here is generic enough to apply to all Entity Browser View displays?

I'm a maintainer there as well and can help push the issue along if so.

Edit - Should have read the Issue Summary, you already cover this there. :-)

JurriaanRoelofs’s picture

no prob! unfortunately it is not, the flexibility of the whole system is great but it's also making it hard to apply style and behavior in a generic way.
We don't need much in terms of structure to hook onto though, it's mostly the grid-item class we're targeting here that is not available elswhere. Then again grid rows can take on many different HTML structures, it's practically impossible to support all. I imagine there might be one person trying to use a complex SOLR view for entity browsing and another poor soul who is integrating some data view that comes with it's own features. etc.

The most generic solution I can think of is targeting all image elements within the view.

samuel.mortenson’s picture

I'd like to include this in the next release, just need to find time to test it. If any other community members have a chance to review the patch it would be super helpful to me. :-)

JurriaanRoelofs’s picture

Understood, yeah it's quite a lot to test and I can imagine you'll find areas that can use refinement. I'd personally like to copy over the use of the checkmark icon in the dropzone tab to the library tab.
Also I'm doing a quick re-upload of the patch here because the previous one contains a console.log message.

jwilson3’s picture

I would love it if there was a generic solution that could be applicable to all entity browser plugins, and honestly don't have enough context to understand the reason given in comment #10 above.

But so, that being said, for those of you working now with Media in core, @citlacom has ported the patch on this issue to the Media Entity Browser module (version 2.x-dev -- the one that supports Media in core), and we would appreciate any feedback you may have.

Thanks!

#2939543: Improving JS behavior to comply with field cardinality

JurriaanRoelofs’s picture

For anyone interested in including the patch is his website or installation profile, at the bottom of this blog post there's a video showing how single-file fields, multifile fields, and unlimited fields are handled: https://www.sooperthemes.com/drupal-blog/8-days-drupal-8-media-managemen...

Ruslan Piskarov’s picture

Just re-attaching #12 patch provided by @JurriaanRoelofs without ".txt" extension, because we can apply by using remote url.

Chris Matthews’s picture

The patch in #15 works great for me. Will this patch be included in the next release?

samuel.mortenson’s picture

Status: Needs review » Needs work

I tried testing this by installing the Standard profile, setting the Article's Image field to a cardinality of three, then using the File browser on a new and existing article. Selections greater than three were not prevented. Seems like the logic still needs some work.

vaccinemedia’s picture

Same here @samuel.mortenson using latest dev version of file browser and the default entity browser (modal) having an image field with cardinality set to 1 I am able to select multiple images.

oknate’s picture

The dev version of Entity Browser now handles cardinality:
#2845941: Enable view to select just a single entry
I haven't tested with File Browser, but this may mean, no patch is needed if using dev version of Entity Browser.