Unable to remove disabled attribute from a input file submit button

Question

I am checking the file size and extension of a file before it is uploaded, and (for the most part) the code is running correctly. However, I am unable to remove the disabled attribute from the submit button if the file has the correct extension and is under 2MB. I feel as if there is something minor I am not seeing or forgetting. I would appreciate any help or tips.

Thanks,
-Kyle

Here is my code:

<p>Select a logo to upload</p>
<input type="file" id="uploadFile" class="upload" name="upfile"><br>
<input type="submit" id="uploadSubmit" value="Upload Image" disabled="disabled">



document.getElementById("uploadFile").addEventListener("change", checkFile, true);
function checkFile(e) {
    var files = e.target.files;
    for (var i = 0, file; file = files[i]; i++) {
        var fileName = file.name;
        var fileExt = fileName.split(".")[fileName.split(".").length - 1].toLowerCase();
        var fileSize = document.getElementById("uploadFile").files[0].size;
        var fileSizeMB = (file.size / 2097152).toFixed(2);
        if (!(fileExt === "jpg" || fileExt === "eps" || fileExt === "tif" || fileExt === "tiff") || fileSize > 2097152) {
            alert("There is an error with the file you selected. Please check the file size and/or the file type.");
        } else {
        $("#uploadSubmit").prop("disabled", false);
        }
    }
};

score 1 · Answer 1 · answered Jan 13 '14 at 22:33

1

Try

$("#uploadSubmit").removeAttr("disabled");

Hope it helps.

answered Jan 13 '14 at 22:33

Remo H. Jansen

23,172
11
70
93

score 0 · Accepted Answer · answered Jan 13 '14 at 22:42

0

Sorry I can't just comment because it requires at least 50 reputation, wtf!

check if you have jQuery, I notice you're using getElementById at the beginning and somehow you're using jQuery selector for uplaodSubmit. Other than that, syntax looks correct to me.

And if you want to stick with pure JS, use:

document.getElementById('uploadSubmit').disabled = false

instead.

Good Luck.

answered Jan 13 '14 at 22:42

Yang

86
1
8

1

Thank you Yang! I used document.getElementById("uploadSubmit").disabled = true; and document.getElementById("uploadSubmit").removeAttribute("disabled"); – Kyle Jan 15 '14 at 15:57

Vahap Gencdal · Answer 3 · 2014-01-13T23:07:38.080

 <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="script/jquery-1.9.1.min.js"></script>
    </head>
<script>
    $(function() {
        $('#uploadFile').bind('change', function() {
            var filename = this.files[0].name.toLowerCase();
         if ((filename.indexOf(".jpg") > -1)
                || (filename.indexOf(".png") > -1)) {                
            if(this.files[0].size<2000000){
                $("#uploadSubmit").removeAttr("disabled");   
               alert("This is your solution");
           }else{
               alert("You cant get bigger than 2 MB");
           }
        } else {
            alert("File format must jpg or png");                
            return false;
        }
        });
    });

</script>
<body>
        <p>Select a logo to upload</p>
        <input type="file" id="uploadFile" class="upload" name="upfile"><br>
        <input type="submit" id="uploadSubmit"  disabled="disable" value="Upload Image">

    </body>

I tried this I think this more helpful for you

score 0 · Answer 4 · answered Jan 14 '14 at 00:26

0

$("#element").attr("disabled", false) OR $("#element").removeAttr("disabled"). I hope this first example is better with new jQuery version.

answered Jan 14 '14 at 00:26

flaviomuniz

43
1
5

Unable to remove disabled attribute from a input file submit button

4 Answers4