How to disable uploadify upload button

Question

I am trying to design a multiple file uploader for which i am using Uploadify. I will have 5 upload buttons. What I would like is to have the first one to be enabled while the other 4 to be disabled on page load. On successful upload of file in the first button, the second button should be enabled and so on.

I have tried searching, but there were some posts which suggested hiding the uploader (height = 0).

I have tried something like this in ready function

  $('#FileUpload2').fileUpload('enabled', false);
  $('#FileUpload3').fileUpload('enabled', false);
  $('#FileUpload4').fileUpload('enabled', false);
  $('#FileUpload5').fileUpload('enabled', false);

I'm not sure if this is correct. I have tried to make this as clear as possible. Please provide me with an alternate solution if possible.

UPDATE

here is the complete code

<head runat="server">
    <title></title>
     <link rel="Stylesheet" type="text/css" href="CSS/uploadify.css" />
     <script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.uploadify.js"></script>
</head>
<body>
<form id="form1" runat="server">
    <div style = "padding:40px">
        <asp:FileUpload ID="FileUpload1" runat="server" />
    </div>
    <div id="fu2" style = "padding:40px;">
        <asp:FileUpload ID="FileUpload2" runat="server" />
    </div>
    <ul id="appendImg">

    </ul>
</form>
</body>
</html>
<script type = "text/javascript">
    $(document).ready(function () {
        // put all your jQuery goodness in here.

        $("#<%=FileUpload2.ClientID%>").uploadify('disable', true);

    });
    $(window).load(
    function () {
        $("#<%=FileUpload1.ClientID%>").fileUpload({
            'uploader': 'scripts/uploader.swf',
            'uploadLimit': 3,
            'cancelImg': 'images/cancel.png',
            'buttonText': 'Browse Files',
            'script': 'Upload.ashx',
            'folder': 'uploads',
            'fileDesc': 'Image Files',
            'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
            'multi': false,
            'auto': true,
            'onComplete': function (event, queueID, fileObj, response, data) {
                //alert(fileObj.filePath);
               // $('#kk').attr('src', "" + fileObj.filePath + "");
                var html = '';
                html += '<li><img src="' + fileObj.filePath + '" alt="" style="width:100px;height:100px;" /></li>';
                $('#appendImg').append(html);
                //$('#fu2').attr('style', 'padding:40px;display:block;');
            },
            'onAllComplete': function (event, queueID, fileObj, response, data) {

            },
            'onUploadSuccess': function (file, data, response) {
                $('#FileUpload1').uploadify('settings', 'height', 0);
                $('#FileUpload1').uploadify('settings', 'width', 0);
                $('#FileUpload2').uploadify('settings', 'height', 400);
                $('#FileUpload2').uploadify('settings', 'width', 400);
            }
        });


        $("#<%=FileUpload2.ClientID%>").fileUpload({
            'uploader': 'scripts/uploader.swf',
            'uploadLimit': 3,
            'cancelImg': 'images/cancel.png',
            'buttonText': 'Browse Files',
            'script': 'Upload.ashx',
            'folder': 'uploads',
            'fileDesc': 'Image Files',
            'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
            'multi': false,
            'auto': true,
            'setDisabled':true,
            'onComplete': function (event, queueID, fileObj, response, data) {
                //alert(fileObj.filePath);
                // $('#kk').attr('src', "" + fileObj.filePath + "");
                var html = '';
                html += '<li><img src="' + fileObj.filePath + '" alt="" style="width:100px;height:100px;" /></li>';
                $('#appendImg').append(html);
            },
            'onAllComplete': function (event, queueID, fileObj, response, data) {

            }
        });
    }


);
</script>

lje · Accepted Answer · 2012-11-06 01:51:33Z

2

I know of two routes you could take, the first being you 'hide' the buttons and the second you could 'disable' the buttons.

first option (ensure last 4 buttons are hidden prior to starting):

'onUploadSuccess':function(file, data, response){
$('#FileUpload1').hide();
$('#FileUpload2').show(); 
}

second option:

'onUploadSuccess':function(file, data, response){
    $('#FileUpload1').uploadify('settings', 'height', 0);
    $('#FileUpload1').uploadify('settings', 'width', 0);
    $('#FileUpload2').uploadify('settings', 'height', 400);  
    $('#FileUpload2').uploadify('settings', 'width', 400);
    }

hope this helps... here it is using the default uploadify....

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>UploadiFive Test</title>
<!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.uploadify.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="uploadify.css"-->
<style type="text/css">
body {
    font: 13px Arial, Helvetica, Sans-serif;
}
</style>
</head>

<body>
    <h1>Uploadify Demo</h1>
    <form>
        <div id="queue"></div>
        <input id="file_upload" name="file_upload" type="file" multiple="true">
        <input id="file_upload2" name="file_upload2" type="file" multiple="true">
    </form>

    <script type="text/javascript">
        <?php $timestamp = time();?>


        $(function() {
            $('#file_upload').uploadify({
                'formData'     : {
                    'timestamp' : '<?php echo $timestamp;?>',
                    'token'     : '<?php echo md5('unique_salt' . $timestamp);?>'
                },
                'swf'      : 'uploadify.swf',
                'uploader' : 'uploadify.php',
                'onUploadSuccess':function(file, data, response){
                $('#file_upload').uploadify('settings', 'height', 0);
                $('#file_upload').uploadify('settings', 'width', 0);
                $('#file_upload2').uploadify('settings', 'height', 400);  
                $('#file_upload2').uploadify('settings', 'width', 400);
                }
            });
        });
    </script>
    <script type="text/javascript">
        <?php $timestamp = time();?>
        $(function() {
            $('#file_upload2').uploadify({
                'formData'     : {
                    'timestamp' : '<?php echo $timestamp;?>',
                    'token'     : '<?php echo md5('unique_salt' . $timestamp);?>'
                },
                'swf'      : 'uploadify.swf',
                'uploader' : 'uploadify.php',
                'onUploadSuccess':function(file, data, response){
                $('#file_upload2').uploadify('settings', 'height', 0);
                $('#file_upload2').uploadify('settings', 'width', 0);
                },
                'onSWFReady' : function() {
                $('#file_upload2').uploadify('settings', 'height', 0);
                $('#file_upload2').uploadify('settings', 'width', 0);
        }
            });
        });
    </script>
</body>
</html>

edited Nov 6, 2012 at 1:51

answered Nov 4, 2012 at 9:14

lje

1709 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Nitish Over a year ago

I guess both these methods will hide the buttons. the second method will also virtually hide the button from the page. I want the buttons to be there on the page, just disabled so that the user cannot click on them, but visible.

lje Over a year ago

sorry just updated the 2nd option and just tested it. For the second option, the button remains there but is unclickable...

Nitish Over a year ago

I have tried it, but is not working :( i am posting the complete code, could you please have a look?

Nitish Over a year ago

could you please post your working code? I'll see if i can find out what i am doing wrong?

lje Over a year ago

added an example using the default uploadify package.

Collectives™ on Stack Overflow

How to disable uploadify upload button

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related