Cómo subir archivos a Amazon S3 mediante Javascript

Amazon Simple Storage Service (Amazon S3) es un servicio web bastante popular que te brinda almacenamiento altamente escalable, duradero y seguro. Por regla general, casi todo solemos utilizar soluciones del lado del servidor para subir archivos al servidor de Amazon S3. También existen AWS SDK para Javascript para cargar archivos al servidor de Amazon S3 desde el lado del cliente. Y es que la subida de ficheros desde el lado del cliente es mucho más rápida que mediante el lado del servidor y casi la mejor solución para archivos pesados.

En este tutorial te mostraremos a subir archivos a Amazon S3 mediante Javascript. Esta será la estructura que utilizaremos para ejemplificar el tutorial:

  • index.php
  • aws_config.js
  • s3_upload.js

Créate una cuenta en Amazon S3

Antes que nada, lo primero que tienes que hacer es crearte una cuenta en Amazon S3 y obtener tu bucket name y las access keys que después utilizaremos para subir archivos.

Configura la información de S3

Una vez tenemos la información de nuestra cuenta de Amazon S3, tendremos que definir todos sus datos en nuestro archivo aws_config.js, es decir, tendremos que agregar la access key y la secret key.

AWS.config.update({
accessKeyId : 'ACCESS_KEY',
secretAccessKey : 'SECRET_KEY'
});
AWS.config.region = 'TU REGION';

Incluye jQuery y AWS

En el fichero index.php tenemos que incluir el SDK de Amazon para gestionar la subida de ficheros al servidor de S3 con Javascript. También tenemos que incluir aws_config.js y s3_upload.js para otras funciones relacionadas con lo mismo.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.1.24.min.js"></script>
<script src="aws_config.js"></script>
<script src="s3_upload.js"></script>

Crea el formulario de subida de ficheros

En el fichero index.php, crea el formulario HTML para que el usuario pueda escoger el fichero de su equipo y subirlo al servidor mediante un botón.

<form id="uploadForm" method='post' enctype="multipart/form-data">
<h3>Upload File</h3><br/>
<input type='file' name="upFile" id="upFile" required="" />
<br>
<input type='submit' value='Upload'/>
</form>

Gestionar la subida de ficheros a Amazon S3 con Javascript

Por último, en el fichero s3_upload.js gestionamos la funcionalidad de subir ficheros creando un objeto AWS S3 con BUCKET NAME y después subimos los ficheros mediante el método upload de AWS.

$( document ).ready(function() {
$("#uploadForm").submit(function() {
var bucket = new AWS.S3({params: {Bucket: 'YOUR BUCKET_NAME'}});
var uploadFiles = $('#upFile')[0];
var upFile = uploadFiles.files[0];
if (upFile) {
var uploadParams = {Key: upFile.name, ContentType: upFile.type, Body: upFile};
bucket.upload(uploadParams).on('httpUploadProgress', function(evt) {
}).send(function(err, data) {
$('#upFile').val(null);
$("#showMessage").show();
});
}
return false;
});
});

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP