Le 16/01/2017

Uploader une image via une API REST avec Symfony3 et Javascript

Aujourd'hui j'ai voulu uploader une image via une API REST, via les méthodes PUT et POST, j'ai eu quelques difficultés à le faire alors je partage comment j'ai fais ca avec Symfony3. Je pense que ca servira surement à d'autres.

Envoyer une image via une API REST en PUT ou en POST...les principes

En POST, vous allez pouvoir récupérer le fichier si vous envoyez bien en multipart-form-data et ca c'est plutôt pratique mais je vais pas utiliser ca dans mon cas. La deuxiéme option pour transférer une image sans envoyer de fichier directement c'est donc de l'encoder en base64 avant l'envoi puis de la récupérer apres l'envoi pour venir la stocker en BDD (ou la reconvertir et la sauvegarder éventuellement). De cette maniére je vais pouvoir uploader mes images en PUT également....et vu que je tape sur une API REST c'est plutôt important de savoir le faire car les éditions de mes objets vont se faire en PUT.

Récupérer l'image en base64 et mettre à jour la miniature

J'ai mis une zone en dessous de mon champs pour prévisualiser ce que je vais uploader :

 <img id="logo-demo" src="" />
 
A chaque changement de mon input type="file", je vais appeler la méthode previewThumbnail qui va mettre à jour l'attribut src de mon image de prévisualisation :

previewThumbnail: function(event){
    var input = event.target;

    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            $('#logo-demo').attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    }
}

Sauvegarder mon image via PUT de l'API REST

Dans le code ci dessus, je lit l'image selectionné dans l'input et je met à jour l'attribut src avec le résultat en base64. L'image va donc ensuite s'afficher à chaque selection d'une image. Ensuite à chaque click sur le bouton "save" de mon formulaire, avant d'enregistrer mon formulaire, je remet à jour mon Model en récupérant l'attribut src comme ceci :

 saveEnterprise: function(event) {
            event.preventDefault();
            this.mymodel.image = $('#logo-demo').attr('src');
            axios.put('/api/mymodel/' + this.mymodel.id, this.mymodel)
                .then(function (response) {

                })
                .catch(function (error) {
                    alert(error);
                });
        },
        
J'utilise ensuite axios pour envoyer ma requete en PUT à mon api REST. Voilà vous avez les principes, à vous d'adapter à votre code maintenant :) Si vous avez de meilleures solutions ca sera avec plaisir que je vous écouterai..comme vous le savez je suis encore débutant avec Symfony.
Commentaires sur cet article
Pas encore de commentaires pour cet article. Soyez le premier !

Vous devez être connecté pour commenter un article.