upload image, plugins et boutons

1 files changed, 56 insertions, 31 deletions

diff --git a/public/index.php b/public/index.php
index 69f335c..81a0408 100644
--- a/public/index.php
+++ b/public/index.php
@@ -19,7 +19,29 @@ if(isset($_GET['action']) && $_GET['action'] == 'editor_submit'){
     die;
 }
 elseif(isset($_GET['action']) && $_GET['action'] == 'upload_image'){
-    echo "hello";
+    if (isset($_FILES['file'])) {
+        $file = $_FILES['file'];
+        $dest = 'images/';
+        
+        // Vérifier si le répertoire existe, sinon le créer
+        if(!is_dir($dest)) {
+            mkdir($dest, 0777, true);
+        }
+        
+        $filePath = $dest . basename($file['name']);
+        if(move_uploaded_file($file['tmp_name'], $filePath)) {
+            // Répondre avec l'URL de l'image téléchargée
+            echo json_encode(['location' => '/' . $filePath]);
+        }
+        else{
+            http_response_code(500);
+            echo json_encode(['message' => 'Erreur 500: Internal Server Error']);
+        }
+    }
+    else{
+        http_response_code(400);
+        echo json_encode(['message' => 'Erreur 400: Bad Request']);
+    }
     die;
 }
 ?>
@@ -52,45 +74,52 @@ elseif(isset($_GET['action']) && $_GET['action'] == 'upload_image'){
                 language: 'fr_FR', // télécharger le paquet correspondant ici: https://www.tiny.cloud/get-tiny/language-packages/
                 license_key: 'gpl',
                 branding: false,
-                plugins: 'image code', // Activer le plugin d'image
-                toolbar: 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | image code',
+                plugins: 'lists advlist link autolink table image media autoresize help',
+                toolbar: 'undo redo print | styles | bold italic underline strikethrough | align outdent indent | numlist bullist | link table image media | help',
                 setup: function (editor) {
                     editor.on('init', function () {
                         editors[articleId] = editor;
                         
                         // Masquer le bouton "Modifier" et afficher les boutons "Annuler" et "Soumettre"
                         document.querySelector(`#edit-${articleId}`).classList.add('hidden');
+                        document.querySelector(`#delete-${articleId}`).classList.add('hidden');
                         document.querySelector(`#cancel-${articleId}`).classList.remove('hidden');
                         document.querySelector(`#submit-${articleId}`).classList.remove('hidden');
                     });
                 },
                 // upload d'image
-                images_upload_handler: function (blobInfo, success, failure) {
-                    const xhr = new XMLHttpRequest();
-                    xhr.withCredentials = false;
-                    xhr.open('POST', 'index.php?action=upload_image');
-
-                    xhr.onload = function() {
-                        const json = JSON.parse(xhr.responseText);
+                images_upload_handler: (blobInfo, progress) => new Promise((resolve, reject) => {
+                    const formData = new FormData();
+                    formData.append("file", blobInfo.blob());
 
-                        if (xhr.status < 200 || xhr.status >= 300) {
-                            failure('HTTP Error: ' + xhr.status);
-                            return;
+                    fetch("index.php?action=upload_image", {
+                        method: "POST",
+                        body: formData
+                    })
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.location) {
+                            resolve(data.location);
                         }
-
-                        success(json.location);
-                    };
-
-                    const formData = new FormData();
-                    formData.append('file', blobInfo.blob(), blobInfo.filename());
-                    xhr.send(formData);
-                }
+                        else {
+                            reject("Erreur: Chemin d'image invalide");
+                        }
+                    })
+                    .catch(error => {
+                        reject("Erreur lors de l'upload");
+                    });
+                })
             });
 
             // Remplacer le contenu de l'article par l'éditeur
             document.getElementById(articleId).innerHTML = articleContent;
         }
         
+        function deleteArticle(articleId) {
+            console.log("suppression");
+            // code similaire à submitArticle()
+        }
+        
         function closeEditor(articleId) {
             // Récupérer le contenu d'origine de l'article
             const originalContent = document.getElementById(articleId).getAttribute('data-original-content');
@@ -104,6 +133,7 @@ elseif(isset($_GET['action']) && $_GET['action'] == 'upload_image'){
 
             // Afficher le bouton "Modifier" et masquer les boutons "Annuler" et "Soumettre"
             document.querySelector(`#edit-${articleId}`).classList.remove('hidden');
+            document.querySelector(`#delete-${articleId}`).classList.remove('hidden');
             document.querySelector(`#cancel-${articleId}`).classList.add('hidden');
             document.querySelector(`#submit-${articleId}`).classList.add('hidden');
         }
@@ -118,15 +148,8 @@ elseif(isset($_GET['action']) && $_GET['action'] == 'upload_image'){
             
             // Récupérer le contenu de l'éditeur
             const newContent = editor.getContent();
-            
-            // test sans envoi au serveur
-            //~ closeEditor(articleId);
-            //~ document.getElementById(articleId).innerHTML = newContent;
-            //~ console.log(newContent);
-            
 
-            // Envoyer le contenu au serveur via AJAX
-            //fetch('/save-article', {
+            // Envoi AJAX au serveur
             fetch('index.php?action=editor_submit', {
                 method: 'POST',
                 headers: {
@@ -161,8 +184,9 @@ elseif(isset($_GET['action']) && $_GET['action'] == 'upload_image'){
             <p>Contenu de l'article 1.</p>
         </div>
         <button id="edit-article-1" onclick="openEditor('article-1')">Modifier</button>
+        <button id="delete-article-1" onclick="deleteArticle('article-1')">Supprimer</button>
         <button id="cancel-article-1" class="hidden" onclick="closeEditor('article-1')">Annuler</button>
-        <button id="submit-article-1" class="hidden" onclick="submitArticle('article-1')">Soumettre</button>
+        <button id="submit-article-1" class="hidden" onclick="submitArticle('article-1')">Valider</button>
     </div>
 
     <div>
@@ -171,8 +195,9 @@ elseif(isset($_GET['action']) && $_GET['action'] == 'upload_image'){
             <p>Contenu de l'article 2.</p>
         </div>
         <button id="edit-article-2" onclick="openEditor('article-2')">Modifier</button>
+        <button id="delete-article-2" onclick="deleteArticle('article-2')">Supprimer</button>
         <button id="cancel-article-2" class="hidden" onclick="closeEditor('article-2')">Annuler</button>
-        <button id="submit-article-2" class="hidden" onclick="submitArticle('article-2')">Soumettre</button>
+        <button id="submit-article-2" class="hidden" onclick="submitArticle('article-2')">Valider</button>
     </div>
 </body>
 </html>