Loading Images in Yii Markitup Widget

Question

I am trying to load images in Yii EMarkitupWidget. So I open the modal window with multipart/form-data form, uploading image, and trying to get callback from controller with image url. After that I need to paste the uploaded image url in markitup window.

How can I do it? I am trying this:

set.js: {name:'Picture', key:'P', call: 'markitupimageupload'},

This function opens the modal window:

function markitupimageupload(){
    $('#mymodal').dialog('open');
}

The modal window with form:

<?php $this->beginWidget('zii.widgets.jui.CJuiDialog', array(
    'id'=>'mymodal',
    'options'=>array(
        'title'=>'Image Upload',
        'width'=>400,
        'height'=>200,
        'autoOpen'=>false,
        'resizable'=>false,
        'modal'=>true,
        'closeOnEscape' => true,
    ),
)); ?>
<?php $model=new ImageForm();
    $this->renderPartial('application.views.site.image',array('model'=>$model));
?>
<?php $this->endWidget('zii.widgets.jui.CJuiDialog'); ?>

Form:

class ImageForm extends CFormModel {
public $image;
// другие свойства

public function rules(){
    return array(
        // устанавливаем правила для файла, позволяющие загружать
        // только картинки!
        array('image', 'file', 'types'=>'jpg, gif, png'),
    );
}
}

Form view:

<div class="form">
    <?php $form=$this->beginWidget('CActiveForm', array(
    'id'=>'image-upload-form',
    'action'=>array('/image/uploadnew'),
    'enableClientValidation'=>true,
    'clientOptions'=>array(
        'validateOnSubmit'=>true,
    ),
    'htmlOptions'=>array('enctype'=>'multipart/form-data'),
)); ?>

    <?php echo CHtml::errorSummary($model); ?>

    <div class="row">
        <?php echo $form->labelEx($model,'image'); ?>
        <?php echo CHtml::activeFileField($model,'image'); ?>
        <?php echo CHtml::error($model,'image'); ?>
    </div>

    <div class="row buttons">
        <?php echo CHtml::ajaxSubmitButton('Upload','/websnippets/image/uploadnew',
        array('type' => 'POST',
            'success' => 'function(){ $("#mymodal").dialog("close");}',));
        //echo CHtml::submitButton('Upload');
        ?>
    </div>

    <?php $this->endWidget(); ?>
</div><!-- form -->

Problem: then I use CHtml::submitButton('Upload') , file is uploading OK. But I need to get the filename url. Then I use CHtml::ajaxSubmitButton, I can take a Json response, but file is not loading. How to solve this?

Answer 1

Return the filename in your actionUploadnew controller - e.g.:

echo CJSON::encode(array('filepath'=>$filepath));

In your callback javascript, you'll access it like:

'success' => 'function(data){ console.log(data.filepath); }'

Answer 2

There is a jQuery form plugin that will enable you to submit your forms through AJAX even when you have files in them. It very easy to use and quite powerful. You can submit the form to an action that returns a JSON-encoded object with the filename, then work with that.