Comienza la magia! El script PHP que nos devolverá la URL de Amazon prefirmada y lista para hacer el PUT del fichero; deberéis tener a mano un bucket, la clave privada y pública de Amazon (AWSAccessKeyId y AWSSecretKey)… Si tenéis dudas sobre dónde se obtienen estos datos, preguntadme!
//el nombre del bucket de Amazon al que quieres subir tus ficheros
$bucket = 'mrvision22';
//tiempo en el que va a expirar
$expires = time() + 10000;
//Este fichero lo podrá leer cualquiera (estos permisos se pueden modificar)
$amzHeaders= "x-amz-acl:public-read";
//El nombre del fichero que vamos a subir
$filename = $_GET["filename"];
$mimeType = "";
//esta clave la tenemos que obtener de Amazon
$amazonSecretKey = "xxxx";
//Así como esta... es como la clave pública en una comunicación cifrada con certificado
$AWSAccessKeyId = "xxxxx";
//Se compone la cadena de la petición PUT al REST API de S3
$stringToSign = "PUT\n\n{$mimeType}\n{$expires}\n{$amzHeaders}\n/{$bucket}/$filename";
//Y se firma
$hash = base64_encode(hash_hmac('sha1', $stringToSign, $amazonSecretKey, true));
$sig = urlencode($hash);
$url = urlencode(
"https://{$bucket}.s3.amazonaws.com/{$filename}?AWSAccessKeyId={$AWSAccessKeyId}&Expires={$expires}&Signature={$sig}"
);
echo $url;
Un breve inciso antes de proseguir… el Bucket de Amazon debe tener configurado el CORS (Cross-Origin Resource Sharing) para permitir el cross-scripting seguro: para el ejemplo permitimos cualquier conexión. Pensad que para que cualquier conexión de subida de ficheros es necesario las claves (y la privada no se la debéis de dar a nadie!)
Y el javascript! Cargamos en nuestro <head> tanto jQuery como jquery.filedrop.js
(function () {
"use strict";
jQuery(document).ready(function ($) {
$('#uploader').filedrop({
url: '',
withCredentials: false,
requestType : 'PUT',
headers: {
'x-amz-acl': 'public-read',
'Access-Control-Allow-Origin': '*'
},
maxfiles: 25,
maxfilesize: 20,
beforeSend: function (file, i, done) {
$('#uploader ul').append('<li data-index="' + file.name + '">Subiendo <span>' + file.name + '</span></li>');
var that = this;
$.get("script.php", {filename: file.name }, function (data) {
that.url = decodeURIComponent(data);
done();
});
},
uploadFinished: function (i, file, response, time) {
// response is the data you got back from server in JSON format.
$('#uploader ul').find('li[data-index="' + file.name + '"]').css("color", "green");
},
globalProgressUpdated: function (progress) {
// progress for all the files uploaded on the current instance (percentage)
$('#uploader h3').html(progress + "%");
if (progress === 100)
$('#uploader h3').empty();
},
dragOver: function () {
$(this).addClass('over');
},
dragLeave: function () {
$(this).removeClass('over');
},
drop: function () {
$(this).removeClass('over');
}
});
});
})();
Y… listo! Ya tenemos nuestro drag&drop uploader teniendo como repositorio de los ficheros Amazon S3… Cargar vuestro index.html y arrastrar un fichero de una de vuestras carpetas de vuestro PC a esta región… voila! Id a vuestra cuenta de Amazon S3 y allí estará vuestro fichero!
Hola Daniel gracias por tu aporte, descargue el script pero no me funciona me puedes colaborar por favor muchas gracias