importer des images

**laurentSc** · 23/09/2023, 17h17

Bonjour,
je crée une interface permettant à l'utilisateur de saisir des actualités. Je m'intéresse à TinyMCE pour lui fournir un éditeur style Word, lui permettant de saisir du texte et d'insérer des images. C'est cette partie qui me pose problème. Actuellement, j'ai un script qui permet de saisir du texte et importer des images prises sur le disque dur.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html>
 
<head>
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.7.0/tinymce.min.js"></script>
 
    <script>
        tinymce.init({
            selector: 'textarea#file-picker',
            statusbar: false,
            language_url: "fr_FR/langs/fr_FR.js",   // ici le chemin d'accès au fichier de traduction
            language : "fr_FR",
            plugins: 'image code',
            toolbar: 'undo redo | link image | code',
            /* enable title field in the Image dialog*/
            image_title: true,
            /* enable automatic uploads of images represented by blob or data URIs*/
            automatic_uploads: true,
            /*
            URL of our upload handler (for more details check: https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_url)
            images_upload_url: 'postAcceptor.php',
            here we add custom filepicker only to Image dialog
            */
            file_picker_types: 'image',
            /* and here's our custom image picker*/
            file_picker_callback: function (cb, value, meta) {
                var input = document.createElement('input');
                input.setAttribute('type', 'file');
                input.setAttribute('accept', 'image/*');
 
                /*
                Note: In modern browsers input[type="file"] is functional without
                even adding it to the DOM, but that might not be the case in some older
                or quirky browsers like IE, so you might want to add it to the DOM
                just in case, and visually hide it. And do not forget do remove it
                once you do not need it anymore.
                */
 
                input.onchange = function () {
                    var file = this.files[0];
 
                    var reader = new FileReader();
                    reader.onload = function () {
                        /*
                        Note: Now we need to register the blob in TinyMCEs image blob
                        registry. In the next release this part hopefully won't be
                        necessary, as we are looking to handle it internally.
                        */
                        var id = 'blobid' + (new Date()).getTime();
                        var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
                        var base64 = reader.result.split(',')[1];
                        var blobInfo = blobCache.create(id, file, base64);
                        blobCache.add(blobInfo);
 
                        /* call the callback and populate the Title field with the file name */
                        cb(blobInfo.blobUri(), { title: file.name });
                    };
                    reader.readAsDataURL(file);
                };
 
                input.click();
            },
            content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
        });
    </script>
</head>
 
<body>
<form action="traitement.php" method="post">
 
    <textarea name="CeQueVousVoulez" id="file-picker"></textarea>
 
 
    <input type="submit" value="envoyer">
</form>
</body>
</html>

L'idée serait de déposer les images dans un répertoire sur le serveur et d'en stocker l'URL en bdd.

Pour voir ce que je récupère actuellement, j'ai mis ce code dans traitement.php (l'action du formulaire) :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<?php
var_dump($_POST);

et je m'aperçois que l'image importée est présente "en dur" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
array(1) {
  ["CeQueVousVoulez"]=>
  string(196139) "<p>blabla</p>
<p>&nbsp;</p>
<p><img title="stop-frelon.png" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAa4AAAF7CAYAAACKBm8GAAAAxHpUWHRSYXcgcHJvZmlsZSB0eXBlIGV4aWYAAHjabVBbEsMgCPznFD2CPFQ8jmnsTG/Q4xcDmYltyLi7glkRGJ/3Cx4zCAUkVy2tlGQhTRp1E5o8+oGY5EBPjVC45qFuIcmYjdkLWpzxzMcPJ2M3lS9G+ozCthaaOJP+GJETz46m3sOohRGTFzAMuj8rlab1+oRtpDXUF0wQXdv.../+gxxtVFQ1oAVYBHUA1EGxtbQ20traGKioqAn6/3zQMwxBCSKWUU83h4ODg8AFHCKEA27IsK5FIpOfn55M9PT0zhw8fnpubm5sn64t7ATgCHAeGbug8N3GN0jRNTSnlymQyxVLKFo/Hs8Tr9TZ6PJ4KXdfzhBB+wK2U0pyP1MHBweFDIV5pIGrb9nw6nZ6OxWKXI5FIdzqdPgtc1DRtHkin02kbuCFj2/8fmtGaTQ7QlPIAAAAASUVORK5CYII=" alt="" width="430" height="379"></p>"
}

