Filefield Does Not Validate

Hi,

I have a problem with my file validation. The file validation doesn’t seem to work at all.

The error message does not appear even when there no file selected or the file selected is not an image.

Below are my codes. I’m not sure if the javascript to display the picture affects the file validation or not.

I can’t figure out why the file validation can’t work. Can anyone help?

In view:




<?php echo $form->fileField($model, 'project_photo',  array('id'=>"projectPhoto")); ?>

<output id="list"></output>

<?php echo $form->error($model, 'project_photo'); ?></div>




//javascript to display image beside the uploaded file

<script>

    document.getElementById('projectPhoto').addEventListener('change', handleFileSelect, false);

    function handleFileSelect(evt) {

    var files = evt.target.files;

    var f = files[0];

    var reader = new FileReader();

 

      reader.onload = (function(theFile) {

        return function(e) {

          document.getElementById('list').innerHTML = ['<img src="', e.target.result,'" title="', theFile.name, '" width="70" height="50" />'].join('');

        };

      })(f);

 

      reader.readAsDataURL(f);

}

</script>




In Model:




public function rules()

{

     return array(

          array('project_photo', 'required'),

          array('project_photo', 'file', 'allowEmpty'=>false, 'types'=>'jpg,jpeg,gif,png'),

     );

}



Hi Pinky,

Fisrtly disable your javasript and check if the problem fix.

In other cases it works?

You sould check also the _form.php if it has ‘htmlOptions’ => array(‘enctype’ => ‘multipart/form-data’), like that

$form = $this->beginWidget(

'CActiveForm',


array(


    'id' =&gt; 'upload-form',


    'enableAjaxValidation' =&gt; false,


    'htmlOptions' =&gt; array('enctype' =&gt; 'multipart/form-data'),


)

);

I’ve tried to disable the javascript but the problem still exist.

But I’ve realised that it is because of the “id” that I set below that affects the validation. I can’t remove the “id” because I need it for the javascript.




<?php echo $form->fileField($model, 'project_photo',  array('id'=>"projectPhoto")); ?>



Is there any way to solve this problem of validating at the client side?

Are you sure about it “I’ve realised that it is because of the “id” that I set below that affects the validation”?

If you remove array(‘id’=>“projectPhoto”) everything works fine?

In this case you could replace array(‘id’=>“projectPhoto”) with array(‘class’=>“projectPhoto”) and change your javascript respectively.

Sorry if I interpret “class wrongly”. But isn’t “class” used to define css?

I tried changing only the filefield to array(‘class’=>“projectPhoto”) and all my alignment in that page has go out of place.

I need the "id" in my case so that I can use "getElementById" in the javascript.

Does anyone know if there is any other way I can set my id for filefield rather than the one I used above?

Sure, the class used by css but you could use in javascript to.

To avoid css problem you could add a class rather ran replace it. for example ‘class’=>“projectPhoto yourtrick”.

So, In this way your css will work correctly, having the advantage to search with javascript for html tag with class "yourtrick"

@pinky

In that case, why don’t use the id assigned by Yii in your JS code? In your getElementById(“projectPhoto”), instead of “projectPhoto”, you’d use the “ModelName_projectPhoto” syntax.

Or, if you use your JS inside your PHP, you can use [font=“Courier New”]getElementById("’ . CHtml::activeId($model, ‘projectPhoto’) . '")[/font]

Dear Friends

Whether I am setting my own id or not (in htmlOptions), I am getting server side validation done.

But after enabling clientSideValidation in CActiveForm, I am not able to see any sign of errors below file element field. I think this is because currently client side validation is not supported for CFileValidator.

After enabling ajaxValidation with setting my own id , no errors are displayed.

This may be due to yiiactiveform.js only identifying the id set by YII in the form of "ModelClass_attribute"

After enabling ajaxValidation without setting any id myself, Whenever I click the field what I am getting the following

.

When I explored the things in FIREBUG console , nothing is getting posted from my file field.




TestForm[favourite]	

TestForm[favourite][]	1

TestForm[favourite][]	2

TestForm[image]	                  //This is always blank irrespective of whether I choose a file or not.

TestForm[married]	0

TestForm[married]	1

TestForm[name]	seenivasan

TestForm[spouseName]	

ajax	test-form



In documentation it is mentioned that the uploaded file information can be obtained via $_FILES.

Then the basic question is whether the files are sent to the server by method POST or not.

If not , then how we are going to validate file inputs through AJAX?

Thanks everyone for your help. :)

@bennouna

Thanks. I tried doing this in my javascript and it works:




document.getElementById('<?php echo CHtml::activeId($model, 'project_photo'); ?>')






public function rules()

{

     return array(

          array('project_photo', 'required'),

          array('project_photo', 'file', 'allowEmpty'=>false, 'types'=>'jpg,jpeg,gif,png'),

     );

}



However, i can only validate whether it is blank field. I can’t validate whether it is an image or not even when I have specified the rules in the model as shown above. Do any of you know why?