Tag : sonatamedia

spacejump

Upload drag & drop via DropZoneJS + Symfony2 sur le CLOUD Amazon S3

Glissez-déposez dans le CLOUD

Si ça c’est pas la classe !

Hop un drag & drop depuis l’OS d’un paquet d’images dans une zone de la page qui fera l’upload direct dans le CLOUD Amazon S3 !
Ho et puis en plus, avec une belle présentation génération de thumb dynamique pour chaque images et une barre de progression pour que notre utilisateur s’impatiente pas trop !
Le tout avec une gestion multi-upload, des events et de la customisation à gogo! Que demande le peuple ?

Aujourd’hui on va voir comment réaliser ça avec DropZone, une librairie javascript, et notre merveilleux framework Symfony 2 avec le bundle SonataMedia.

 

Javascript sans les mains

On aime le javascript, mais pas besoin d’en faire ici ! En effet DropZone nous facilite la tâche.

Alors, commençons par le commencement :  Télécharger DropZone et mettez les fichiers dans votre « /Resources/public/js  » et  « /Resources/public/css »du bundle de votre choix !

Détails qui a son importance, DropZone n’a pas besoin de jQuery !

Notre template twig va s’appeller « dropzone.html.twig »  et va ressembler à ça :

Alors on a fait quoi ?

– On a étendu notre template layout de base. Basique me direz vous ? Je suis d’accord mais je fait juste un copier coller ici  !

– Ensuite,  on a appelé notre block stylesheet pour le css de base de dropzone en utilisant Assetic avec le bon gros filter des familles « cssrewrite ».

– Le block body sur lequel on va mettre un formulaire de base en Symfony2. Point important :  la class « dropzone » et le action en « app.request.uri » qui sont primordiales au bon fonctionnement de DropZone !

– Enfin notre block javascript avec le script DropZone. Le tout forcement via Assetic et un bon gros filter « yui_js » des familles ! Voir comment faire fonctionner cet merveille. OUI vous en avez besoin !

Et mon petit script d’instanciation hein ? Mon petit javascript il est ou ?

Hé bien nulle part ! Pas besoin la petite classe « dropzone » sur la balise form déclenche le script et met en place toute la machine ! Sans les mains je vous ai dit.

Bon si vous voulez vraiment faire du  javascript sachez que c’est possible, notamment si vous voulez créer une zone de drop à la volée ou l’intégrer à un formulaire déjà existant etc etc :  Rendez-vous sur la page de dropzone dont j’ai donner le lien plus haut.

 

Media management bundle on steroid !

Hey vous connaissez SonataMediaBundle ? C’est une des solutions de gestion de médias que j’utilise le plus, tant pour sa puissance que pour ces possibilitées !
Seul vrai problème : il a des dépendances, dont le générateur d’administration SonataAdminBundle. Il faut le savoir avant de vous lancer dedans !
Mais si vous avez prévu un magnifique backoffice dans votre appli ou si vous voulez tout simplement le découvrir, je vous le recommande chaudement ! Parole de dev : Ça vaut vraiment le coup !

De toute façon la suite de l’article est basée sur Sonata Media. On installe tout ça et on revient.

Une fois que tout fonctionne on s’attaque au controller qui devrait ressembler à ça :

Ici on a créée un formulaire vide. Au post et après validation on as instancié un media auquel on rentre les infos nécessaire, dont le fichier image.
Ensuite on utilise le service de management des médias pour l’enregistrer. Enfin on envoie notre formulaire au twig. EASY !

En l’état ça marche !! WOOOT ! Sauf que sans toucher au config de base du bundle de média, votre image sera bien uploadée, mais sur le disque de votre serveur. C’est cool mais sans plus !

Une envie de faire un tour dans les nuages ?

 

 Il est temps de parler directement au CLOUD

tim-and-eric-mind-blown

 

