Upload Gambar ke Server dengan Summernote Editor HTML di YII

Infomugi Media       Form YII , Tutorial YII Framework   

Upload Gambar ke Server dengan Summernote Editor HTML di YII - Dalam membuat CMS (Content Management System) biasanya membutuhkan HTML Editor, banyak plugin javascript yang menyediakan fitur WYSWYG (What You See is What You Get) yang biasanya terdapat fungsi upload gambar dalam posting.

Konsep upload gambar dalam sebuah posting, yang dimaksud adalah file gambarnya di upload pada html editor kemudian tersimpan pada direktori server aplikasi, sehingga yang tampil pada html editor tersebut yang sesuai file yang diupload dan disimpen di server. Plugin editor html yang saya gunakan adalah Summernote Editor:

Script untuk Mengaktifkan Fungsi Editor HTML

// START: Summernote
$(document).ready(function() {
  $('.summernote').summernote({
    height: 500,
    tabsize: 4,
    callbacks: {
      onImageUpload: function(files, editor, welEditable) {
        sendFile(files[0], editor, welEditable);
      },
      onMediaDelete : function(target) {
        deleteFile(target[0].src);
      }
    }
  });
  function sendFile(file, editor, welEditable) {
    data = new FormData();
    data.append("file", file);
    $.ajax({
      data: data,
      type: "POST",
      url: "<?php echo YII::app()->baseUrl; ?>"+"/post/uploadimagepost",
      cache: false,
      contentType: false,
      processData: false,
      success: function(url) {
        // swal("Sukses","Berhasil! Upload Gambar, Tambahkan ?");
        $('.summernote').summernote('insertImage', url);
      }
    });
  }
  function deleteFile(src) {
    $.ajax({
      data: {src : src},
      type: "POST",
      url: "<?php echo YII::app()->baseUrl; ?>"+"/post/deleteimagepost",
      cache: false,
      success: function(resp) {
        console.log(resp);
      }
    });
  }
});
// END: Summernote

Script untuk Fungsi Upload File pada Function Aplikasi:

public function actionUploadImagePost(){
if ($_FILES['file']['name']) {
if (!$_FILES['file']['error']) {
$name = md5(rand(100, 200));
$ext = explode('.', $_FILES['file']['name']);
$filename = $name . '.' . $ext[1];
$destination = 'image/posting/' . $filename;
$location = $_FILES["file"]["tmp_name"];
move_uploaded_file($location, $destination);
echo YII::app()->baseUrl . "/image/posting/" . $filename;
}
else
{
echo  $message = 'Maaf, Gagal Upload File:  '.$_FILES['file']['error'];
}
}
}