Cómo subir archivos en la Web

Cloud Storage permite a los programadores subir archivos con rapidez y facilidad a un depósito de Google Cloud Storage proporcionado y administrado por Firebase.

Dado que la app predeterminada de Google App Engine y Firebase comparten este depósito, la configuración del acceso público puede causar que los archivos de App Engine subidos recientemente también se vuelvan públicos. Asegúrate de restringir el acceso a tu depósito de Storage nuevamente cuando configures la autenticación.

Sube archivos

Para subir un archivo a Cloud Storage, primero debes crear una referencia a la ruta de acceso completa del archivo, incluido el nombre del archivo.

// Create a root reference
var storageRef = firebase.storage().ref();

// Create a reference to 'mountains.jpg'
var mountainsRef = storageRef.child('mountains.jpg');

// Create a reference to 'images/mountains.jpg'
var mountainImagesRef = storageRef.child('images/mountains.jpg');

// While the file names are the same, the references point to different files
mountainsRef.name === mountainImagesRef.name            // true
mountainsRef.fullPath === mountainImagesRef.fullPath    // false

Sube archivos desde un Blob o File

Una vez creada la referencia correspondiente, llama al método put(). El método put() toma archivos a través de las API de JavaScript File y Blob, y los sube a Cloud Storage.

var file = ... // use the Blob or File API
ref.put(file).then(function(snapshot) {
  console.log('Uploaded a blob or file!');
});

Sube archivos desde una matriz de bytes

Además de los tipos File y Blob, put() también puede subir un Uint8Array a Cloud Storage.

// Uint8Array
var bytes = new Uint8Array([0x48, 0x65, 0x6c, 0x6c, 0x6f, 0x2c, 0x20, 0x77, 0x6f, 0x72, 0x6c, 0x64, 0x21]);
ref.put(bytes).then(function(snapshot) {
  console.log('Uploaded an array!');
});

Sube archivos desde una string

Si no hay elementos Blob, File o Uint8Array disponibles, puedes usar el método putString() para subir una string con codificación base64, base64url, data_url o sin procesar a Cloud Storage.

// Raw string is the default if no format is provided
var message = 'This is my message.';
ref.putString(message).then(function(snapshot) {
  console.log('Uploaded a raw string!');
});

// Base64 formatted string
var message = '5b6p5Y+344GX44G+44GX44Gf77yB44GK44KB44Gn44Go44GG77yB';
ref.putString(message, 'base64').then(function(snapshot) {
  console.log('Uploaded a base64 string!');
});

// Base64url formatted string
var message = '5b6p5Y-344GX44G-44GX44Gf77yB44GK44KB44Gn44Go44GG77yB';
ref.putString(message, 'base64url').then(function(snapshot) {
  console.log('Uploaded a base64url string!');
});

// Data URL string
var message = 'data:text/plain;base64,5b6p5Y+344GX44G+44GX44Gf77yB44GK44KB44Gn44Go44GG77yB';
ref.putString(message, 'data_url').then(function(snapshot) {
  console.log('Uploaded a data_url string!');
});

Los métodos put() y putString() muestran una UploadTask que puedes usar como promesa o para administrar y supervisar el estado de la carga.

Puesto que la referencia establece la ruta completa al archivo, asegúrate de que subir a una ruta que no esté vacía.

Agrega metadatos de archivos

Cuando subes un archivo, también puedes especificar metadatos para este. Estos metadatos contienen propiedades típicas de metadatos de archivo, como name, size y contentType (conocido como tipo MIME). Cloud Storage infiere automáticamente el tipo de contenido a partir de la extensión del archivo almacenado en el disco, pero si especificas un contentType en los metadatos, se anulará el tipo detectado automáticamente. Si no se especifican metadatos de contentType y el archivo no tiene una extensión, Cloud Storage usa el tipo predeterminado application/octet-stream. Para obtener más información sobre metadatos de archivos, consulta la sección Cómo usar metadatos de archivos.

// Create file metadata including the content type
var metadata = {
  contentType: 'image/jpeg',
};

// Upload the file and metadata
var uploadTask = storageRef.child('images/mountains.jpg').put(file, metadata);

Administra cargas

Además de iniciar cargas, puedes detener, reanudar y cancelar cargas mediante los métodos pause(), resume() y cancel(). Si llamas a pause() o resume(), se generarán cambios de estado pause o running. Llamar al método cancel() hace que falle la carga y aparezca un error que indica que la carga se canceló.

