BuddyDev

Search

[Resolved] MediaPress "Drop files here" form stays after user click outside of form

Tagged: , , ,

  • Participant
    Level: Enlightened
    Posts: 34
    Milan Latinovic on July 28, 2019 at 6:58 am #24377

    Hi, yesterday I installed MediaPress and it works great.

    There is one thing that is confusing me thought.

    When user click on image or video icon, form for upload “Drop files here” is presented, which is good.
    https://ibb.co/ByVkXft

    But, when user click away from this part (for example, decides not to post anything at this point), “Drop files here” is still visible on a screen.
    https://ibb.co/mt53LCt

    Desired/Expected behavior:
    “Drop files here” should disappear in a same way that icons and “Post update” disappears.

    Is this something that can be considered as a bug?
    Maybe a simple jQuery patch which would handle this behavior?

    Kind regards,
    Milan

  • Keymaster
    (BuddyDev Team)
    Posts: 24211
    Brajesh Singh on July 28, 2019 at 10:40 am #24380

    Hi Milan,
    Thank you for using MediaPress.

    This is a bit difficult to implement than it seems. It is difficult for us to understand the intent of user.

    The problem is the post form is handled by BuddyPress and as soon as a user clicks outside of the post form(It looses focus and has no content), It gets minimized and the other buttons etc hidden.

    Here is how the user interacts with upload.

    1. Clicks in the post form. The form becomes active and the buttons are shown
    2. The form is still active, the user uses mouse to click on the button and the “Drag Drop” box shows.
    The form has lost the focus and any next interaction will hide the form.
    3. User clicks on “Select Files” and the post form gets hidden(hadled by template pack, not us)

    That is the normal interaction flow.

    If we bind to the focus out of the form, the user won’t be able to select the files.

    I did experiment hiding in past. Here is a tiny js that you can use to hide the box on focus out

    
    jq( '#whats-new-form' ).on( 'focusout', function( e ) {
        jq( '#mpp-upload-dropzone-activity').hide();
    } );

    It won’t server the purpose though as it breaks usability(uploads won’t work).

    This is an enhancement on my list of todo things. We can certainly improve it in future. It will need more subtle handling like checking for the target and seeing if the click happened outside of the upload box. In that case, depending on the media list, we can hide it.

    It will be available in near future.

    Thank you
    Brajesh

  • Participant
    Level: Enlightened
    Posts: 34
    Milan Latinovic on July 28, 2019 at 2:42 pm #24383

    Hi Brajesh,

    Again, thanks for a quick answer, I really appreciate it.

    Yes, I tried to solve this issue with same jQuery (found something similar on StackOverflow conversation) but results were buggy.

    I will invest some more time and try to resolve this. If I have working patch in next 1-2 days I will publish it here. If not, I will continue using plugin with this small limitation and wait for improvement to appear (knowing that this is not time pressure or urgent feature). 🙂

    Thanks,

    Kind regards,
    Milan

  • Keymaster
    (BuddyDev Team)
    Posts: 24211
    Brajesh Singh on July 29, 2019 at 3:32 pm #24392

    Thank you Milan.

    Please do share if you resolve it earlier.

    Thank you
    Brajesh

  • Participant
    Level: Enlightened
    Posts: 34
    Milan Latinovic on July 29, 2019 at 6:55 pm #24399

    Hi Brajesh,

    I was playing with this issue a bit more and I got working solution, with a bit bigger jQuery.

    
/**
 * Function which handles proper appearing and disappearing of "dropzone for MediaPress"
 
 * @author Milan Latinovic
 */
jQuery(document).click(function(e) {
    if ((jQuery(e.target).closest("#mpp-upload-dropzone-activity").attr("id") != "mpp-upload-dropzone-activity") && 
    	(jQuery(e.target).closest("#mpp-upload-dropzone-activity").attr("id") != "mpp-upload-dropzone-activity") &&
        (jQuery(e.target).closest("#mpp-remote-media-url").attr("id") != "mpp-remote-media-url")) {
        jQuery("#mpp-upload-dropzone-activity").hide();
    	jQuery(".mpp-remote-add-media-row").hide();
    }
});

    This way #mpp-upload-dropzone-activity disappears on click out and appears on icon click, which is good behavior and looks logical. Drop zone will disappear as soon as customer gets browse window to search files which is ok. Also, if user clicks media again to add something it will appear properly.

    All this time, uploaded media preview will be present, so customer is not losing experience and functionality works properly.

    I will test it some more against edge cases, but I believe that this is the improvement that I was looking for. You can test it from your side and let me know what you think.

    Kind regards,
    Milan

  • Keymaster
    (BuddyDev Team)
    Posts: 24211
    Brajesh Singh on July 30, 2019 at 6:55 pm #24414

    Hi Milan,
    Thank you for sharing.

    This is nice. It works nicely.
    As you mentioned, the only minor glitch is file selection hides the dropbox.

    This is a very nice enhancement for now.

    Regards
    Brajesh

  • Participant
    Level: Enlightened
    Posts: 34
    Milan Latinovic on July 31, 2019 at 6:57 am #24430

    Hi Brajesh,

    No problem, I am glad I was able to contribute.
    Feel free to use this in next plugin releases if you want.

    I will probably write a positive blog post about this plugin at https://milanlatinovic.com/ because I like it very much. Will keep you updated.

    Kind regards,
    Milan

  • Keymaster
    (BuddyDev Team)
    Posts: 24211
    Brajesh Singh on July 31, 2019 at 8:53 pm #24439

    Thank you Milan.

    I sincerely appreciate you sharing the code and granting us the permission to use it. It will act as the base for the enhancement to the upload experience.

    Thank you for the kind words about the plugin.

    Have a great day.

    Regards
    Brajesh

You must be logged in to reply to this topic.

This topic is: resolved