Hola amigos!
Hoy vengo a ayudar a aquel que quiera implementar un sistema de subida de ficheros a Amazon S3 con el método drag&drop de HTML5.
- Para implementar la subida drag&drop de HTML5 usaremos la librería jquery.filedrop.js. Descargarla y poner en vuestra carpeta js… (así como jquery!)
- El bloque de html que contenga el control de subida de ficheros podrá ser algo asi:
<div class="upload" id="uploader">
<h3 class="icono-nube-upload-grande">Subiendo ficheros...</h3>
<ul></ul>
<div>
<span>Arrastra y suelta </span>
</div>
</div>
- Un poquito de CSS:
.upload{
background-color: transparent;
width: 100%;
-webkit-box-sizing: border-box;
padding: 1%;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 145px;
border-color: #cccccc;
border-width: 7px;
-moz-border-radius: 17px;
-webkit-border-radius: 17px;
border-radius: 17px;
border-style: dashed;
display: inline-block;
position: relative;
}
h3{
margin: 0;
padding: 0;
}
.over{
border-color: #333333;
}
El resultado… (algo así como…)
Subiendo ficheros…
Arrastra y suelta
- 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!
Alguna duda? Dejad en los comentarios!!! 
Espero que os sea de ayuda!
Toma el control de tus finanzas
¿A dónde va realmente tu dinero? Descubre dónde gastas, organiza tus ingresos y alcanza la libertad financiera con nuestra plantilla de Notion.
- ✅ Seguimiento completo de ingresos y gastos
- ✅ Gráficos dinámicos y análisis intuitivos
- ✅ Panel centralizado con toda tu información
- ✅ Acceso de por vida + actualizaciones gratuitas
Ver plantilla
Por $14.99 • Acceso inmediato • Manual incluido
Un saludo!
EDIT: Para quien no le guste «copiar y pegar»… aquí tenéis el código del post
Hola Daniel gracias por tu aporte, descargue el script pero no me funciona me puedes colaborar por favor muchas gracias