Yii 1.1: Upload image and content using AJAX and Store it in different table

6 followers

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

Total 1 comment

#17536 report it
Greg J at 2014/06/29 05:11pm
missing code and errors - no post data

Hi,

There is an error in the following code, bracket and semi colon are around the wrong way in the alert line:

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

Should be

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

Note that the uploadImage() function needs to be in the HEAD of the document, or at least above where its called, for it to work.

You make reference to "forumPost/forumPostDisplay" but there is no example

You make reference to "#list-of-post" but there is no example

The POST button does not seem to generate any post data, $_POST is empty. the send command correctly calls my UpdatePost and UpdatePostDisplay action functions but there is no data to process!

cheers

Greg J

Leave a comment

Please to leave your comment.

Write new article