Je suis tomber sur le service Amazon S3 un peu par hasard comme souvent en cliquant partout quand je voyais un truc intéressant.Et je dois dire que ça ma tout de suite séduit ! Tous les avantages pro mais aussi et surtout le niveau gratuit d’AWS qui comprend :  5 Go de stockage, 20 000 requêtes GET et 2 000 requêtes PUT disponible  sans frais d’installation sans abonnement. Bref, c’est totalement un compte de test ! Et on aime ça tester des choses :)

Par contre, je vous préviens, en plein milieu de l’inscription il vous demandent votre numéro de carte bleu les coquins ! Hé oui le compte à beau être gratuit et n’empêche que vous utiliser leur serveur  dans le cloud avec des services hyper pro (console web, api et tout ce qui va avec). Si vous dépassez les limitations ils vous factureront. Ceci dit pas de panique,  avec le calculateur de coût d’Amazon vous pouvez vous donner un ordre d’idée des coûts.

Mais peut importe le prix finalement, ça ne vous concerne pas. Faite vos tests avec, amusez vous un coup et supprimés simplement les images de votre espace, ou mettez les simplement en privé. Rappelez vous que vous ne payez que ce que vous consommez !

Bref vous êtes inscrit ? Très bien on peut passer à la suite.

– Aller dans la console. Cliquer sur « Identity and Access Management » puis « Users ». Vous l’aurez compris on va créer un utilisateur. Il pourra taper ensuite sur votre espace via des clefs privées.

– Cliquer sur « Create new users » rentrer un nom d’utilisateur et pensé bien à cocher la case « Generate an access key for each user ». Une fois votre utilisateur crée ils vous filent deux clef : « Access Key ID » et « Secret Access Key » copier/coller dans un coin on en aura bientôt besoin.

– Retourner à la console, cliquer sur « S3″, puis cliquer sur « Create Bucket ».

bucket

– Mettez un nom a votre « seau » en Français et choisisser une région. L’Ireland c’est le plus prés, alors c’est parti.

– Une fois dans l’interface, cliquer sur le nom de votre Bucket, cliquer sur « Properties » en haut à droite, puis sur « Permissions » dans le menu qui apparaît. Cliquer sur « Add more permissions » puis donner l’accès à votre utilisateur créé juste avant comme ci-dessous :

permissions

 

– Dernière étape cliqué sur « Add bucket policy ». Par défaut, personne ne peut faire de requêtes sur votre bucket, pas même vous ! Il faut donner l’autorisation à internet de consulter vos images. Pour ce faire, copier/coller ce bout de code dans la fenêtre qui apparaît :

Pensez à remplacer « examplebucket » par votre nom de bucket. Ce petit bout de code permet à n’importe qui (avec l’adresse) de consulter les images que vous aurez mit sur votre bucket.

Vous pouvez le changer à volonté et à tout moment, consulter la liste officiel des bucket policies d’Amazon pour plus d’info. Sachez juste que vous pouvez tout fermer, tout fermer sauf pour une IP, interdire le hot linking. Bref vous avez le contrôle.

 

Retour à notre code : on va commencer par installer le SDK pour PHP d’Amazon. Dans le composer.json :

Un coup de composer

Etape finale direction le fichier config : app/config/config.yml et mettez les directives suivantes pour sonata media.

Et voila !

Re-Uploadé donc une image et tout se fera automatiquement !
Félicitation, vous êtes dans le CLOUD, vous pouvez laisser exploser votre joie.

14038303339

 

 

Epilogue

Je n’ai pas insisté dessus du tout, mais coté front, vous pouvez tous faire. Ecouter des événements, changer l’affichage de la zone de drop mais aussi les petites thumbs générées automatiquement jusqu’à la barre de progression. Aller voir sur la page officiel, tout y est.
Si vous ne voulez pas de SonataMedia, la même solution est possible si vous gérez l’enregistrement des médias vous même, mais il vous faudra utiliser également le SDK à la main.
Enfin sachez que si vous détestez Amazon, Google à également des solutions similaires.

Categories: CLOUD, PHP, Symfony2