1

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);
            }
        });
    }
});
Community
  • 1
  • 1
cyberrspiritt
  • 908
  • 8
  • 26

1 Answers1

0

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.

lqez
  • 2,898
  • 5
  • 25
  • 55
  • so how am i gonna fix it with using editor and welEditable? – cyberrspiritt Oct 10 '15 at 05:20
  • No need to use editor and welEditable. Just like `$(this).summernote("insertImage", url);` Please refer https://github.com/summernote/django-summernote/blob/master/django_summernote/templates/django_summernote/widget_inplace.html#L45-L66 – lqez Oct 10 '15 at 07:26
  • also the upload_url = `"" + "dashboard/uploader/";` is the url of the php upload function? – cyberrspiritt Oct 10 '15 at 07:34
  • You're using `$(this)` outside of summernote initialization scope. – lqez Oct 10 '15 at 11:50