Zend_Form Jquery & fileUploadErrorIniSize

Question

Edit, I fixed it by changing my JS to:

$('.zend_form input:not([type="file"]), .zend_form textarea').each(function() {
    data[$(this).attr('name')] = $(this).val();
});

Hello,

As I posted earlier, I followed a ZendCast that allowed you to use jQuery to detect and display to users problem with their form.

However, file fields always return: fileUploadErrorIniSize (File 'image_front_url' exceeds the defined ini size" even if the file is within size limits.

TPL For Forms:

<?php $this->headScript()->captureStart(); ?>

$(function() { 

    $('.zend_form input, .zend_form textarea').blur(function() {
        var formElementId = ($(this).parent().prev().find('label').attr('for'));
        doValidation(formElementId);
    });
});


function doValidation(id) {

    var url = '/<?php echo MODULE; ?>/json/validateform/form_name/<?php echo get_class($this->form); ?>';
    var data = {};

    $('.zend_form input, .zend_form textarea').each(function() {
        data[$(this).attr('name')] = $(this).val();
    });

    $.post(url, data, function(resp) {
        $('#'+id).parent().find('.errors').remove();
        $('#'+id).parent().append(getErrorHtml(resp[id], id));
    }, 'json');

};

function getErrorHtml(formErrors, id) {

    var o = '';
    if (formErrors != null) {
    var o = '<ul id="errors-'+id+'" class="errors">';

    for (errorKey in formErrors) {
        o += '<li>'+formErrors[errorKey]+'</li>';
    }
    o += '</ul>';
    }
    return o;
}

<?php $this->headScript()->captureEnd(); ?>


<?php 
if (is_object($this->form) && $this->form->getErrorMessages()) {
    echo $this->partial('partials/errors.phtml', array('errors' => $this->form->getErrorMessages(), 'translate' => $this->translate));
}
?>

<?php if (isset($this->errorMsg)) { ?>
    <p><?php echo $this->errorMsg; ?></p>
<?php } ?>

<?php echo $this->form; ?>

Which is directed to

<?php

class Administration_JsonController extends Zend_Controller_Action {


    public function validateformAction() {

        $form_name  = $this->_getParam('form_name');
        $form       = new $form_name();
        $data       = $this->_getAllParams();

        $form->isValidPartial($data);
        $json = $form->getMessages();
        $this->_helper->json($json);
    }

}

Example of returned json:

{"name":{"isEmpty":"Value is required and can't be empty"},"name_url":{"isEmpty":"Value is required and can't be empty"},"image_site_url":{"fileUploadErrorIniSize":"File 'image_site_url' exceeds the defined ini size"},"image_url":{"fileUploadErrorIniSize":"File 'image_url' exceeds the defined ini size"},"image_front_url":{"fileUploadErrorIniSize":"File 'image_front_url' exceeds the defined ini size"},"image_back_url":{"fileUploadErrorIniSize":"File 'image_back_url' exceeds the defined ini size"}}

I noticed a few people had this issue and they said that isValidPartial fixes it, so I changed

$form->isValid($data);

to

$form->isValidPartial($data);

but it didn't fix this issue.

Any ideas?

Answer 1

Are you putting an Encrypt type on your form?

I have found two different forum posts about this, including a stack post:

odd Zend_Form_Element_File behavior

You need to add enctype="multipart/form-data" to your form tag.

Basically what is happening is the form is using its default "application/x-www-form-urlencoded" method of encryption before it is sent to the server. File uploading is not supported with this method.

Answer 2

The problem is that you can't treat file fields in the same manner as regular text fields.

When you call $('input').val(), you get an actual text value for the text field, but for the file field you get the file name - and not the file contents.

Then your script tries to validate your file name as a file and, apparently, fails. In order for file validator to succeed you need to pass actual file contents to the script.

So, basically, you need to upload a file asynchronously to the server to perform all the necessary validations.

Unfortunately, uploading files via Ajax is not quite a trivial thing to do. Your basic options are uploading files via iFrame or swfObject. You can take a look at the broad selection of plugins suitable for this purpose here.

My personal choice for asynchronous file upload would be file-uploader jQuery plugin.