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?
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.
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:
- Make sure that your event handle does not only handle the dashed area (dropbox)
- Use hover CSS to figure out if the file is dropped into the correct place
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!
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