1. Introduction
2. How-To Do It

Introduction ¶

We all know how to upload the content and images at the same time with refreshing the page. And uploading the images using Ajax we have faced some issues, here i have fixed the issues and both content and photos are uploaded using Ajax. And both content and images are stored in the different tables

How-To Do It ¶

View: ¶

<?php
	$form=$this->beginWidget('CActiveForm', array(
		'id'=>'post-form',
		'enableAjaxValidation' => FALSE,
		'htmlOptions' => array('enctype' => 'multipart/form-data'),
		));
?>
<div style="display: none;">
	<?php 
             echo $form->fileField($gallery,'forum_image',array('id'=>'forum_image',)); // image file select when clicks on upload photo
        ?>
</div>
<div class="row">
	<?php echo $form->textArea($model,'content',
		array('placeholder'=>"What's going on...!", // placeholder
	 	      'class'=>'status-txt-area', // css style class
		));
	?>
</div>
<div>
       <a href="" onclick="return uploadImage();"><b class="photo">Upload Photo</b></a> <!-- Image link to select imag -->
	<?php echo CHtml::htmlButton('Post',array(
				'onclick'=>'javascript: send();', // on submit call JS send() function
				'id'=> 'post-submit-btn', // button id
				'class'=>'post_submit',
			));
	?>
</div>
<?php $this->endWidget(); ?>

Script: ¶

TO collect the form data and do some validation before and after completion of the uploading the images: Here we use the FormData for collecting the form inputs. FormData is an HTML5 supported object. It's working in all browsers, except IE>9.

<script>
// this script executes when click on upload images link
	function uploadImage() {
	    $("#forum_image").click();
	    return false;
}
</script>

<script type="text/javascript">
// this script for collecting the form data and pass to the controller action and doing the on success validations
function send(){
    var formData = new FormData($("#post-form")[0]);
    $.ajax({
        url: '<?php echo Yii::app()->createUrl("forumPost/uploadPost"); ?>',
        type: 'POST',
        data: formData,
        datatype:'json',
        // async: false,
        beforeSend: function() {
            // do some loading options
        },
        success: function (data) {
        	// on success do some validation or refresh the content div to display the uploaded images 
			jQuery("#list-of-post").load("<?php echo Yii::app()->createUrl('//forumPost/forumPostDisplay'); ?>");
        },

		complete: function() {
            // success alerts
        },

        error: function (data) {
        	alert("There may a error on uploading. Try again later";)
        },
        cache: false,
        contentType: false,
        processData: false
    });

    return false;
}
</script>

Then the collected form data are send the the action create and the form will be submitted.

Controller: ¶

public function actionUploadPost() {
        $model = new ForumPost;
	$gallery = new UserGallery;
	if(isset($_POST['ForumPost'], $_FILES['UserGallery'])) {
        // populate input data to $model and $gallery
        $model->attributes=$_POST['ForumPost'];
        $gallery->attributes=$_POST['UserGallery'];
        $rnd = rand(0123456789, 9876543210); 	// generate random number between 0123456789-9876543210
	$timeStamp = time(); 	// generate current timestamp
        $uploadedFile = CUploadedFile::getInstance($gallery, 'forum_image');
        if ($uploadedFile != null) {
		$fileName = "{$rnd}-{$timeStamp}-{$uploadedFile}"; 	// random number + Timestamp + file name
		$gallery -> forum_image = $fileName;
	}
        $valid_format = "jpg,png,jpeg,gif"; 	// Allow the above extensions only.
	if ($gallery -> save() && $valid_format) {
		if (!empty($uploadedFile)) {
			$uploadedFile -> saveAs(Yii::app() -> basePath . '/../images/post/' . $fileName); // save images in given destination folder
                }
        }
        $model -> save(FALSE);
}

done... cheers..

Demo ¶