Issues uploading and displaying images copied directly into the Summernote editor

Question

I'm having trouble uploading an image that I 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. After pasting the image, it shows up as an unknown image in the editor.

3. However, when uploading the image using AJAX and saving it on the server, when I retrieve the image from the server and try to display it in the Summernote editor, the image does not display correctly. Instead, it appears 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 be grateful if you could provide guidance or advice on how to resolve this issue.

Answer 1

I solved the problem by making the following modifications:

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

• 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 Summer notes editor. When the image is called, the sendFile function is called After uploading, use AJAX to send the file to the server. response Then insert content from the server containing the image URL into Editor using the insertImage method.

• I'm having an FTP file association issue where the image Open in a text editor. To solve this problem I adjusted the file Association settings in FileZilla link image files to Image viewer or appropriate application.

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