Html5 drag’n drop file upload, shenanigans used only by developers?

Uploading files has been done since the ice age of web development. In fact uploading a file using Html4 and an iFrame is pretty easy and does not even require a page refresh and about 0 line of code on the front-end, obviously you won’t get a progress bar but does it really matter?

Uploading in a nutshell:

<form method="POST" id="frm_upload_logo" action="/ui/settings/logo" target="upload_logo_iframe" enctype="multipart/form-data">
 <input type="file" name="logo">
</form>
<iframe src="/blank.html" name="upload_logo_iframe" class="upload_frame"></iframe>
 
<script>
        $("iframe[name='upload_logo_iframe']").load(function(){
            if ($(this).contents()[0].URL.indexOf('/blank.html') == -1)
            {
                // Upload is complete, do something
            }
        });
</script>

So… Html5

Looking for a easy way of implementing desktop drop file upload for CakeMail I was confronted to 2 issues. One, I’m not sure anyone is using drop file uploading beside web developers using Gmail. And also, my current implementation require 0 lines of code & is stable in every browser. Should I even think about implementing a point of failure with a different behaviour in older browsers when I got this solid solution?

Dragging, really?

Trying to look for articles on the usefulness of the drag and drop file api is futile, you will be greeted only by articles talking about implementation in 50 ways possible. Only thing left to do? Asking friends if they ever dragged a file in their browser. The response is overwhelming, 0 ever tried it.

Frankly even me when I do it I don’t find it’s a great experience even if, I agree, that it is sometimes convenient. It always involve bringing my finder window at the forefront, closing the multiple finders I had open, moving the finder so I can see at least a part of the upload box, and finally dragging it in a partially shown box. Not what I would consider a great user experience.

Really not sure this is helping normal users navigating your app, finding that file in their folder in another window also gets them completely out of your app. Personally I think we just like it because we drool at the fact we are dragging files in our web apps and it works, not because it’s really useful.

The Html5 file api

Then there is when you need to upload big files, now you get a bit of trouble with html4 upload. There is no api giving you progress on your upload and that arguably can be pretty useful. But in this day an age, you need to really think what a big file is when most people upload at 300k per seconds I rarely see a use case for that (beside for video and big archived files).

I’m I saying that you should absolutely not implement those api’s? I’m not, if you have time on your hand and want to add some alternative paths in your app great, or if you are uploading big files then you need a progress bar instead of just a gif loader. But I think you should really think about the usefulness of those integration.

In the end you still have to default to HTML4 form uploading for IE users and having 2 implementations for the same functionality always add complexity, testing time and bugs.

Got any articles or paper on uploading files user experience design? Please post them in the comments, I would be more than happy to read them!