start file upload upon selection

Question

Normally, to upload a file, it would be two-steps process - select a file and then confirm upload. I am working on uploading profile picture. Since profile pic is usually small, I want to reduce mouse-clicks for my users by making the file upload to start upon file selection. Please suggest good, and perhaps common, ways to achieve this (I would also like to learn their pitfalls, if any). Thanks.

score 6 · Accepted Answer · answered Aug 19 '11 at 21:49

6

The change event will fire when a file is selected from a file upload field. The value of the field will be '' if no file is selected (field is cleared).

<form method="post" action="upload.script">
    <input type="file" id="formfile"/>
    <input type="submit" id="formsubmit"/>
</form>

<script type="text/javascript">
    var file= document.getElementById('formfile');
    var submit= document.getElementById('formsubmit');

    // If scripting is available, can auto-submit the form, so no submit
    // button needed.
    //
    submit.parentNode.removeChild(submit);

    // When field is filled in with a filename, submit form
    //
    file.onchange= function() {
        if (this.value!=='')
            this.form.submit();
    };
</script>

Is this a good idea? Questionable. Automatically submitting a form if the user doesn't expect it may have a negative impact.

answered Aug 19 '11 at 21:49

bobince

498,320
101
621
807

Thanks for providing your solution. As for the problem you mentioned, I think it wouldn't cause major concern in my case. – tamakisquare Aug 22 '11 at 17:40
The call to form.submit() will fail on IE8 and lower with access denied. – Maurice Flanagan Sep 12 '12 at 22:58
I didn't try IE6, just IE7 and IE8 and it gave an access denied on the call to form.submit() - I assumed because of this http://stackoverflow.com/questions/3935001/getting-access-is-denied-error-on-ie8/6376654#6376654 – Maurice Flanagan Sep 14 '12 at 11:07
@Maurice: works fine for me in IE8. The linked issue is only that you get Access Denied if you called `click()` on the file upload field yourself... this example doesn't do that. – bobince Sep 14 '12 at 13:26
Ahh ok I see, I tried it and the exception happens on the call to submit but only if you have previously called .click(), odd. – Maurice Flanagan Sep 14 '12 at 17:28

score 2 · Answer 2 · answered Aug 19 '11 at 21:38

You could use JQuery to automatically post the file to the sever upon selection...

Problems:

What if the user doesnt want to choose that file but the file has already be uploaded to the server?

What if the previous takes place before the file has finished uploading?

How about when the user doesn't do anything and closes the page? How long will you keep the file

score 1 · Answer 3 · answered Aug 19 '11 at 21:41

If you use GMail, you'll notice they have a drag-drop solution for attaching files to an e-mail. Drag from your desktop onto a predefined region and wallah.

If you have HTML5 support for the people using this (most should if they're keeping up to date) then you could use the drag-drop built in to HTML5.

Try looking at this: http://www.thebuzzmedia.com/html5-drag-and-drop-and-file-api-tutorial/

You could also give something like Plupload a try (http://www.plupload.com/) but that might be overkill for this. Plupload is more will suited for larger files that need progress animations and chunking. However, I know you would be able to script it such that the upload starts immediately and you redirect as soon as it completes. It also might need server-side work that you aren't set up for.

start file upload upon selection

3 Answers3