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.

Answer 1

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.