Problem/Motivation

In order to improve user experience with reduced action steps in Entity Browser, this ticket is created: #2822009: Improved MultiStep selection display. In that ticket adding/removing elements in multistep selection display is done over ajax requests, where overall user experience is way better.

We want to add support for usage of provided functionality of multistep selection display with upload widget. And one of upload widgets for entity browser is dropzonejs submodule -> dropzonejs_eb_widget.

Proposed resolution

Possible solution to trigger automatic selecting of entities with dropzonejs widget is to trigger submit process of widget and after it's successful to return list of added entities. That list can be used to trigger selection of entities in multistep selection display.

In this case process is a bit longer then in case of view widget, since files has to be uploaded and entities created, before we can trigger selection in multistep selection display.

These are steps:

  1. drop files in dropzone
  2. they are automatically uploaded and validated
  3. after validation and upload is finished, clear all rejected files, so that at end we have files that can be used to create entities
  4. over ajax request, automatically submit form and that will create entities and list of created entities will be returned
  5. returned list will be used in javascript to trigger selection in multistep display (and this part is similar to view selection widget)

Remaining tasks

  • Same functionality should be provided for default upload widget

User interface changes

In user interface there is change that "Select entities" button is not displayed if widget is using "auto_select" functionality. Because that flag means that widget it self will handle selection and there is no need for default submit action to be trigger by user.

*Edit* Usability example (with keeping list of rejected files)

Example

Comments

mtodor created an issue. See original summary.

mtodor’s picture

StatusFileSize
new7.33 KB
mtodor’s picture

slashrsm’s picture

Status: Active » Needs review
mtodor’s picture

StatusFileSize
new7.28 KB

Applied change related to enity_browser modifications in #2822009: Improved MultiStep selection display and also from comments on github.

Pushing patch here for checking of tests and easier usage in packaging tools.

mtodor’s picture

StatusFileSize
new9.24 KB

Re-based patch and adjusted schema to be compliant to changes in entity browser issue.

mtodor’s picture

Assigned: mtodor » Unassigned
primsi’s picture

Status: Needs review » Needs work

Great work! A few questions/notes:

  1. We need to update the settings form too and add defaultConfiguration
  2. What happens if the file is too big and it gets rejected because of the size limit
mtodor’s picture

StatusFileSize
new604.12 KB

@primsi: Thank you!

  1. Default settings should be provided by entity browser WidgetBase from related issue: #2822009: Improved MultiStep selection display. Or I'm missing something?
  2. Short explanation of functionality: since we want to have auto upload and submit, we have to get rid of invalid files (big size, wrong format, exceeded cardinality, etc.). So after all file uploads are done and validation process is finished, rejected files are removed, so that only accepted files are in list -> and then dropzonejs widget form is submitted over ajax. I have also added gif, so you can see how it works.
primsi’s picture

#9.1 Oh, my bad. Then it's probably not needed.
#9.2 The thing I noticed the other day in another issue (which was dealing with implementing maxFiles) is that if the upload fails because of the file is too big and if it then gets removed automatically, the user has no way to know what went wrong. So in the other issue we ended up reacting to maxfilesexceeded instead of queuecomplete. Not sure if this helps.

mtodor’s picture

Assigned: Unassigned » mtodor

Regarding point 2.: We had "short" discussion on IRC. Conclusion is that best option would be to auto-submit all valid files (and auto selected them) and that rejected files stay in dropzonjs list -> so that it's transparent for user what really happened and why files are rejected.

mtodor’s picture

Assigned: mtodor » Unassigned
StatusFileSize
new10.75 KB
new1.74 MB

Here is solution for functionality explained under #11. Gif with demonstration of functionality attached too.

mtodor’s picture

Status: Needs work » Needs review
chr.fritsch’s picture

StatusFileSize
new9.43 KB

I removed the changes which are made in #2827120: DropzneJS is cleared on every Ajax response from the patch.

mtodor’s picture

Issue summary: View changes
Issue tags: +Needs usability review
chr.fritsch’s picture

mtodor’s picture

Status: Postponed » Needs review
StatusFileSize
new10.67 KB
new6.08 KB

Rebased patch and made adjustments related to committed changes done in #2822009: Improved MultiStep selection display.

Additionally - fix issue that validation wasn't triggered properly and error message in case validation has failed will be propagated properly to front-end in case of ajax request.

woprrr’s picture

Status: Needs review » Reviewed & tested by the community

Work well for me that ok :) Great job guys !!!!

Just one thing about tests, that would be great to add this validation to tests in other issue seen with @chr.fritsch #2824871: [meta] Extend DropzoneJs test coverage

  • chr.fritsch committed 2f2f9f5 on 8.x-1.x authored by mtodor
    Issue #2823670 by mtodor: Improved MultiStep selection display (DropZone...
chr.fritsch’s picture

Status: Reviewed & tested by the community » Fixed

Thanks everyone for testing and mtodor for this amazing work.

Committed and pushed.

Well done

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.