Summernote image upload

Question

I have a problem with editor Summernote. I want to upload images into a catalog on the server. I have some script:

<script type="text/javascript">   $(function () {     $(\'.summernote\').summernote({       height: 200     });     $(\'.summernote\').summernote({      height:300,      onImageUpload: function(files, editor, welEditable) {       sendFile(files[0],editor,welEditable);     }   });    }); </script> <script type="text/javascript">   function sendFile(file, editor, welEditable) {     data = new FormData();     data.append("file", file);     url = "http://localhost/spichlerz/uploads";     $.ajax({       data: data,       type: "POST",       url: url,       cache: false,       contentType: false,       processData: false,       success: function (url) {         editor.insertImage(welEditable, url);       }     });   } </script>    <td><textarea class="summernote" rows="10" cols="100" name="tekst"></textarea></td> 

Of course, I have all js and CSS files. What I do wrong? If I click on image upload and go to the editor, the image is not in textarea.

If I delete sendFile function and onImageUpload: the image save on base64.

Link to summernote: http://hackerwins.github.io/summernote/

Answer 1

I tested this code and Works

Javascript

<script> $(document).ready(function() {   $('#summernote').summernote({     height: 200,     onImageUpload: function(files, editor, welEditable) {       sendFile(files[0], editor, welEditable);     }   });    function sendFile(file, editor, welEditable) {     data = new FormData();     data.append("file", file);     $.ajax({       data: data,       type: "POST",       url: "Your URL POST (php)",       cache: false,       contentType: false,       processData: false,       success: function(url) {         editor.insertImage(welEditable, url);       }     });   } }); </script> 

PHP

if ($_FILES['file']['name']) {   if (!$_FILES['file']['error']) {     $name = md5(rand(100, 200));     $ext = pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);     $filename = $name.     '.'.$ext;     $destination = '/assets/images/'.$filename; //change this directory     $location = $_FILES["file"]["tmp_name"];     move_uploaded_file($location, $destination);     echo 'http://test.yourdomain.al/images/'.$filename; //change this URL   } else {     echo $message = 'Ooops!  Your upload triggered the following error:  '.$_FILES['file']['error'];   } } 

Update:

After 0.7.0 onImageUpload should be inside callbacks option as mentioned by @tugberk

$('#summernote').summernote({     height: 200,     callbacks: {         onImageUpload: function(files, editor, welEditable) {             sendFile(files[0], editor, welEditable);         }     } }); 

Answer 2

Image Upload for Summernote v0.8.1

for large images

$('#summernote').summernote({     height: ($(window).height() - 300),     callbacks: {         onImageUpload: function(image) {             uploadImage(image[0]);         }     } });  function uploadImage(image) {     var data = new FormData();     data.append("image", image);     $.ajax({         url: 'Your url to deal with your image',         cache: false,         contentType: false,         processData: false,         data: data,         type: "post",         success: function(url) {             var image = $('<img>').attr('src', 'http://' + url);             $('#summernote').summernote("insertNode", image[0]);         },         error: function(data) {             console.log(data);         }     }); }