Certainly, there are many file upload tutorials around the web, but I noticed a small issue on these examples. While I was working on the implementation of my file upload (Drag & Drop) case, I struggled with drop out of box issue. Of course, there are many ways to tackle this problem –depending on your technology set-, so I will cover the basic understanding of the solution. But, before doing that, we’d better clearly explain what I mean by ‘drop out of the box issue’.

Definition of the bug

The gif below is a fine illustration of expected user behaviour on drag & drop operations, but what if the user drops the file outside of the predefined box?

drag-drop-upload out of box issue
Source: https://css-tricks.com/drag-and-drop-file-

If this exception is not handled, your browser will basically show the dropped picture from your local and the browser will point to the address of your file in its local address.

file drag and drop out of box issue

Solution!

The reason is simple: As you might already know, you should be using preventDefault() and stopPropagation() methods in Javascript. Screen Shot 2017-05-19 at 21.12.42

And expectedly, you will remove/add some CSS class as the user hovers over and out of the dropbox (dashed area). So, if you limit your event target only for the dropbox, outside of the dropbox area will not trigger preventDefault() and stopPropagation() methods. And hence, when you drop the file outside of the box, the rest of the page will act upon the default behaviour. As a result of these inputs, we need to follow two basic points for our solution:

  1. Make sure that your event handle does not only handle the dashed area (dropbox)
  2. Use hover CSS to figure out if the file is dropped into the correct place
Screen Shot 2017-05-19 at 21.26.05
Key line for the solution

Highlighted code line above does the check mentioned in the 2nd statement above. This piece of code runs when the drop event is triggered. And the translation is as follows:

If the dropped area does not have “is-dragover” class, do nothing!

Last Word

Drop out of box bug is definitely the result of a negative testing approach. If you do not handle this exception, your interface will still work but we do not want barely working product. This bug fix will increase the quality of your file upload interface and increase user satisfaction.

Sercan Leylek / OSLO

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s