[SOLVED] Issue with Image Upload in CKEditor

Issue with Image Upload in CKEditor

I'm starting to use CKEditor for the first time and I'm having trouble with image uploads. No matter what I do, the image upload simply doesn't work.

I'm trying to solve this using only JavaScript and PHP. My file structure is quite simple:

index.html upload.php A folder called uploads to store the images. I've read the documentation and watched several tutorials, but they all use Node, Laravel, or Angular, which didn't help me at all.

Whenever I try to upload an image, I get the following error:

ckeditorerror.js:146 filerepository-no-upload-adapter
Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-filerepository-no-upload-adapter

Is it possible to solve this problem using just these resources? If so, could someone guide me on how to do it?

Any help would be greatly appreciated!

Thank you!

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CKEditor Simple Upload Adapter</title>
    <script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/classic/ckeditor.js"></script>
</head>
<body>
    <textarea name="editor" id="editor"></textarea>
    <script>
        ClassicEditor
            .create(document.querySelector('#editor'), {
                simpleUpload: {
                    uploadUrl: 'upload.php',
                    headers: {
                        'X-CSRF-TOKEN': 'CSRF-Token',
                    }
                }
            })
            .catch(error => {
                console.error(error);
            });
    </script>
</body>
</html>

upload.php

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

        // Definir um diretório para armazenar os arquivos carregados
        $uploadFileDir = './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' => 'uploads/' . $newFileName
            ];
            echo json_encode($response);
        } else {
            $response = [
                'error' => 'Houve um problema ao mover o arquivo carregado para o diretório de destino.'
            ];
            echo json_encode($response);
        }
    } else {
        $response = [
            'error' => 'Não foi possível carregar o arquivo.'
        ];
        echo json_encode($response);
    }
} else {
    header("HTTP/1.0 405 Method Not Allowed");
    echo "Método não permitido";
}
?>

Solution

I solved the problem using the Simple Upload Adapter with the help of ChatGPT. For those who want to check it out, the link to the project is available at https://github.com/tayllana/TextEditor.