Php versions – CKeditor custom Uploader, PHP native, "Couldn't upload file: download.jpeg."

I am working with PHP, JS, and currently trying to use CKEditor 5 with a Build version. At the moment, I am stuck with image upload. I had to develop my own uploader in JavaScript.

Here is the JavaScript code:

class MyUploadAdapter {
  constructor(loader) {
    this.loader = loader;
    console.log("MyUploadAdapter initialized");
  }

  upload() {
    console.log("Upload started");
    return this.loader.file.then(
      (file) =>
        new Promise((resolve, reject) => {
          this._initRequest();
          this._initListeners(resolve, reject, file);
          this._sendRequest(file);
        })
    );
  }

  abort() {
    if (this.xhr) {
      console.log("Upload aborted");
      this.xhr.abort();
    }
  }

  _initRequest() {
    const xhr = (this.xhr = new XMLHttpRequest());
    xhr.open("POST", "../admin/uploader", true);
    xhr.responseType = "json";
    console.log("Request initialized");
  }

  _initListeners(resolve, reject, file) {
    const xhr = this.xhr;
    const loader = this.loader;
    const genericErrorText = `Couldn't upload file: ${file.name}.`;

    xhr.addEventListener("error", () => {
      console.log("Error event occurred");
      reject(genericErrorText);
    });
    xhr.addEventListener("abort", () => {
      console.log("Upload aborted");
      reject();
    });
    xhr.addEventListener("load", () => {
      console.log("Upload completed");
      const response = xhr.response;
      console.log("Response received", response);

      if (!response || response.error) {
        console.log(
          "Error in response",
          response ? response.error : "No response"
        );
        return reject(
          response && response.error ? response.error.message : genericErrorText
        );
      }

      console.log("Upload successful, URL:", response.url);
      resolve({
        default: response.url,
      });
    });

    if (xhr.upload) {
      xhr.upload.addEventListener("progress", (evt) => {
        if (evt.lengthComputable) {
          loader.uploadTotal = evt.total;
          loader.uploaded = evt.loaded;
          console.log(`Progress: ${evt.loaded}/${evt.total}`);
        }
      });
    }
  }

  _sendRequest(file) {
    const data = new FormData();
    data.append("upload", file);
    console.log("Sending request with file:", file.name);
    this.xhr.send(data);
  }
}

function MyCustomUploadAdapterPlugin(editor) {
  editor.plugins.get("FileRepository").createUploadAdapter = (loader) => {
    return new MyUploadAdapter(loader);
  };
}

function initializeEditors() {
  document
    .querySelectorAll('[data-ckeditor="true"]')
    .forEach(function (editor) {
      if (!editor.classList.contains("initialized")) {
        ClassicEditor.create(editor, {
          removePlugins: ["MediaEmbedToolbar"],
          extraPlugins: [MyCustomUploadAdapterPlugin],
          mediaEmbed: {
            previewsInData: true,
          },
        })
          .then(() => {
            console.log("Editor initialized");
          })
          .catch((error) => {
            console.error(error);
          });
        editor.classList.add("initialized");
      }
    });
}

document.addEventListener("DOMContentLoaded", initializeEditors);

And here is my PHP code:

<?php

// Start output buffering
ob_start();

header('Content-Type: application/json');

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    echo "POST request receivedn";
    if (isset($_FILES['upload']) && $_FILES['upload']['error'] === UPLOAD_ERR_OK) {
        echo "File upload detectedn";
        $uploadDir = '../assets/img/uploader/';
        
        if (!file_exists($uploadDir)) {
            echo "Directory does not exist, creating...n";
            mkdir($uploadDir, 0777, true); 
        } else {
            echo "Directory existsn";
        }

        $fileName = uniqid() . '_' . basename($_FILES['upload']['name']);
        $uploadPath = $uploadDir . $fileName;
        echo "File will be uploaded to: $uploadPathn";
        
        if (move_uploaded_file($_FILES['upload']['tmp_name'], $uploadPath)) {
            echo "File uploaded successfullyn";
            echo json_encode(array('url' => $uploadPath));
        } else {
            echo "File upload failedn";
            http_response_code(500);
            echo json_encode(array('error' => 'Erreur lors du téléchargement du fichier.'));
        }
    } else {
        echo "No file uploaded or error detectedn";
        http_response_code(400);
        echo json_encode(array('error' => 'Aucun fichier téléchargé ou une erreur s'est produite.'));
    }
} else {
    echo "Invalid request methodn";
    http_response_code(405);
    echo json_encode(array('error' => 'Méthode de requête non autorisée.'));
}

// Send the output buffer and end output buffering
ob_end_flush();
?>

In my console, I see this:

MyUploadAdapter initialized
admin.js:395 Upload started
admin.js:417 Request initialized
admin.js:468 Sending request with file: téléchargement.jpeg
admin.js:459 Progress: 8981/8981
admin.js:434 Upload completed
admin.js:436 Response received null
admin.js:439 Error in response No response

When I check my folder …/img/uploader/, I see my uploaded images.

However, my problem is that when I upload my image, I get this browser pop-up:

"Couldn’t upload file: téléchargement.jpeg."

Then my image disappears from my front end.

Do you have any ideas?

Thank you very much for your help; I have been stuck on this for 2 weeks.

• Checking the console: The console shows that the upload process starts, progresses, and completes, but the response is null.

• Inspecting the PHP code: The PHP code appears to handle the file upload correctly, saving files to the specified directory. The uploaded files are indeed present in the directory.

• Verifying server responses: The server is supposed to return a JSON response with the file URL, but it seems that the JavaScript code does not receive this response.

• Looking at potential errors in the upload process: The JavaScript code logs various stages of the upload process, but the final response is either missing or contains an error.