Comment puis-je faire SVP ?

**laurentSc** · 24/09/2023, 10h47

Vu l'abondance des réponses, je modifie ma demande.
Étant persuadé de ne pas être le seul à importer des images avec TinyMCE, pouvez vous décrire votre façon de faire ?

Ca pourrait me servir de 2 façons :
1- La méthode me séduit et je l'adopte ;
2- Elle me donne des idées pour faire fonctionner ma méthode.

**laurentSc** · 25/09/2023, 16h05

J'ai un peu avancé (à l'aide du regard d'un expert) car je sais maintenant que l'image importée est au format base64. C'est donc TinyMCE qui fait cette conversion. Donc comment modifier le code de tinymce.init (donné au post#1) pour renvoyer non pas le fichier converti, mais le fichier lui-même ?

**NoSmoking** · 25/09/2023, 17h02

Bonjour,

... car je sais maintenant que l'image importée est au format base64.

c'est vrai pour les images de provenance locale mais pas pour les distantes.

C'est même écrit dans la documentation

Envoyé par https://www.tiny.cloud/docs/tinymce/6/upload-images/

Local images are uploaded to TinyMCE using the editor.uploadImages() function. This functionality makes it possible for users to save their content before all images have completed uploading. If this occurs and no server path to the remote image is available, the images are saved as Base64.

