Vous connaissez peut être Cloudinary qui propose une api pour manager des photos dans le cloud. Cette api permet de réaliser des uploads d'image de différent format en directement en Jquery. Vous avez en plus accès dans la version gratuite à 500 mo d'images une api pour faire des transformations d'images.Dans ce tutoriel je vous propose de vous montrer comment utiliser Cloudinary pour réaliser un upload en Jquery.
Vous devez pour cela avoir un compte Cloudinary. Vous pouvez en créez un ici : https://cloudinary.com/users/register/free
L'utilisation de Cloudinary pour réaliser un upload nécessite un code HTML/Javascript et un code coté serveur. Dans mon tutorial l'implémentation coté serveur est une imlémentation Java.
Code HTML et Javascript
Vous devez commencer par télecharger le sdk Jquery ici : https://github.com/cloudinary/cloudinary_jsLa documentation Cloudinary poust réaliser un upload en Jquery est ici : http://cloudinary.com/blog/direct_image_uploads_from_the_browser_to_the_cloud_with_jquery
En lisant cette documentation on arrive à ce HTML inclut dans une jsp :
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%><!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> <script src="../Scripts/vendor/jquery-1.9.1.min.js"></script> <script src="../Scripts/vendor/cloudinary/jquery.ui.widget.js"></script> <script src="../Scripts/vendor/cloudinary/jquery.iframe-transport.js"></script> <script src="../Scripts/vendor/cloudinary/jquery.fileupload.js"></script> <script src="../Scripts/vendor/cloudinary/jquery.cloudinary.js"></script> </head> <body> <script type="text/javascript"> $.cloudinary.config({"api_key":"YOUR_API_KEY","cloud_name":"YOUR_CLOUD_NAME"}); </script> <input name="file" type="file" id="uploadinput" class="cloudinary-fileupload" data-cloudinary-field="image_upload" data-form-data="" ></input> <script> var data = { "timestamp": <%= timestamp %>, "callback": "http://YOUR_DOMAIN/cloudinary_cors.html", "signature": "<%= expected_signature %>", "api_key": "YOUR API KEY" }; $('#uploadinput').attr('data-form-data', JSON.stringify(data)); </script> </body> </html>
Modifier ce script pour renseigner votre API KEY et votre cloud_name. Déployez le fichier cloudinary_cors.html et renseignez le bon chemin vers ce fichier.
<%= timestamp %> et <%= expected_signature %>" sont 2 variables calculées cotées serveur en java, nous allons voir comment les calcylez par la suite.CodeJava
Comme vous avez vu dans la documentation , il est nécessaire de signer les paramètres à envoyer dans la requête d'upload et d'échanger cette signature avec le serveur cloudinary. Cette signature doit être effectuée coté serveur car elle nécessite l'utilisation de la clé secrète.
Récupérer le SDK ici, et incluez le dans votre projet.
Le code coté java se limite à :
<%@ page import="java.util.Map" %>
<%@ page import="java.util.HashMap" %>
<%@ page import="java.sql.Timestamp" %>
<%@ page import="com.cloudinary.Cloudinary" %>
<%
String timestamp=(new Long(System.currentTimeMillis() / 1000L)).toString();
Cloudinary cloudinary = new Cloudinary("cloudinary://CLOUDINARY_URL");
Map<String, Object> params = new HashMap<String, Object>();
Map options = Cloudinary.emptyMap();
boolean returnError = Cloudinary.asBoolean(options.get("return_error"), false);
String apiKey = Cloudinary.asString(options.get("api_key"), cloudinary.getStringConfig("api_key"));
if (apiKey == null)
throw new IllegalArgumentException("Must supply api_key");
String apiSecret = Cloudinary.asString(options.get("api_secret"), cloudinary.getStringConfig("api_secret"));
if (apiSecret == null)
throw new IllegalArgumentException("Must supply api_secret");
params.put("callback", "http://www.mcbjam.com/Scripts/vendor/cloudinary/html/cloudinary_cors.html");
params.put("timestamp", timestamp);
String expected_signature = cloudinary.apiSignRequest(params, apiSecret);%>Modifiez le script pour indiquez votre CLOUDINARY_URL obtenu dans le dashboard de Cloudinary.
Et voilà,ce la fonctionne. J'utilise ce code ici http://paint.mcbjam.com/
Par quoi doit être remplacé callback ?
RépondreSupprimer