¡HOLA! SOY DANIEL RUIZ

Soy desarrollador, maquetador, programador y technology learner en HTML, Javascript, PHP, Java y .NET.

22 diciembre, 2013

Amazon S3, subida de ficheros simple y segura

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.

  1. 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!)
  2. 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>
  3. 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
  4. 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;
    
    
  5. 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!)
    S3 Management Console
  6. 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!

Un saludo!

EDIT: Para quien no le guste “copiar y pegar”… aquí tenéis el código del post

Una respuesta a “Amazon S3, subida de ficheros simple y segura”

  1. harold dice:

    Hola Daniel gracias por tu aporte, descargue el script pero no me funciona me puedes colaborar por favor muchas gracias

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *