Subir archivos de imagen a Amazon S3 con Vuejs 2 y Amplify

En prácticamente todas las aplicaciones web y móvil es necesario el trabajo con imágenes, ya sea para publicar un post o para crear una galería de fotos. En esta entrada vamos a aprender a subir archivos de imagen a Amazon S3 con Vuejs 2 y Amplify. Nuestro caso concretamente va a cubrir la subida de un archivo base64 haciendo uso de Vuetify Image Input.

La idea es muy sencilla, a través de un formulario construido con Vuejs 2 y Vuetify vamos a permitir al usuario seleccionar un archivo de imagen y a partir de ahí lo vamos a procesar contra un Bucket de S3 que previamente Amplify habrá generado y configurado por nosotros al añadir el sistema de Storage a nuestro proyecto con el siguiente comando:

amplify add storage

Si no tienes conocimientos de Amplify no te pierdas el Curso de Vuejs 2 con AWS, Cognito y GraphQL, ahí explicamos las bases de Amplify con Vuejs 2.

Formulario para subir imágenes a S3 con Amplify

Lo primero que debemos hacer es crear un sencillo formulario haciendo uso del componente Vuetify Image Input, así que si todavía no lo has instalado en tu proyecto hazlo ahora. Una vez listo, vamos a crear un componente con Vuejs 2 y el siguiente código:

<template>
  <form>
    <v-layout row wrap>
      <v-flex xs12 mt-3>
        <v-image-input
          v-model="image"
          :image-quality="0.85"
          clearable
          image-format="png"
          :full-width="true"
          minScaling="contain"
          :image-width="520"
        ></v-image-input>
      </v-flex>
    </v-layout>
    <v-layout row wrap justify-end>
      <v-flex xs12 lg3 md4 shrink pl-1 pr-1>
        <v-btn
          :text="$t('uploadFile')"
          icon="save"
          @click="submit"
        />
      </v-flex>
    </v-layout>
  </form>
</template>

<script>
import VImageInput from "vuetify-image-input";
import S3Utils from "@/classes/S3Utils";
export default {
  name: "UploadForm",
  components: {
    VImageInput
  },
  data() {
    return {
      image: null
    };
  },
  methods: {
    async submit() {
      this.$v.$touch();
      if (this.$v.$anyError) return;

      await S3Utils.uploadImage(this.image, "photos");
  }
};
</script>

A simple vista es sencillo, simplemente tenemos un formulario que permite la subida de archivos con un botón que al pulsarlo ejecutará el método submit y procesará dicho archivo contra una clase llamada S3Utils que todavía no hemos creado, así que vamos a crear el archivo en el directorio src/classes.

Procesar imagen contra un Bucket de S3

import { Storage } from "aws-amplify";

export default class S3Utils {
  static async uploadImage(image, folder) {
  
    // parseamos el base64 para obtener los datos que necesitamos para crear la imagen
    const base64Parsed = new Buffer(
      image.replace(/^data:image\/\w+;base64,/, ""),
      "base64"
    );
    
    // obtenemos la extensión
    const type = image.split(";")[0].split("/")[1];
    
    // generamos un nombre aleatorio
    const fileName = `${folder}/${Math.random()
      .toString(36)
      .substr(2, 15)}.${type}`;

    // hacemos la subida a S3 diciéndole a Amplify que el contenido es un base64, así lo retorna Vuetify Image Input
    const { key } = await Storage.put(fileName, base64Parsed, {
      contentType: "image/jpg",
      contentEncoding: "base64"
    });
    
    // path del archivo en nuestro bucket de S3
    return key;
  }
}

La clase Storage de Amplify nos permite hacer uso del método put para hacer la subida de archivos a nuestro Bucket. De esta forma tan sencilla ya tenemos cubierta esta entrada y sabemos cómo subir archivos de imagen a Amazon S3 con Vuejs 2 y Amplify.