Summernote image upload error

Question

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);
            }
        });
    }
});

Answer 1

Which version of summernote are you using? Latest (0.6.16) summernote calls custom OnImageUpload function with only one argument - files, without editor and welEditable.

See : https://github.com/summernote/summernote/blob/v0.6.16/src/js/EventHandler.js#L117

Please refer the javascript code of django-summernote.

---

Summernote changed its behavior on handling images after 0.6.5. See changes.