upload images et documents par copier-coller et glisser-déposer, format whitelist par extensions côté JS, erreur chemin traduction, ajout format RTF

1 files changed, 166 insertions, 92 deletions

diff --git a/public/index.php b/public/index.php
index 2cd0c78..f46b384 100644
--- a/public/index.php
+++ b/public/index.php
@@ -72,7 +72,8 @@ function curlDownloadImage(string $url, int $maxRetries = 3, int $timeout = 10):
     return false; // échec après trois tentatives
 }
 
-function sanitizeFileName(string $filename): string {
+function sanitizeFileName(string $filename): string
+{
     $filename = preg_replace('/[^a-zA-Z0-9_-]/', '_', $filename); // ne garder que les lettres, chiffres, tirets et underscores
     $filename = preg_replace('/_+/', '_', $filename); // doublons d'underscores
     return trim($filename, '_');
@@ -80,8 +81,8 @@ function sanitizeFileName(string $filename): string {
 
 function checkFileDownload(array $file): bool
 {
-        $extensions_white_list = ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'odt', 'ods', 'odp'];
-        $mime_type_white_list = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.presentationml.presentation', 'application/vnd.oasis.opendocument.text', 'application/vnd.oasis.opendocument.spreadsheet', 'application/vnd.oasis.opendocument.presentation'];
+        $extensions_white_list = ['pdf', 'rtf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'odt', 'ods', 'odp']; // = extensions_white_list côté javascript
+        $mime_type_white_list = ['application/pdf', 'application/rtf', 'text/rtf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.presentationml.presentation', 'application/vnd.oasis.opendocument.text', 'application/vnd.oasis.opendocument.spreadsheet', 'application/vnd.oasis.opendocument.presentation'];
         
         // 1/ extension
         $extension = strtolower(pathinfo($file['name'], PATHINFO_EXTENSION));
@@ -93,18 +94,15 @@ function checkFileDownload(array $file): bool
         if(!is_uploaded_file($file['tmp_name'])){
                 return false;
         }
-        
-        $finfo = finfo_open(FILEINFO_MIME_TYPE);
-        
+
         // 3/ objet $finfo valide (dépend du paramètre FILEINFO_MIME_TYPE)
+    $finfo = new finfo(FILEINFO_MIME_TYPE);
         if($finfo === false){
         return false;
     }
         
-        $real_type = finfo_file($finfo, $file['tmp_name']);
-        finfo_close($finfo);
-        
         // 4/ contrôle du "vrai" type mime (finfo_file lit les 1ers octets des fichiers pour y trouver des "signatures", très fiable sauf avec les conteneurs: doc, zip...)
+    $real_type = finfo_file($finfo, $file['tmp_name']);
     return in_array($real_type, $mime_type_white_list, true);
 }
 
@@ -113,9 +111,9 @@ if(isset($_GET['action']) && $_GET['action'] == 'editor_submit'){
     $data = file_get_contents('php://input');
     $json = json_decode($data, true);
     
-    if(json_last_error() === JSON_ERROR_NONE) {
+    if(json_last_error() === JSON_ERROR_NONE){
         // Traitement côté serveur
-        $articleId = $json['id'];
+        $article_id = $json['id'];
         $content = $json['content'];
 
         // retour au client
@@ -135,7 +133,7 @@ elseif(isset($_GET['action']) && $_GET['action'] == 'delete_article'){
         $success = true;
         
         // retour au client
-        if($success) {
+        if($success){
             echo json_encode(['success' => true]);
         }
         else {
@@ -145,8 +143,6 @@ elseif(isset($_GET['action']) && $_GET['action'] == 'delete_article'){
     }
     die;
 }
-
-
 elseif(isset($_GET['action']) && in_array($_GET['action'], ['upload_image', 'upload_image_url', 'upload_image_base64'])){
     $dest = 'images/';
     if(!is_dir($dest)){
@@ -222,8 +218,6 @@ elseif(isset($_GET['action']) && in_array($_GET['action'], ['upload_image', 'upl
     }
     die;
 }
-
-
 elseif(isset($_GET['action']) && $_GET['action'] == 'upload_file'){
     if(isset($_FILES['file'])){
         $dest = 'media/';
@@ -275,15 +269,15 @@ elseif(isset($_GET['action']) && $_GET['action'] == 'upload_file'){
     <script>
         let editors = {};
 
-        function openEditor(articleId) {
+        function openEditor(article_id){
             // Récupérer et sauvegarder le contenu d'origine de l'article
-            const articleContent = document.getElementById(articleId).innerHTML;
-            document.getElementById(articleId).setAttribute('data-original-content', articleContent);
+            const articleContent = document.getElementById(article_id).innerHTML;
+            document.getElementById(article_id).setAttribute('data-original-content', articleContent);
 
             tinymce.init({
-                selector: `#${articleId}`,
+                selector: `#${article_id}`,
                 language: 'fr_FR', // télécharger des paquets de langue ici: https://www.tiny.cloud/get-tiny/language-packages/
-                language_url: '../vendor/tweeb/tinymce-i18n/langs/fr_FR.js', // ou installer tweeb/tinymce-i18n avec composer
+                language_url: '../vendor/mklkj/tinymce-i18n/langs/fr_FR.js', // paquet mklkj/tinymce-i18n avec composer
                 license_key: 'gpl',
                 branding: false,
                 plugins: 'lists link autolink table image media autoresize help',
@@ -298,16 +292,17 @@ elseif(isset($_GET['action']) && $_GET['action'] == 'upload_file'){
                                                 attrs.rel += 'noreferrer'; // cacher la page d'où on vient
                                         }
                                 },*/
-                //paste_data_images: true,
-                setup: function (editor) {
-                    editor.on('init', function () {
-                        editors[articleId] = editor;
+                setup: function (editor){
+                    const extensions_white_list = ['pdf', 'rtf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'odt', 'ods', 'odp']; // = $extensions_white_list côté PHP
+
+                    editor.on('init', function (){
+                        editors[article_id] = 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');
+                        document.querySelector(`#edit-${article_id}`).classList.add('hidden');
+                        document.querySelector(`#delete-${article_id}`).classList.add('hidden');
+                        document.querySelector(`#cancel-${article_id}`).classList.remove('hidden');
+                        document.querySelector(`#submit-${article_id}`).classList.remove('hidden');
                     });
                     let skipPastePreProcess = false;
                     editor.on('Paste', function (e){ // déclenchement AVANT PastePreProcess et quelque que soit le contenu collé
@@ -315,41 +310,39 @@ elseif(isset($_GET['action']) && $_GET['action'] == 'upload_file'){
                         if(!clipboardData){
                             return;
                         }
-                        const items = clipboardData.items;
-                        let foundImage = false;
-
-                        for(let i = 0; i < items.length; i++){
-                            let item = items[i];
-
-                            if(item.type.indexOf('image') !== -1){ // test type MIME contenant image
-                                foundImage = true;
-
-                                const file = item.getAsFile(); // presse-papier => fichier lisible
-                                const reader = new FileReader();
-
-                                reader.onload = function (event){ // fonction exécutée lorsque reader.readAsDataURL(file) est terminée
-                                    const base64Data = event.target.result; // données de l'image
-
-                                    fetch('index.php?action=upload_image_base64', {
-                                        method: 'POST',
-                                        headers: { 'Content-Type': 'application/json' },
-                                        body: JSON.stringify({ image_base64: base64Data })
-                                    })
-                                    .then(response => response.json())
-                                    .then(data => {
-                                        if(data.location){
-                                            editor.insertContent('<img src="' + data.location + '">');
-                                        }
-                                    })
-                                    .catch(error => {
-                                        console.error('Erreur lors de l’upload de l’image base64 :', error);
-                                    });
-                                };
-                                reader.readAsDataURL(file); // lecture asynchrone du fichier
+                        const items = clipboardData.items; // base64
+                        const files = clipboardData.files; // explorateur de fichiers
+                        let found_file = false;
+
+                        // données dans files
+                        if(files && files.length > 0){ // noter que files peut être vide, alors que items non
+                            for(let i = 0; i < files.length; i++){
+                                let file = files[i];
+                                
+                                if(extensions_white_list.includes(file.name.split('.').pop().toLowerCase())){
+                                    found_file = true;
+                                    uploadDocument(file, editor);
+                                }
+                                else if(file.type.indexOf('image') !== -1){ 
+                                    found_file = true;
+                                    uploadImageBase64(file, editor);
+                                }
+                            }
+                        }
+                        // données dans items
+                        else{ // les images collées depuis l'explorateur sont aussi dans items, or elles sont déjà gérées plus haut
+                            for(let i = 0; i < items.length; i++){
+                                let item = items[i];
+
+                                if(item.type.indexOf('image') !== -1){ // test type MIME contenant image
+                                    found_file = true;
+                                    const file = item.getAsFile(); // presse-papier => fichier lisible
+                                    uploadImageBase64(file, editor);
+                                }
                             }
                         }
 
-                        if(foundImage){
+                        if(found_file){
                             e.preventDefault(); // supprime le collage automatiue
                             skipPastePreProcess = true; // désactiver le PastePreProcess pour ce collage
                         }
@@ -363,7 +356,6 @@ elseif(isset($_GET['action']) && $_GET['action'] == 'upload_file'){
                         const parser = new DOMParser();
                         const doc = parser.parseFromString(e.content, 'text/html');
                         const images = doc.querySelectorAll('img');
-                        
                         let downloads_in_progress = [];
                         
                         images.forEach(img => {
@@ -395,7 +387,6 @@ elseif(isset($_GET['action']) && $_GET['action'] == 'upload_file'){
                         // une image web ou plus: différer l'insertion dans l'éditeur le temps que le serveur télécharge les images
                         if(downloads_in_progress.length > 0){
                             e.preventDefault();
-
                             Promise.all(downloads_in_progress).then(() => {
                                 e.content = doc.body.innerHTML; // remplacement du HTML dans l'éditeur par la copie modifiée (doc)
                                 editor.insertContent(e.content);
@@ -405,13 +396,47 @@ elseif(isset($_GET['action']) && $_GET['action'] == 'upload_file'){
                             e.content = doc.body.innerHTML; // remplacement du HTML dans l'éditeur par la copie modifiée (doc)
                         }
                     });
+                    // glisser-déposer de fichiers (sauf images qui sont déjà gérées nativement)
+                    editor.on('drop', function(e){
+                        const data = e.dataTransfer;
+                        if(!data || !data.files || data.files.length === 0){
+                            return; // Laisser TinyMCE gérer (texte, images déjà supportées, etc.)
+                        }
+                        const files = data.files;
+
+                        let has_documents = false;
+                        for(let i = 0; i < files.length; i++){
+                            if(extensions_white_list.includes(files[i].name.split('.').pop().toLowerCase())){
+                                has_documents = true;
+                                break;
+                            }
+                        }
+                        
+                        if(has_documents){
+                            e.preventDefault();
+                            e.stopPropagation();
+                            
+                            for(let i = 0; i < files.length; i++){
+                                let file = files[i];
+                                
+                                if(extensions_white_list.includes(file.name.split('.').pop().toLowerCase())){
+                                    uploadDocument(file, editor);
+                                }
+                                else if(file.type.indexOf('image') !== -1){
+                                    uploadImageBase64(file, editor);
+                                }
+                            }
+                        }
+                        // autres cas: tinymce gère tout seul
+                    });
                 },
-                // upload d'image natif de tinymce avec le bouton "Insérer une image"
+                // upload d'image avec le bouton "Insérer une image"
                 images_upload_handler: images_upload_handler, // = fonction fléchée
-                // upload de documents (bouton "insérer un lien")
+                // upload de documents avec le bouton "insérer un lien"
                 files_upload_handler: files_upload_handler, // = fonction fléchée
                 documents_file_types: [ // files_upload_handler a besoin qu'on lui donne tous les types mime
                                         { mimeType: 'application/pdf', extensions: [ 'pdf' ] },
+                    { mimeType: 'application/rtf', extensions: [ 'rtf' ] },
                                         { mimeType: 'application/msword', extensions: [ 'doc' ] },
                                         { mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', extensions: [ 'docx' ] },
                                         { mimeType: 'application/vnd.ms-excel', extensions: [ 'xls' ] },
@@ -426,7 +451,7 @@ elseif(isset($_GET['action']) && $_GET['action'] == 'upload_file'){
             });
 
             // Remplacer le contenu de l'article par l'éditeur
-            document.getElementById(articleId).innerHTML = articleContent;
+            document.getElementById(article_id).innerHTML = articleContent;
         }
         
         const images_upload_handler = (blobInfo, progress) => new Promise((resolve, reject) => {
@@ -439,10 +464,10 @@ elseif(isset($_GET['action']) && $_GET['action'] == 'upload_file'){
             })
             .then(response => response.json())
             .then(data => {
-                if(data.location) {
+                if(data.location){
                     resolve({url: data.location});
                 }
-                else {
+                else{
                     reject("Erreur: Chemin d'image invalide");
                 }
             })
@@ -451,7 +476,7 @@ elseif(isset($_GET['action']) && $_GET['action'] == 'upload_file'){
             });
         });
         
-        const files_upload_handler = (blobInfo, progress) => new Promise((resolve, reject) => {
+        const files_upload_handler = (blobInfo, progress) => new Promise((resolve, reject) => { // utilisation = bouton "link" (OU drag & drop, et oui)
             const formData = new FormData();
             formData.append("file", blobInfo.blob());
 
@@ -461,7 +486,7 @@ elseif(isset($_GET['action']) && $_GET['action'] == 'upload_file'){
             })
             .then(response => response.json())
             .then(data => {
-                if(data.location) {
+                if(data.location){
                         console.log(blobInfo.filename());
                         console.log(data.location);
                         
@@ -471,7 +496,7 @@ elseif(isset($_GET['action']) && $_GET['action'] == 'upload_file'){
                         fileName: blobInfo.filename(),
                     });
                 }
-                else {
+                else{
                     reject("Erreur: Chemin du fichier invalide");
                 }
             })
@@ -480,21 +505,21 @@ elseif(isset($_GET['action']) && $_GET['action'] == 'upload_file'){
             });
         });
         
-        function deleteArticle(articleId) {
-            if (confirm('Voulez-vous vraiment supprimer cet article ?')) {
+        function deleteArticle(article_id) {
+            if(confirm('Voulez-vous vraiment supprimer cet article ?')){
                 // Envoyer une requête au serveur pour supprimer l'article
                 fetch('index.php?action=delete_article', {
                     method: 'POST',
                     headers: {
                     'Content-Type': 'application/json'
                     },
-                    body: JSON.stringify({ id: articleId })
+                    body: JSON.stringify({ id: article_id })
                 })
                 .then(response => response.json())
                 .then(data => {
                     if (data.success) {
                         // Supprimer l'article du DOM
-                        const articleElement = document.getElementById(articleId);
+                        const articleElement = document.getElementById(article_id);
                         articleElement.parentElement.remove();
                     }
                     else {
@@ -507,29 +532,29 @@ elseif(isset($_GET['action']) && $_GET['action'] == 'upload_file'){
             }
         }
         
-        function closeEditor(articleId){
+        function closeEditor(article_id){
             // Récupérer le contenu d'origine de l'article
-            const originalContent = document.getElementById(articleId).getAttribute('data-original-content');
+            const originalContent = document.getElementById(article_id).getAttribute('data-original-content');
 
             // Fermer l'éditeur
-            tinymce.remove(`#${articleId}`);
-            delete editors[articleId];
+            tinymce.remove(`#${article_id}`);
+            delete editors[article_id];
             
             // Restaurer le contenu d'origine de l'article
-            document.getElementById(articleId).innerHTML = originalContent;
+            document.getElementById(article_id).innerHTML = originalContent;
 
             // 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');
+            document.querySelector(`#edit-${article_id}`).classList.remove('hidden');
+            document.querySelector(`#delete-${article_id}`).classList.remove('hidden');
+            document.querySelector(`#cancel-${article_id}`).classList.add('hidden');
+            document.querySelector(`#submit-${article_id}`).classList.add('hidden');
         }
         
-        function submitArticle(articleId) {
+        function submitArticle(article_id) {
             // Récupérer l'éditeur correspondant à l'article
-            const editor = editors[articleId];
+            const editor = editors[article_id];
             if(!editor){
-                console.error('Éditeur non trouvé pour l\'article:', articleId);
+                console.error('Éditeur non trouvé pour l\'article:', article_id);
                 return;
             }
             
@@ -542,18 +567,18 @@ elseif(isset($_GET['action']) && $_GET['action'] == 'upload_file'){
                 headers: {
                     'Content-Type': 'application/json'
                 },
-                body: JSON.stringify({ id: articleId, content: newContent })
+                body: JSON.stringify({ id: article_id, content: newContent })
             })
             .then(response => response.json())
             .then(data => {
                 // Fermer l'éditeur et mettre à jour le contenu de l'article
-                closeEditor(articleId);
-                document.getElementById(articleId).innerHTML = newContent;
+                closeEditor(article_id);
+                document.getElementById(article_id).innerHTML = newContent;
                 //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;
+                    tinymce.remove(`#${article_id}`);
+                    document.getElementById(article_id).innerHTML = newContent;
                 }
                 else{
                     alert('Erreur lors de la sauvegarde de l\'article.');
@@ -563,6 +588,55 @@ elseif(isset($_GET['action']) && $_GET['action'] == 'upload_file'){
                 console.error('Erreur:', error);
             });
         }
+
+        function uploadImageBase64(file, editor){
+            const reader = new FileReader();
+
+            reader.onload = function (event){ // fonction exécutée lorsque reader.readAsDataURL(file) est terminée
+                const base64 = event.target.result; // données de l'image
+
+                fetch('index.php?action=upload_image_base64', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ image_base64: base64 })
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if(data.location){
+                        editor.insertContent('<img src="' + data.location + '">');
+                    }
+                })
+                .catch(error => {
+                    console.error('Erreur lors de l’upload de l’image base64 :', error);
+                });
+            };
+            reader.readAsDataURL(file); // lecture asynchrone du fichier
+        }
+        function uploadDocument(file, editor){ // utilisation = copier-coller de l'explorateur de fichiers
+            const formData = new FormData();
+            formData.append("file", file);
+            
+            fetch('index.php?action=upload_file', {
+                method: 'POST',
+                body: formData
+            })
+            .then(response => response.json())
+            .then(data => {
+                if(data.location){
+                    // créer le lien <a>
+                    const file_name = file.name;
+                    const extension = file_name.split('.').pop().toLowerCase();
+                    const target = extension === 'pdf' ? 'target="_blank"' : ''; // PDF = page
+                    editor.insertContent(`<a href="${data.location}" ${target} title="${file_name}">[${extension}] ${file_name}</a>`);
+                }
+                else {
+                    console.error("Erreur: Chemin du fichier invalide");
+                }
+            })
+            .catch(error => {
+                console.error("Erreur lors de l'upload du document :", error);
+            });
+        }
     </script>
 </head>
 <body>