How to validate a file using ajax?

Question

Yii

Hello, how to do file validation using ajax? When the submit button is clicked, it goes to the /audio/create page and the validation works there, but the validation must be through ajax
Controller

public function actionCreate()
        {
            $model = new Audio;
            $uid = Yii::app()->user->id;

            if (!isset($model)) throw new CHttpException(404);

            $model->song = CUploadedFile::getInstance($model, 'song');
            $model->cover = CUploadedFile::getInstance($model, 'cover');
            if (isset($_POST['ajax']) && $_POST['ajax'] === 'audio-form')
            {
                echo CActiveForm::validate($model);
                Yii::app()->end();
            }
}

Rule in the Model

array('cover, song', 'required'),
array(
                    'cover',
                    'file',
                    'types' => 'jpg, gif, png,  jpeg',
                    'allowEmpty' => false
),
array(
                    'song',
                    'file',
                    'types' => 'mp3',
                    'maxSize' => 1024 * 1024 * 50,
                    'tooLarge' => 'The file was larger than 50MB. Please upload a smaller file.',
                    'allowEmpty' => false
),

The form

<?php
                $form = $this->beginWidget('CActiveForm',array(
                    'id'=>'audio-form',
                    'action'=>CHtml::normalizeUrl(array("audio/Create")),
                    'enableAjaxValidation'=>true,
                    'enableClientValidation'=>false,
                    'clientOptions'=>array(
                        'validateOnSubmit'=>true,
                        'validateOnChange'=>false,

                    ),
                    'htmlOptions' => array('enctype'=>'multipart/form-data'),
                ));
                 echo $form->error($audio,'song');
                 echo $form->error($audio,'cover'); ?>


                <div class="left-files-input">
          <div class="song-input">
            <?php echo $form->fileField($audio, 'song',  $htmlOptions=array('id'=>'audioinput', 'accept' => 'audio/mp3')); ?>
          </div>
          <div class="cover-input">
            <?php echo $form->fileField($audio, 'cover',  $htmlOptions=array('id'=>'coverinput', 'accept' => 'image/jpeg,image/png')); ?>
                    </div>
        </div>
            <?php $this->endWidget(); ?>

Answer 1

It is necessary to write a crutch. Because Ajax does not run files (unless, of course, it is implemented using blob and XHttpRequest2). You will have to fasten a special uploader that implements background file sending with a crutch, validate it on the server, and display errors using callbacks.

Answer 2

Download the Jquery Forms plugin, it allows you to send a file via ajax.