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.
2
Answers
Thanks! I don't have the problem anymore, but now when I save, this is the data I get :
etc
Do you know guys why i got this ? This is not the first time..
Thanks you a lot
I believe the problem is because of all the extra outputting the php script is doing. So it is therefore not returning the json expected. I set up a test and commented out all the extra "echo" lines and it worked.