Search code examples
phptexteditorsummernote

summernote vue html editor doesn't upload image to server


I am having a problem with summernote Image Upload. I understand that summernote converts images to base64 and once I submit it saves the images directly on the back-end database server. I got some code to upload image to server folder..But it doesn't work for me... Help me friends.

My script is :

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

          }

        });

       function sendFile(file,editor,welEditable) {
          data = new FormData();
          data.append("file", files);
           $.ajax({
           url: "uploader.php",
           data: data,
           cache: false,
           contentType: false,
           processData: false,
           type: 'POST',
           success: function(data){
           alert(data);
            $('.summernote').summernote("insertImage", data, 'filename');
        },
           error: function(jqXHR, textStatus, errorThrown) {
           console.log(textStatus+" "+errorThrown);
          }
        });
       }
});

Uploader.php

<?php

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

        ?>

Solution

  • Finally i resolve my bug..Just insert an call back function to my script it will work fine..

    callbacks : {
          onImageUpload: function(files, editor, $editable) {
          sendFile(files[0],editor,$editable);
          }  
          }