From d93c85e53b2d53ce61687b8caef7253e946d9e6e Mon Sep 17 00:00:00 2001 From: polo Date: Wed, 18 Jun 2025 00:28:06 +0200 Subject: =?UTF-8?q?upload=20des=20images=20dans=20un=20code=20html=20copi?= =?UTF-8?q?=C3=A9-coll=C3=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/index.php | 116 ++++++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 102 insertions(+), 14 deletions(-) diff --git a/public/index.php b/public/index.php index 4c0201a..d6179b1 100644 --- a/public/index.php +++ b/public/index.php @@ -1,4 +1,23 @@ readImageBlob($image_data); + $imagick->stripImage(); // nettoyage métadonnées + $imagick->setImageFormat('jpeg'); + $imagick->setImageCompression(Imagick::COMPRESSION_JPEG); + $imagick->setImageCompressionQuality(85); // optionnel + $imagick->writeImage($local_path); // enregistrement + $imagick->clear(); + $imagick->destroy(); + return true; + } + catch (Exception $e) { + return false; + } +} + if(isset($_GET['action']) && $_GET['action'] == 'editor_submit'){ // récupération des données $data = file_get_contents('php://input'); @@ -41,19 +60,18 @@ elseif(isset($_GET['action']) && $_GET['action'] == 'upload_image'){ $file = $_FILES['file']; $dest = 'images/'; - // Vérifier si le répertoire existe, sinon le créer - if(!is_dir($dest)) { + if(!is_dir($dest)) { // Vérifier si le répertoire existe, sinon le créer mkdir($dest, 0777, true); } - $filePath = $dest . basename($file['name']); - if(move_uploaded_file($file['tmp_name'], $filePath)) { + $file_path = 'images/' . uniqid() . '.jpg'; + if(imagickCleanImage(file_get_contents($file['tmp_name']), $file_path)){ // recréer l’image pour la nettoyer $image_url = str_replace(basename($_SERVER['SCRIPT_NAME']), '', $_SERVER['SCRIPT_NAME']); - echo json_encode(['location' => $image_url . $filePath]); // renvoyer l'URL de l'image téléchargée + echo json_encode(['location' => $image_url . $file_path]); // renvoyer l'URL de l'image téléchargée } else{ http_response_code(500); - echo json_encode(['message' => 'Erreur 500: Internal Server Error']); + echo json_encode(['message' => 'Erreur image non valide']); } } else{ @@ -62,6 +80,32 @@ elseif(isset($_GET['action']) && $_GET['action'] == 'upload_image'){ } die; } +elseif(isset($_GET['action']) && $_GET['action'] == 'upload_image_url'){ + $json = json_decode(file_get_contents('php://input'), true); + + if(isset($json['image_url'])){ + $image_data = file_get_contents($json['image_url']); // téléchargement de l’image par le serveur + + if($image_data === false){ + http_response_code(400); + echo json_encode(['message' => "Erreur, le serveur n'a pas réussi à télécharger l'image."]); + die; + } + + $local_path = 'images/' . uniqid() . '.jpg'; + if(imagickCleanImage($image_data, $local_path)){ // recréer l’image pour la nettoyer + echo json_encode(['location' => $local_path]); // nouvelle adresse + } + else{ + http_response_code(500); + echo json_encode(['message' => 'Erreur image non valide']); + } + } + else{ + echo json_encode(['message' => 'Erreur 400: Bad Request']); + } + die; +} ?> @@ -98,6 +142,7 @@ elseif(isset($_GET['action']) && $_GET['action'] == 'upload_image'){ menubar: false, toolbar_mode: 'wrap', statusbar: false, + paste_data_images: true, setup: function (editor) { editor.on('init', function () { editors[articleId] = editor; @@ -108,19 +153,61 @@ elseif(isset($_GET['action']) && $_GET['action'] == 'upload_image'){ document.querySelector(`#cancel-${articleId}`).classList.remove('hidden'); document.querySelector(`#submit-${articleId}`).classList.remove('hidden'); }); + editor.on('PastePreProcess', function (e){ // déclenchement au collage AVANT insertion dans l'éditeur + //const images = e.node.querySelectorAll('img'); + let parser = new DOMParser(); + let doc = parser.parseFromString(e.content, 'text/html'); + let images = doc.querySelectorAll('img'); + + let downloads_in_progress = []; + + images.forEach(image => { + if(image.src.startsWith('http')){ + // le fait d'avoir lancer un téléchargement + let promise = fetch('index.php?action=upload_image_url', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ image_url: image.src }) + }) + .then(response => response.json()) + .then(data => { + if(data.location){ + image.src = data.location; // remplacer l'image par celle du serveur + } + }) + .catch(error => { + console.error('Erreur lors de l’upload de l’image :', error); + }); + + downloads_in_progress.push(promise); + } + }); + + console.log(downloads_in_progress); + + if(downloads_in_progress.length > 0){ + // faire attendre tinymce que le serveur récupère les images avant insertion + e.preventDefault(); + + Promise.all(downloads_in_progress).then(() => { + e.content = doc.body.innerHTML; + editor.insertContent(e.content); + }); + } + }); }, // upload d'image images_upload_handler: (blobInfo, progress) => new Promise((resolve, reject) => { const formData = new FormData(); formData.append("file", blobInfo.blob()); - fetch("index.php?action=upload_image", { - method: "POST", + fetch('index.php?action=upload_image', { + method: 'POST', body: formData }) .then(response => response.json()) .then(data => { - if (data.location) { + if(data.location) { resolve(data.location); } else { @@ -165,7 +252,7 @@ elseif(isset($_GET['action']) && $_GET['action'] == 'upload_image'){ } } - function closeEditor(articleId) { + function closeEditor(articleId){ // Récupérer le contenu d'origine de l'article const originalContent = document.getElementById(articleId).getAttribute('data-original-content'); @@ -186,7 +273,7 @@ elseif(isset($_GET['action']) && $_GET['action'] == 'upload_image'){ function submitArticle(articleId) { // Récupérer l'éditeur correspondant à l'article const editor = editors[articleId]; - if (!editor) { + if(!editor){ console.error('Éditeur non trouvé pour l\'article:', articleId); return; } @@ -207,12 +294,13 @@ elseif(isset($_GET['action']) && $_GET['action'] == 'upload_image'){ // Fermer l'éditeur et mettre à jour le contenu de l'article closeEditor(articleId); document.getElementById(articleId).innerHTML = newContent; - console.log(newContent); - if (data.success) { + //console.log(newContent); + if(data.success){ // Fermer l'éditeur et mettre à jour le contenu de l'article tinymce.remove(`#${articleId}`); document.getElementById(articleId).innerHTML = newContent; - } else { + } + else{ alert('Erreur lors de la sauvegarde de l\'article.'); } }) -- cgit v1.2.3