Yii Upload Files with Ajax - pass data array (formData)

Question

I have been bashing away at this for a while and seem to be advancing small steps at a time. I need to offer a way for users to upload their files via Ajax. I have seen that formData needs to be used in order to pass the file itself. Using these two questions as a reference: Uploading file in Yii using ajax Yii ajax file upload

I have the following code on my view page:

<?php
$form=$this->beginWidget('CActiveForm', array(
    'id'=>'post-form',

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


echo '<div class="columns small-5">' . $form->fileField($upload, 'image') . '</div>';
echo $form->error($upload, 'image');
echo CHtml::button("(+)",array('title'=>"Topic",'onclick'=>'js:upload_file(this);')); 


$this->endWidget(); ?>

<script>
function upload_file(){
var fd = new FormData();
var e = document.getElementById("UploadedFiles_image");
fd.append( "UploadedFiles[image]", $(e)[0].files[0]);

$.ajax({
    url: 'UploadInstallPhoto',
    type: 'POST',
    cache: false,
    data: fd,
    datatype: 'json',
    processData: false,
    contentType: false,
    success: function (data) { 

    },
    error: function () {
        alert("ERROR in upload");
    }
});
}
</script>

I have the following code in my controller:

    if(Yii::app()->request->isAjaxRequest)
    {

        $upload = new UploadedFiles;

        $upload->attributes = $_POST['UploadedFiles'];

        $file = CUploadedFile::getInstance($upload,'image');

        $pi = pathinfo($file);

        $upload->name = $pi['filename'];
        $upload->ext = $pi['extension'];
        $upload->acc_id = $id;
        $upload->type_id = 1;
        $upload->date_uploaded = date('Y-m-d');
        if($upload->save())
        {
            $file->saveAs(Yii::app()->params['uploadFiles'] . $upload->id . '.' . $pi['extension']);
            Yii::app()->user->setFlash('success',Yii::t('flash','flash.accounts.successful_upload'));
        }

    }

With the above code I am now able to do ajax file submissions and this is working as expected. The issue I am now having is that the file is placed into a folder and an entry in the database is created. In the DB I reference the persons account so the file can be seen on the account for that user.

What I need to be able to do is to pass an array of data with the ajax POST i.e

data: {file: fd, id: id}

However, when I alter the line to use an array no data is posted. Please can someone suggest a potential fix or how I could pass multiple values including the file value.

Answer 1

Here is the solution that worked for me. I am now able to upload a file via Ajax and also pass multiple variables as well as the file.

Here is my code for the View page:

<?php
    $form=$this->beginWidget('CActiveForm', array(
        'id'=>'post-form',
        'htmlOptions' => array('enctype' => 'multipart/form-data'),
        ));


    echo '<div class="columns small-5">' . $form->fileField($upload, 'image') . '</div>';
    echo $form->error($upload, 'image');
    echo CHtml::button("(+)",array('title'=>"Topic",'onclick'=>'js:upload_file(this);')); 


    $this->endWidget();
?>

<script>
function upload_file(){
    var fd = new FormData();
    var e = document.getElementById("UploadedFiles_image");
    fd.append( "UploadedFiles[image]", $(e)[0].files[0]);
    fd.append( "UploadedFiles[acc_id]", <?php echo $model->account_id; ?>); //This lines appends the required ID, thanks to Adeneo

    $.ajax({
        url: 'UploadInstallPhoto',
        type: 'POST',
        cache: false,
        data: fd,
        datatype: 'json',
        processData: false,
        contentType: false,
        success: function(data){ 

        },
        error: function(){
            alert("ERROR in upload");
        }
    });
}
</script>

Here is my Controller code:

public function actionUploadInstallPhoto()
{
    if(Yii::app()->request->isAjaxRequest)
    {
        $upload = new UploadedFiles;

        $upload->attributes = $_POST['UploadedFiles'];

        $file = CUploadedFile::getInstance($upload,'image');

        $pi = pathinfo($file);

        $upload->name = $pi['filename'];
        $upload->ext = $pi['extension'];
        $upload->acc_id = $_POST['UploadedFiles']['acc_id'];
        $upload->type_id = Yii::app()->params['installPhoto'];
        $upload->date_uploaded = date('Y-m-d');
        if($upload->save())
        {
            $file->saveAs(Yii::app()->params['uploadFiles'] . $upload->id . '.' . $pi['extension']);
            Yii::app()->user->setFlash('success',Yii::t('flash','flash.accounts.successful_upload'));
        }

    }
}

Hopefully this will help someone in the same position as I was.