I'm using codeigniter, twitter bootstrap and summernote as my WYSIWYG editor. Im facing some problem with the image upload. Whenever uploading an image using Summernote, it serializes the image in a base64 string. That base64 string is so long that it doesnt fit in the text data-type in phpmyadmin. What i want to do is, upload the image using PHP upload function and store its url in the database instead of the base64 string. How would i do that?
With reference to this post, here's the code,
$(function() {
$('.summernote').summernote({
height: 100,
onImageUpload: function(files, editor, welEditable) {
sendFile(files[0], editor, welEditable);
}
});
function sendFile(file, editor, welEditable) {
data = new FormData();
data.append("files", file);
upload_url = "<?php echo base_url(); ?>" + "dashboard/uploader/";
$.ajax({
data: data,
type: "POST",
url: upload_url,
cache: false,
contentType: false,
processData: false,
success: function(url) {
editor.insertImage(welEditable, url);
}
});
}
});
the uploader method in the dashboard class is where my php upload code resides. Here's the PHP code,
public function uploader()
{
$this->load->helper('file');
if ($_FILES['files']['name']) {
if (!$_FILES['files']['error']) {
$name = md5(rand(100, 200));
$ext = explode('.', $_FILES['files']['name']);
$filename = $name . '.' . $ext[1];
$destination = base_url().'uploads/' . $filename;
$location = $_FILES["files"]["tmp_name"];
move_uploaded_file($location, $destination);
echo base_url() . $filename;
}
else
{
echo $message = 'Ooops! Your upload triggered the following error: '.$_FILES['files']['error'];
}
}
}
Whenever i upload the image, it doesnt show it in the wysiwyg editor. Where am i going wrong?
now it looks like this:
$(function() {
$('.summernote').summernote({
height: 100,
onImageUpload: function(files) {
sendFile(files[0]);
}
});
function sendFile(file) {
data = new FormData();
data.append("files", file);
upload_url = "<?php echo base_url(); ?>" + "dashboard/uploader/";
$.ajax({
data: data,
type: "POST",
url: upload_url,
cache: false,
contentType: false,
processData: false,
success: function(url) {
$(this).summernote("insertImage", url);
}
});
}
});
