disable submit button until file selected for upload

Question

I have a form for uploading images. I\'d like to disable the submit button, until user selects an image to upload. I\'d like to do it with jQuery. Currently I have a JavaScr

Answer 1

Try

   $('#my_uploader').change(function() {
      if($(this).val()) {
        $('#my_submit_button').attr('disabled', '');
      } else {
        $('#my_submit_button').attr('disabled', 'disabled');
      }
    });

Answer 2

The following seems to work reliably in Chrome and Firefox (Ubuntu 10.10), I'm unable to check on other platforms at the moment:

jQuery

$(document).ready(
    function(){
        $('input:file').change(
            function(){
                if ($(this).val()) {
                    $('input:submit').attr('disabled',false);
                    // or, as has been pointed out elsewhere:
                    // $('input:submit').removeAttr('disabled'); 
                } 
            }
            );
    });

html

<form action="#" method="post">
    <input type="file" name="fileInput" id="fileInput" />
    <input type="submit" value="submit" disabled />
</form>
<div id="result"></div>

Demo at JS Fiddle.

Answer 3

Instead of disabling the submit, is it potentially more helpful to offer instruction if the user presses it without selecting a file first? So add something like this as the onclick code of the submit?

var bFileEmpty = !document.getElementById('filControl').value; if (bFileEmpty) alert('Please select a file'); return !bFileEmpty;

Note that your file control will need an ID as well as a name

Answer 4

Slightly simpler way using prop() which I think is the preferred way to do it now:

$('input:file').on("change", function() {
    $('input:submit').prop('disabled', !$(this).val()); 
});

Tested in IE, Chrome and FireFox.

Answer 5

If you're a fan of ternary expressions:

$(document).ready(function(){
    var $submit = $('#submit_document');
    var $file = $('#file_path');

    $file.change(
        function(){
            $submit.attr('disabled',($(this).val() ? false : true));
        }
    );
});