Donc comment modifier le code de tinymce.init (donné au post#1) pour renvoyer non pas le fichier converti, mais le fichier lui-même ?

tu ne va pas avoir d'autre moyen que d'envoyer en base64 et traiter cela côté serveur.

Étant persuadé de ne pas être le seul à importer des images avec TinyMCE, pouvez vous décrire votre façon de faire ?

il y a au moins deux méthodes « simples », une en passant par une preg_match_all pour récupérer les src des images, enregistrer les données dans un fichier à identifiant unique après passage dans base64_decode et remplacer la src de l'image par l'url du fichier sauvegardé.

Une autre approche consiste à passer par un new DOMDocument(), charger le html envoyer par tinyMCE, récupérer les éléments images, récupérer la src et ... pareil que ci-dessus.

**laurentSc** · 25/09/2023, 21h37

Envoyé par NoSmoking

il y a au moins deux méthodes « simples », une en passant par une preg_match_all pour récupérer les src des images, enregistrer les données dans un fichier à identifiant unique après passage dans base64_decode et remplacer la src de l'image par l'url du fichier sauvegardé.

Les guillemets autour de simples sont pas en trop

Peux-tu me détailler un peu cette méthode ? J'ai compris le principe mais je vois pas son application. Comment, par exemple, récupérer le code de l'image dans le format base64 avec preg_match_all ?

**NoSmoking** · 26/09/2023, 16h30

Peux-tu me détailler un peu cette méthode ?

tout d'abord tu reçois un texte pour les images qui ressemble à :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="data:image/png;base64,iVBORw0KGgoAAAAN...=" ...>

... c'est la partie "data:image/png;base64,iVBORw0KGgoAAAAN...=" qu'il faut remplacer par quelque chose comme "chemin-images/nom-image.png".

Il faut donc récupérer toutes les images contenu dans le texte reçu avec preg_match_all.

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$pattern = "/\< *[img][^\>]*[src] *= *[\"\']{0,1}([^\"\'\ >]*)/i";
$prefixImage = "data:image/";
$html = $_POST['texte'];
 
preg_match_all($pattern, $html, $matches, PREG_SET_ORDER);

Ensuite pour chaque récupération, contenu dans $matches, il faut « isoler » la partie "data:image/png;base64,iVBORw0KGgoAAAAN...=".

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
foreach ($matches as $match) {
  $img = $match[0];  // contient la chaine complète, <img src="....>
  $src = $match[1];  // contient le contenu de src

Il faut maintenat traiter ce qu'il y a dans $src pour récupérer "data:image/png, le type d'image, d'un côté et "iVBORw0KGgoAAAAN...=", les données sous forme base64, de l'autre.

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$base64 = explode(";base64,", $src);
$base64[0];    // contient "data:image/png"
$base64[1];    // contient "iVBORw0KGgoAAAAN...="

... à ce niveau il me semble souhaitable de faire des tests pour vérifier que l'on est bien en présence d'une image non vide et même récupérer l’extension pour le fichier.

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
// il serait bon de tester l'extension, attention à svg+xml
$ext = str_replace("data:image/", ".", $base64[0]);

Pour finir on décode ce qu'il y a dans $base64[1], on écrit les données dans un fichier à identification unique et il suffit de remplacer le contenu de l'attribut src initial par le nom du fichier.

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
$decoded = base64_decode($base64[1], true);
$nomFile = $imageDirectory . uniqid("image-") . $ext;
$size = file_put_contents($nomFile, $decoded);
if($size){
  $html = str_replace($src, $nomFile, $html);
}
else {
  echo "Une erreur c'est produite";
}

voilà en gros la démarche, cela serait la même avec un new DOMDocument().

Le résumé complet :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?php
if (!isset($_POST['texte']) || empty ($_POST['texte'])) {
  echo "Aucune donnée disponible";
  exit;
}
$imageDirectory = "tinymce/images/";
$pattern = "/\< *[img][^\>]*[src] *= *[\"\']{0,1}([^\"\'\ >]*)/i";
$prefixImage = "data:image/";
$html = $_POST['texte'];
 
preg_match_all($pattern, $html, $matches, PREG_SET_ORDER);
 
foreach ($matches as $match) {
  //$img = $match[0];  // contient la chaine complète, <img src="....>
  $src = $match[1];  // contient le contenu de src
  $base64 = explode(";base64,", $src);
  // fichier image uniquement
  $accept = strpos($base64[0], $prefixImage) !== false;
  if ($accept && count($base64) > 1) {
    $ext = str_replace($prefixImage, ".", $base64[0]);
    // il serait bon de tester l'extension, attention à svg+xml
    $decoded = base64_decode($base64[1], true);
    $nomFile = $imageDirectory . uniqid("image-") . $ext;
    $size = file_put_contents($nomFile, $decoded);
    if($size){
      $html = str_replace($src, $nomFile, $html);
    }
    else {
      echo "Une erreur c'est produite";
    }
  }
}
echo $html;  // pour mise à jour éventuelle côté client

Je pense avoir fait le tour.

Nota :
il aurait peut-être mieux valu poser ta question sur le forum PHP, mon PHP étant largement rouillé, n'hésite pas à le faire valider

.
Ceci est une approche et il va sans dire qu'il faut un peu plus de verrou car il y a pas mal d’écueils en vu.

**laurentSc** · 26/09/2023, 17h57

il aurait peut-être mieux valu poser ta question sur le forum PHP

j'étais justement en train quand je t'ai lu...Je vais me pencher dessus et si besoin, je me tournerai vers le forum PHP...

**laurentSc** · 27/09/2023, 18h49

Grâce à toi, je suis proche du but.

Voici mon traitement.php :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<?php
$imageDirectory = "images/";
$pattern = "/\< *[img][^\>]*[src] *= *[\"\']{0,1}([^\"\'\ >]*)/i";
$prefixImage = "data:image/";
$html = $_POST['CeQueVousVoulez'];
 
preg_match_all($pattern, $html, $matches, PREG_SET_ORDER);
 
foreach ($matches as $match) {
    //$img = $match[0];  // contient la chaine complète, <img src="....>
    $src = $match[1];  // contient le contenu de src
    $base64 = explode(";base64,", $src);
    // fichier image uniquement
    $accept = strpos($base64[0], $prefixImage) !== false;
    if ($accept && count($base64) > 1) {
        $ext = str_replace($prefixImage, ".", $base64[0]);
        // il serait bon de tester l'extension, attention à svg+xml
        $decoded = base64_decode($base64[1], true);
        $nomFile = $imageDirectory . uniqid("image-") . $ext;
        $size = file_put_contents($nomFile, $decoded);
        if($size){
            $html = str_replace($src, $nomFile, $html);
        }
        else {
            echo "Une erreur c'est produite";
        }
    }
}
echo $html;  // pour mise à jour éventuelle côté client
?>
 
 
<?php
if (!isset($_POST['CeQueVousVoulez']) || empty ($_POST['CeQueVousVoulez'])) {
    echo "Aucune donnée disponible";
    exit;
}
$imageDirectory = "tinymce/images/";
$pattern = "/\< *[img][^\>]*[src] *= *[\"\']{0,1}([^\"\'\ >]*)/i";
$prefixImage = "data:image/";
$html = $_POST['CeQueVousVoulez'];
 
preg_match_all($pattern, $html, $matches, PREG_SET_ORDER);
 
foreach ($matches as $match) {
    //$img = $match[0];  // contient la chaine complète, <img src="....>
    $src = $match[1];  // contient le contenu de src
    $base64 = explode(";base64,", $src);
    // fichier image uniquement
    $accept = strpos($base64[0], $prefixImage) !== false;
    if ($accept && count($base64) > 1) {
        $ext = str_replace($prefixImage, ".", $base64[0]);
        // il serait bon de tester l'extension, attention à svg+xml
        $decoded = base64_decode($base64[1], true);
        $nomFile = $imageDirectory . uniqid("image-") . $ext;
        $size = file_put_contents($nomFile, $decoded);
        if($size){
            $html = str_replace($src, $nomFile, $html);
        }
        else {
            echo "Une erreur c'est produite";
        }
    }
}
echo $html;  // pour mise à jour éventuelle côté client

Par contre voici le code html généré avec une image importée :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<p><img title="nidmontbonnot.jpg" src="images/image-6514594d2e2eb.jpeg" alt="" width="1920" height="1080"><img title="WhatsApp Image 2022-09-08 at 15.51.52.jpeg" src="blob:http://dev.dvp.fr/a31f3eed-6bfa-44d9-b316-4026953fdd36" alt="" width="395" height="408"><img title="nidfrelonsstmarcellin.jpeg" src="blob:http://dev.dvp.fr/7ef15ccd-544a-4625-a551-bfde5fdca8df" alt="" width="459" height="612"><img title="WhatsApp Image 2022-09-08 at 15.54.43.jpeg" src="blob:http://dev.dvp.fr/287da74a-6886-432f-9854-ab46324c42f4" alt="" width="635" height="744"><img title="stop-frelon.png" src="blob:http://dev.dvp.fr/39f6a642-f3f7-41fe-8abf-6781084901db" alt="" width="430" height="379"></p>

On voit qu'il y a 5 images dont 4 (à éliminer) qui comportent chacune la chaîne de caractères blob:http dans leur attribut src. Comment faire, STP ?

PS : je suis pas un pro du PHP, mais pour moi, ton code est très correct !

**NoSmoking** · 28/09/2023, 09h19

Par contre voici le code html généré avec une image importée :

je pense que j'ai mal interprété ton besoin, ce que tu montres c'est le code contenu dans l’éditeur juste après insertion des images et c'est effectivement ce que fait tinyMCE, il store en interne les images sous forme de blob.

La solution proposée était de « corriger » ce code au moment de l'envoi sur le serveur et ce en une seule fois.

Si tu veux activer le remplacement « à la volée » des attributs src des images il te faut ajouter l'option images_upload_url dans l'init en indiquant le fichier de traitement

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
tinymce.init({
  selector: 'textarea#editor',
  // ... les options  
  images_upload_url: "tinymce-process-file.php",    // le fichier d'upload
  // ... la suite

C'est ce fichier tinymce-process-file.php qui va, et doit, se charger de renvoyer la scr sous forme d'un objet JSON {"location": "chemin/nom-fichier.ext"} après vérification et enregistrement sur le serveur, tinyMCE se chargera de remplacer l'attribut src par le chemin retourné.

Exemple minimaliste de fichier de récupération de l'adresse du fichier sur le serveur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
$imageDirectory = "tinymce/images/";
$acceptExt = explode(",", "bmp,gif,jfi,jfif,jif,jpe,jpeg,jpg,png,svg,webp");
reset($_FILES);
$file = current($_FILES);
if (is_uploaded_file($file["tmp_name"])) {
  // test extension
  if (!in_array(strtolower(pathinfo($file['name'], PATHINFO_EXTENSION)), $acceptExt)) {
    header("HTTP/1.1 400 Invalid extension.");
    return;
  }
  // Déplace le fichier téléchargé
  $nomFile = $imageDirectory . $file["name"];
  move_uploaded_file($file['tmp_name'], $nomFile);
  // réponse au format JSON
  echo json_encode(["location" => $nomFile]);
}

Tu trouvera toutes ces infos dans la page Image & file options.

Attention toutefois, entre autres, à la gestion des images mortes, images ajoutées puis supprimées, le traitement global, 1st version, limitant celles-ci.

**laurentSc** · 28/09/2023, 18h36

Bonjour,

La solution proposée était de « corriger » ce code au moment de l'envoi sur le serveur et ce en une seule fois.

Où ça la solution proposée ?

Ceci est une approche et il va sans dire qu'il faut un peu plus de verrou car il y a pas mal d’écueils en vu.

Pas compris...

Attention toutefois, entre autres, à la gestion des images mortes, images ajoutées puis supprimées, le traitement global, 1st version, limitant celles-ci.

Quand je fais mes tests, avant de faire un import, je commence par vider le répertoire dans lequel sont stockées les images (qui s'appelle "images", sous-répertoire du répertoire contenant l'éditeur)
Avant de cliquer sur bouton "envoyer", il y avait dans ce répertoire le fichier blobid1695909706742.png. Après "envoyer", ce qui lance l'exécution de l'action du formulaire (donnée au post #8), on a un deuxième fichier image-65158783aca5d.png dont le contenu est identique au premier (c'est l'image importée)

Mon besoin est d'importer une seule fois l'image.

Voici mon init de TinyMCE :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 <script>
        tinymce.init({
            selector: 'textarea#file-picker',
            statusbar: false,
            language_url: "fr_FR/langs/fr_FR.js",   // ici le chemin d'accès au fichier de traduction
            language : "fr_FR",
            plugins: 'image code',
            toolbar: 'undo redo | link image | code',
 
            /* enable title field in the Image dialog*/
            image_title: true,
            /* enable automatic uploads of images represented by blob or data URIs*/
            automatic_uploads: true,
            /*
            URL of our upload handler (for more details check: https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_url)
            images_upload_url: 'postAcceptor.php',
            here we add custom filepicker only to Image dialog
            */
            images_upload_url: "tinymce-process-file.php",    // le fichier d'upload
            file_picker_types: 'image',
            /* and here's our custom image picker*/
            file_picker_callback: function (cb, value, meta) {
                var input = document.createElement('input');
                input.setAttribute('type', 'file');
                input.setAttribute('accept', 'image/*');
 
                /*
                Note: In modern browsers input[type="file"] is functional without
                even adding it to the DOM, but that might not be the case in some older
                or quirky browsers like IE, so you might want to add it to the DOM
                just in case, and visually hide it. And do not forget do remove it
                once you do not need it anymore.
                */
 
                input.onchange = function () {
                    var file = this.files[0];//alert('file:'.file);
 
                    var reader = new FileReader();
                    reader.onload = function () {
                        /*
                        Note: Now we need to register the blob in TinyMCEs image blob
                        registry. In the next release this part hopefully won't be
                        necessary, as we are looking to handle it internally.*/
 
                        var id = 'blobid' + (new Date()).getTime();
                        var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
                        var base64 = reader.result.split(',')[1];
                        var blobInfo = blobCache.create(id, file, base64);
                        blobCache.add(blobInfo);
 
                        /* call the callback and populate the Title field with the file name */
                        cb(blobInfo.blobUri(), { title: file.name });
                    };
                    reader.readAsDataURL(file);
                };
 
                input.click();
            },
            content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
        });
    </script>

Le fichier tinymce-process-file.php est exactement celui du post #9.

**NoSmoking** · 29/09/2023, 10h01

Où ça la solution proposée ?

Celle propose au post #6

Pas compris...

Comme tu vas écrire/enregistrer sur le serveur, fichier/BdD, il faut mettre en place la sécurité qui va bien, ne jamais faire, confiance !

Quand je fais mes tests, avant de faire un import, je commence par vider le répertoire dans lequel sont stockées les images

Si tu as deux utilisateurs alors cela risque de devenir la pagaille !

Si tu dois renommer les fichiers il faut le faire lors de la mise à jour du HTML par tinyMCE et non dans le fichier de traitement qui doit se concentrer sur la gestion et mise en base.

Avant de cliquer sur bouton "envoyer", il y avait dans ce répertoire le fichier blobid1695909706742.png.

Ça c'est tinymce-process-file.php qui s'en est chargé, le code HTML de l'éditeur a du le prendre en compte sauf erreur.

Après "envoyer", ce qui lance l'exécution de l'action du formulaire (donnée au post #8), on a un deuxième fichier image-65158783aca5d.png dont le contenu est identique au premier (c'est l'image importée)

La fonction de traitement.php ne devrait pas modifier les données reçues, il ne devrait plus y avoir de src du type "data:image/png;base64,iVBORw0KGgoAAAAN...=". Son rôle est de dispatcher les données correctement sur le serveur.

PS : j'ai fait une simulation et je ne rencontre pas ce problème de duplication !?!

**laurentSc** · 29/09/2023, 12h00

Pour être sûr, j'ai refait le code (la partie traitement.php) et j'ai encore 2 uploads, ce qui ne m'étonne pas car move_uploaded_file($file['tmp_name'], $nomFile); dans tinymce-process-file.php et $size = file_put_contents($nomFile, $decoded); dans traitement.php et si je commente cette ligne, j'ai bien plus qu'un seul upload.

Question : comment récupérer le nom du fichier tel qu'il est sur le disque dur et le transmettre à tinymce-process-file.php ?

Si tu as deux utilisateurs alors cela risque de devenir la pagaille !

L'essai, c'est que en phase de test (pour moi) et 2 utilisateurs, ça risque pas car ça sera dans la partie admin de ce site : https://pasdpanique.fr/ que j'ai écrit avec la très importante aide de rawsrc (il a quitté son rôle de modo dans DVP en 2020, mais reste très actif et il est d'un niveau impressionnant en PHP). Et l'admin ne concernera qu'une seule personne (zone admin protégée par un mot de passe (bouton "connexion").

Mon idée, après avoir uploadé l'image est de mettre en bdd son URL pour pouvoir l'afficher ultérieurement. (L'admin devant servir à écrire des actualités (que l'on peut déjà afficher à partir du pied de page : https://pasdpanique.fr/actualites)

**NoSmoking** · 29/09/2023, 17h24

...ce qui ne m'étonne pas car move_uploaded_file($file['tmp_name'], $nomFile); dans tinymce-process-file.php et $size = file_put_contents($nomFile, $decoded); dans traitement.php et si je commente cette ligne, j'ai bien plus qu'un seul upload.

moi ce qui m'étonne c'est que tu ne devrais pas passer dans la condition pour arriver à ce code, qui se trouve dans le fichier tinymce-traitement.php appelé au clic sur le bouton « envoyer »

Question : comment récupérer le nom du fichier tel qu'il est sur le disque dur et le transmettre à tinymce-process-file.php ?

Il te suffit de mettre le nom du fichier lors de la création du blobInfo, voir ligne 10 pour utilisation ligne 13.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
file_picker_callback: function(cb, value, meta) {
    var input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*');
    input.onchange = function() {
        var file = this.files[0];
        var reader = new FileReader();
        reader.onload = function() {
            // Supprimer - var id = 'blobid' + (new Date()).getTime();
            var id = file.name;          // mettre ici le nom du fichier
            var blobCache = tinymce.activeEditor.editorUpload.blobCache;
            var base64 = reader.result.split(',')[1];
            var blobInfo = blobCache.create(id, file, base64);
            blobCache.add(blobInfo);
            /* call the callback and populate the Title field with the file name */
            cb(blobInfo.blobUri(), {
                title: file.name
            });
        };
        reader.readAsDataURL(file);
    };
    input.click();
},

**laurentSc** · 29/09/2023, 18h04

moi ce qui m'étonne c'est que tu ne devrais pas passer dans la condition pour arriver à ce code, qui se trouve dans le fichier tinymce-traitement.php appelé au clic sur le bouton « envoyer »

OK, pas normal et ce qui me gêne, c'est l'impossibilité de déboguer car si je mets un echo ou un var_dump dans tinymce-process-file.php, y a rien qui s'affiche

Il te suffit de mettre le nom du fichier lors de la création du blobInfo, voir ligne 10 pour utilisation ligne 13.

La solution que tu proposes est simple, mais encore petit problème (dont j'ai pas trouvé la solution malgré plusieurs essais) : l'extension est dupliquée. Exemple de nom de fichier dans le répertoire de stockage sur le serveur (local) : stop-frelon.png.png

**NoSmoking** · 29/09/2023, 18h19

Envoyé par laurentSc

OK, pas normal et ce qui me gêne, c'est l'impossibilité de déboguer car si je mets un echo ou un var_dump dans tinymce-process-file.php, y a rien qui s'affiche

Regarde dans l'onglet, tu clic sur le fichier appelé et sur l'onglet Réponse.

La solution que tu proposes est simple, mais encore petit problème (dont j'ai pas trouvé la solution malgré plusieurs essais) : l'extension est dupliquée. Exemple de nom de fichier dans le répertoire de stockage sur le serveur (local) : stop-frelon.png.png

Il te suffit de supprimer l'extension avec par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var id = file.name.split(".")[0];

**laurentSc** · 29/09/2023, 18h35

pour éliminer le doublon de l'extension par contre l'onglet Réponse pour déboguer, j'ai pas : Nom : tinymce.png
Affichages : 75
Taille : 48,3 Ko

où est-il ?

**NoSmoking** · 29/09/2023, 18h49

il manque un morceau à ma réponse, donc je reprend
Dans la console du navigateur, touche F12, tu cliques sur le fichier appelé et ensuite sur l'onglet Réponse.

**laurentSc** · 29/09/2023, 19h04

Je vois pas cet onglet réponse dans la console...

Nom : tinymce.png
Affichages : 69
Taille : 362,3 Ko

**NoSmoking** · 29/09/2023, 19h16

il manque encore un bout à ma réponse !!!!!!!
Je re-reprend :
Dans la console du navigateur, touche F12, tu vas sur l'onglet Réseau, tu cliques sur le fichier, le dernier appelé et ensuite tu vas sur l'onglet Réponse.

cette fois cela a l'air bon