Forum d'entraide PHPFrance

Bonjour à tous, ça va faire maintenant 3 jours que je galère sur une bêtise.
En gros je redimensionne une image que l'utilisateur met dans un <input> type:file. Une fois l'image redimensionnée, je l'affiche bêtement comme une image vers "resizeImageOk". Puis je transforme l'image en canvas puis en Blob et j'essaie de l'envoyer.

C'est la première fois que je joue avec les blob en php et de les envoyer sur mon controller.

1) Voici mon image sur ma template:

<img class="resize-image-ok" id="resizeImageOk" src="#" style="visibility:hidden">

2)Voici mon image que je transforme en canvas:

var imageOk = document.getElementById('resizeImageOk');
            var imageOkSrc = imageOk.getAttribute('src');

            var canvas = document.createElement("canvas");
            canvas.width = imageOk.width;
            canvas.height = imageOk.height;
            canvas.getContext("2d").drawImage(imageOk, 0, 0);

3)voici mon canvas que je transforme en Blob:

var dataURL = canvas.toDataURL();
            var blob = dataURItoBlob(dataURL);

            blob.lastModifiedDate = new Date();
            blob.name = "joe.png";

4)Ma fonction: dataURItoBlob

// convert base64/URLEncoded data component to raw binary data held in a string
            var byteString;
            if (dataURI.split(',')[0].indexOf('base64') >= 0)
                byteString = atob(dataURI.split(',')[1]);
            else
                byteString = unescape(dataURI.split(',')[1]);

            // separate out the mime component
            var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

            // write the bytes of the string to a typed array
            var ia = new Uint8Array(byteString.length);

            for (var i = 0; i < byteString.length; i++) {
                ia[i] = byteString.charCodeAt(i);
            }

            return new Blob([ia], {type:mimeString});

5) Et pour finir le code pour envoyer vers mon controller

var form = document.getElementById('editProfilForm');
            form.onsubmit = function() {
                var formData = new FormData(form);
                formData.append('imageResize', blob);

                var xhr = new XMLHttpRequest();
                xhr.open('POST', form.getAttribute('action'), true);
                xhr.upload(blob);
                xhr.send(formData);
            }

xhr.upload(blob);

C'est juste un dernier ajout pour un test, mais sans succès :/

Dans un premier regarde ce qui passe dans la requête ajax dans la console de ton navigateur, ça te permettra de voir si tu as une erreur JS et surtout ce qui est envoyé comme requête HTTP. Tu as bien le contenu qui est envoyé en POST ? Si c'est le cas tu obtiens quoi dans Symfony lorsque tu récupères le fichier dans le controller ?

Du coté controller j'ai fait ceci pour voir si j'ai mon blob.

$imageResize = $request->files->count();
                var_dump($imageResize);exit;

Mais non, j'ai seulement 1 fichier, le fichier que l'utilisateur à envoyé avec le input de type file. Normalement je devrai en avoir 2.