// Upload the file and metadata
var uploadTask = storageRef.child('images/mountains.jpg').put(file);

// Pause the upload
uploadTask.pause();

// Resume the upload
uploadTask.resume();

// Cancel the upload
uploadTask.cancel();

Controla el progreso de la carga

Mientras se realiza la carga, la tarea de carga puede generar eventos en el observador de state_changed, como los siguientes:

Tipo de evento Uso común
running Este evento se activa cuando la tarea inicia o reanuda la carga. A menudo, se usa en combinación con el evento pause.
progress Este evento se activa cuando se suben datos a Cloud Storage. Se puede usar para rellenar un indicador de progreso de carga.
pause Este evento se activa cuando la carga se detiene. A menudo, se usa en combinación con el evento running.

Cuando ocurre un evento, se envía un objeto TaskSnapshot. Esta instantánea es una vista inmutable de la tarea en el momento en que ocurrió el evento. Este objeto contiene las siguientes propiedades:

Propiedad Tipo Descripción
bytesTransferred Number La cantidad total de bytes que se transfirieron cuando se tomó esta instantánea.
totalBytes Number La cantidad total de bytes que se espera subir.
state firebase.storage.TaskState El estado actual de la carga.
metadata firebaseStorage.Metadata Antes de que se complete la carga, los metadatos enviados al servidor. Después de completar la carga, los metadatos que el servidor reenvió.
task firebaseStorage.UploadTask La tarea de la que se tomó la instantánea, que se puede usar para "detenerla", "reanudarla" o "cancelarla".
ref firebaseStorage.Reference La referencia de la que provino la tarea.

Estos cambios de estado, combinados con las propiedades de TaskSnapshot, proporcionan una manera simple y potente de supervisar eventos de carga.

var uploadTask = storageRef.child('images/rivers.jpg').put(file);

// Register three observers:
// 1. 'state_changed' observer, called any time the state changes
// 2. Error observer, called on failure
// 3. Completion observer, called on successful completion
uploadTask.on('state_changed', function(snapshot){
  // Observe state change events such as progress, pause, and resume
  // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
  var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
  console.log('Upload is ' + progress + '% done');
  switch (snapshot.state) {
    case firebase.storage.TaskState.PAUSED: // or 'paused'
      console.log('Upload is paused');
      break;
    case firebase.storage.TaskState.RUNNING: // or 'running'
      console.log('Upload is running');
      break;
  }
}, function(error) {
  // Handle unsuccessful uploads
}, function() {
  // Handle successful uploads on complete
  // For instance, get the download URL: https://firebasestorage.googleapis.com/...
  var downloadURL = uploadTask.snapshot.downloadURL;
});

Manejo de errores

Existen diferentes motivos por los que pueden producirse errores durante la carga, como que el archivo local no exista o que el usuario no tenga permiso para subir el archivo deseado. Para obtener más información sobre los errores, consulta la sección de los documentos denominada Soluciona errores.

Ejemplo completo

A continuación, se muestra un ejemplo completo de una carga con control de progreso y manejo de errores:

// File or Blob named mountains.jpg
var file = ...

// Create the file metadata
var metadata = {
  contentType: 'image/jpeg'
};

// Upload file and metadata to the object 'images/mountains.jpg'
var uploadTask = storageRef.child('images/' + file.name).put(file, metadata);

// Listen for state changes, errors, and completion of the upload.
uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed'
  function(snapshot) {
    // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
    var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    console.log('Upload is ' + progress + '% done');
    switch (snapshot.state) {
      case firebase.storage.TaskState.PAUSED: // or 'paused'
        console.log('Upload is paused');
        break;
      case firebase.storage.TaskState.RUNNING: // or 'running'
        console.log('Upload is running');
        break;
    }
  }, function(error) {

  // A full list of error codes is available at
  // https://firebase.google.com/docs/storage/web/handle-errors
  switch (error.code) {
    case 'storage/unauthorized':
      // User doesn't have permission to access the object
      break;

    case 'storage/canceled':
      // User canceled the upload
      break;

    ...

    case 'storage/unknown':
      // Unknown error occurred, inspect error.serverResponse
      break;
  }
}, function() {
  // Upload completed successfully, now we can get the download URL
  var downloadURL = uploadTask.snapshot.downloadURL;
});

Ahora que ya subiste archivos, veamos cómo descargarlos de Cloud Storage.

Enviar comentarios sobre...

Si necesitas ayuda, visita nuestra página de asistencia.