Disabling buttons while upload files in yii

Question

I am trying to make an upload field form in yii and when upload somewhat of a big file and press submit, I get an error of partial upload.

I understand this is because i did not let the file get uploaded properly and I do have my php.ini set properly as well to handle 20MB posts and upload as well.

What I want is when the file is being uploaded i want to change the button to something else or just remove it until file is properly uploaded.

How can i do this?

my _form has the following code

<?php
/* @var $this ImageController */
/* @var $model Image */
/* @var $form CActiveForm */
?>
<script>
    $('input:submit').click(function(){
        $('p').text("Form submiting.....");
        $('input:submit').attr("disabled", true);
    });
</script>
<div class="form">

<?php $form=$this->beginWidget('CActiveForm', array(
    'id'=>'image-form',
    'htmlOptions'=>array('enctype'=>'multipart/form-data'),
    // Please note: When you enable ajax validation, make sure the corresponding
    // controller action is handling ajax validation correctly.
    // There is a call to performAjaxValidation() commented in generated controller code.
    // See class documentation of CActiveForm for details on this.
    'enableAjaxValidation'=>false,
)); ?>

    <p class="note">Fields with <span class="required">*</span> are required.</p>

    <?php echo $form->errorSummary($model);?>

    <div class="row">
        <?php echo $form->labelEx($model,'imageUrl'); ?>
        <?php echo $form->fileField($model,'imageUrl',array('size'=>50,'maxlength'=>50)); ?>
        <?php echo $form->error($model,'imageUrl'); ?>
    </div>

    <div class="row buttons">
        <?php echo CHtml::submitButton('Upload' ,array('class'=>'button')); ?>
    </div>

<?php $this->endWidget(); ?>

</div><!-- form -->

While my create Controller has the following code in it

if(isset($_POST['Image']))
        {
            //Getting the values via Post
            $model->attributes=$_POST['Image'];
            //Seeting the homeId to always be Default
            $model->homeId = self::HOME_ID;
            //Generating a new name for the file
            $fileName = mt_rand();
            //Make a FILE superglobal withthe imageUrl information
            $uploadedFile=CUploadedFile::getInstance($model,'imageUrl');
            //Checking if the name is alredy taken
            $checkName = Image::model()->findAllByAttributes(array('imageUrl'=>$fileName));


            if(empty($checkName)){//If the value of the query is empty
                //Assigning the value of random number to the imageUrl
                $model->imageUrl = $fileName;
                //Assigning the value of the the extenstion to the imageExtension
                if($model->save()){
                    //Moveing the uploaded file
                    $uploadedFile->saveAs("images/upload/index/".$fileName);
                    Yii::app()->user->setFlash('success',"File  uploaded successfully");
                }
            }else{//Display error
                Yii::app()->user->setFlash('error',"Please try again");
            }

        }else{
            Yii::app()->user->setFlash('error',"Fill in all the data");
        }

        $this->render('create',array(
            'model'=>$model,
        ));
    }

Answer 1

Simply add a onclick event to your Submit button which disables the button and when your upload is finished or aborted reenabled it

$('input:submit').click(function(){
    $('p').text("Form submiting.....");
    $('input:submit').attr("disabled", true);   
});

Something like that yould work out of the box in yii

Yii::app()->clientScript->registerScript('search', "
    $('form#id').submit(function(){ 
        $(this).find('input[type=submit]').attr('disabled', 'disabled'); 
    });
", CClientScript::POS_READY);