Upload Gambar ke Server dengan Summernote Editor HTML di YII
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: SummernoteScript untuk Fungsi Upload File pada Function Aplikasi:
$(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
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'];
}
}
}
