Issue with uploading and displaying images copied directly into Summernote editor

Question

I'm facing an issue with uploading images that are copied directly into the Summernote editor without using the image button. Here's a brief overview of the problem and the steps I've taken so far:

1. I have integrated Summernote into my web application and enabled the paste functionality to allow users to copy and paste images directly into the editor.

2. When an image is pasted, it appears in the editor as an unknown image.

3. However, upon uploading the image using AJAX and saving it on the server, the image is not displayed properly when I retrieve it from the server and try to display it in the Summernote editor. Instead, it shows up as an unknown image or a file with garbled characters. Like this:

Here are the details of my code:

"index.html":

 <form action="" method="post">
              <h1>Upload Images With Summernote</h1>
              <p>When you upload an image with summernote the default is to put it in the database with base 64 encoding. This will bloat your databases. In this tutorial you will upload an image to a folder then store the in your database.</p>
              
                <textarea name="entry" id="summernote" cols="30" rows="20"></textarea>
                <input type="submit" value="submit" class="btn btn-lg btn-success" name="submit">

          </form>

 <script>
  $(document).ready(function() {
    var editor = $("#summernote");

    editor.summernote({
      spellCheck: true,
      toolbar: [
        ['style', ['style']],
        ['font', ['bold', 'underline', 'italic']],
        ['insert', ['link', 'picture']],
      ],
      height: 300,
      callbacks: {
        onImageUpload: function(files) {
          
            sendFile(files[0], editor);
            console.log(files[0]);
        }
      }
    });
  });

  function sendFile(file, editor) {
    var data = new FormData();
    data.append("file", file);
    $.ajax({
      data: data,
      type: "POST",
      url: "editor-upload.php",
      cache: false,
      contentType: false,
      processData: false,
      success: function(response) {
        var imageUrl = response.trim(); // Trim any leading/trailing whitespace

        // Create an <img> element with the image URL
        var imgElement = $("<img>").attr("src", imageUrl);

        // Insert the <img> element into the editor
        editor.summernote("pasteHTML", imgElement[0].outerHTML);
      },
      error: function(xhr, status, error) {
        alert("Error occurred while uploading the image.");
      }
    });
  }
</script>

"editor-upload.php:"

<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
if (isset($_FILES['file']['name'])) {
    if (!$_FILES['file']['error']) {
        $name = rand(100, 1000) . '_' . date('Ymd');
        $ext = pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);
        $filename = $name . '.' . $ext;
        $destination = '../testimage/' . $filename; // Change this directory
        $location = $_FILES["file"]["tmp_name"];
        if (move_uploaded_file($location, $destination)) {
            $url = $_SERVER['REQUEST_SCHEME'] . '://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI']) . '/' . $destination;

            echo $url;
        } else {
            echo 'Error occurred while moving the uploaded file.';
        }
    } else {
        echo 'Ooops! Your upload triggered the following error: ' . $_FILES['file']['error'];
    }
} else {
    echo 'No file was uploaded.';
}
?>

I would greatly appreciate any guidance or suggestions on how to resolve this issue.

Answer 1

I resolved the issue by making the following modifications:

• In the "editor-upload.php" file, I replaced $_SERVER['REQUEST_SCHEME'] with $_SERVER['HTTP_HOST'] to correctly construct the image URL.

• And I modified the JavaScript code as follows:

  $(document).ready(function() {
   var editor = $("#summernote");
  
   editor.summernote({
       spellCheck: true,
       toolbar: [
           ['style', ['style']],
           ['font', ['bold', 'underline', 'italic']],
           ['insert', ['link', 'picture']],
       ],
       height: 300,
       callbacks: {
           onImageUpload: function(files) {
  
               sendFile(files[0], editor);
               console.log(files[0]);
           }
       }
   });
  });
  
  function sendFile(file, editor) {
   var data = new FormData();
   data.append("file", file);
   $.ajax({
       data: data,
       type: "POST",
       url: "editor-upload.php",
       cache: false,
       contentType: false,
       processData: false,
       success: function(response) {
           var imageUrl = response.trim(); // Trim any leading/trailing whitespace
  
           // Insert the image into the editor
           editor.summernote('insertImage', imageUrl);
           console.log(response);
       },
       error: function(xhr, status, error) {
           alert("Error occurred while uploading the image.");
       }
   });
  }
  

• I updated the JavaScript code to handle image uploads in the Summernote editor. The sendFile function is called when an image is uploaded, sending the file to the server using AJAX. The response from the server, containing the image URL, is then inserted into the editor using the insertImage method.

• I encountered a problem with the FTP file association, where images were opening in a text editor. To fix this, I adjusted the file association settings in FileZilla to associate image files with an image viewer or appropriate application.

With these modifications, I was able to successfully upload and display images copied directly into the Summernote editor.