CKEditor 5 Image Upload Issue - Receiving HTML Instead of JSON Response #127887

tayllana · 2024-06-09T11:54:59Z

tayllana
Jun 9, 2024

Body

I am using CKEditor 5, but I am facing issues when saving images. When I try to save, only the text gets saved and the images do not. The image is stored in the format "data
/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZ4AAALXCAYAAAC9wyY2AAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUt", but I need to save the image on my server and have the URL of the uploaded image returned by the server, replacing the base64 image location in the editor's content.

My file structure is as follows:

/index.html
/ckeditor5/build/MyUploadAdapter.js
/ckeditor5/build/MyCustomUploadAdapterPlugin.js
/ckeditor5/upload.php
/ckeditor5/uploads

MyUploadAdapter.js

class MyUploadAdapter {
  constructor(loader) {
    // The file loader instance
    this.loader = loader;
  }

  // Starts the upload process
  upload() {
    return this.loader.file
      .then(file => new Promise((resolve, reject) => {
        const formData = new FormData();
        formData.append('file', file);

        const xhr = new XMLHttpRequest();
        xhr.open('POST', '../upload.php', true);
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

        xhr.upload.addEventListener('progress', (evt) => {
          if (evt.lengthComputable) {
            const percentComplete = (evt.loaded / evt.total) * 100;
            console.log(percentComplete);
          }
        });

        xhr.addEventListener('load', () => {
          if (xhr.status === 200) {
            const response = JSON.parse(xhr.responseText);
            resolve({
              default: response.url
            });
          } else {
            reject(xhr.statusText);
          }
        });

        xhr.addEventListener('error', () => {
          reject(xhr.statusText);
        });

        xhr.send(formData);
      }));
  }

  // Aborts the upload process
  abort() {
    if (this.xhr) {
      this.xhr.abort();
    }
  }
}

MyCustomUploadAdapterPlugin.js

function MyCustomUploadAdapterPlugin(editor) {
  editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
    // Return an instance of your custom upload adapter
    return new MyUploadAdapter(loader);
  };
}

upload.php

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  if (isset($_FILES['file']) && $_FILES['file']['error'] === UPLOAD_ERR_OK) {
    $fileTmpPath = $_FILES['file']['tmp_name'];
    $fileName = $_FILES['file']['name'];
    $fileSize = $_FILES['file']['size'];
    $fileType = $_FILES['file']['type'];
    $fileNameCmps = explode(".", $fileName);
    $fileExtension = strtolower(end($fileNameCmps));

    $uploadFileDir = './ckeditor5/uploads/';
    if (!file_exists($uploadFileDir)) {
      mkdir($uploadFileDir, 0777, true);
    }

    $newFileName = md5(time() . $fileName) . '.' . $fileExtension;
    $dest_path = $uploadFileDir . $newFileName;

    if (move_uploaded_file($fileTmpPath, $dest_path)) {
      $response = [
        'url' => 'https://www.fatorcor.com.br/ckeditor5/uploads/' . $newFileName
      ];
      echo json_encode($response);
    } else {
      $response = [
        'error' => 'There was a problem moving the uploaded file to the destination directory.'
      ];
      echo json_encode($response);
    }
  } else {
    $response = [
      'error' => 'File upload failed.'
    ];
    echo json_encode($response);
  }
} else {
  header("HTTP/1.0 405 Method Not Allowed");
  echo "Method not allowed";
}
?>

index

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CKEditor</title>
</head>
<body>
  <textarea name="description" id="description"></textarea>
  <script src="ckeditor5/build/ckeditor.js"></script>
  <script src="ckeditor5/build/MyUploadAdapter.js"></script>
  <script src="ckeditor5/build/MyCustomUploadAdapterPlugin.js"></script>
  <script>
    ClassicEditor
      .create(document.querySelector('#description'), {
        extraPlugins: [MyCustomUploadAdapterPlugin],
      })
      .catch(error => {
        console.error(error);
      });
  </script>
</body>
</html>

Please note that I am not using Node.js, only PHP and JavaScript. I have debugged the code, and what I receive at const response = JSON.parse(xhr.responseText); is just the HTML of my own page.

Remember that I am a beginner in programming, so I do not have much practice and find some things difficult.
Could someone help me fix the image upload issue? Thank you in advance!

Guidelines

I have read and understood this category's guidelines before making this post.

tayllana · 2024-06-09T15:33:54Z

tayllana
Jun 9, 2024
Author

Consegui resolver sozinha

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GitHub Community

CKEditor 5 Image Upload Issue - Receiving HTML Instead of JSON Response #127887

{{title}}

Replies: 1 comment

{{title}}

Select a reply

GitHub Community

CKEditor 5 Image Upload Issue - Receiving HTML Instead of JSON Response #127887

tayllana Jun 9, 2024

Body

Guidelines

Replies: 1 comment

tayllana Jun 9, 2024 Author

tayllana
Jun 9, 2024

tayllana
Jun 9, 2024
Author