Mendownload file dengan Cloud Storage di Web

Dengan Cloud Storage for Firebase, Anda dapat mendownload file dengan cepat dan mudah dari bucket Cloud Storage yang disediakan dan dikelola oleh Firebase.

Membuat Referensi

Untuk mendownload file, buat referensi Cloud Storage terlebih dahulu ke file yang ingin didownload.

Anda dapat membuat referensi dengan menambahkan jalur turunan ke root bucket Cloud Storage, atau membuat referensi dari URL gs:// atau https:// yang sudah ada, yang mereferensikan suatu objek di Cloud Storage.

import { getStorage, ref } from "firebase/storage";

// Create a reference with an initial file path and name
const storage = getStorage();
const pathReference = ref(storage, 'images/stars.jpg');

// Create a reference from a Google Cloud Storage URI
const gsReference = ref(storage, 'gs://bucket/images/stars.jpg');

// Create a reference from an HTTPS URL
// Note that in the URL, characters are URL escaped!
const httpsReference = ref(storage, 'https://firebasestorage.googleapis.com/b/bucket/o/images%20stars.jpg');  
storage_download_create_ref.js

// Create a reference with an initial file path and name
var storage = firebase.storage();
var pathReference = storage.ref('images/stars.jpg');

// Create a reference from a Google Cloud Storage URI
var gsReference = storage.refFromURL('gs://bucket/images/stars.jpg');

// Create a reference from an HTTPS URL
// Note that in the URL, characters are URL escaped!
var httpsReference = storage.refFromURL('https://firebasestorage.googleapis.com/b/bucket/o/images%20stars.jpg');  
download-files.js

Mendownload Data melalui URL

Anda bisa mendapatkan URL download untuk file dengan memanggil metode getDownloadURL() pada referensi Cloud Storage.

import { getStorage, ref, getDownloadURL } from "firebase/storage";

const storage = getStorage();
getDownloadURL(ref(storage, 'images/stars.jpg'))
  .then((url) => {
    // `url` is the download URL for 'images/stars.jpg'

    // This can be downloaded directly:
    const xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = (event) => {
      const blob = xhr.response;
    };
    xhr.open('GET', url);
    xhr.send();

    // Or inserted into an <img> element
    const img = document.getElementById('myimg');
    img.setAttribute('src', url);
  })
  .catch((error) => {
    // Handle any errors
  });
storage_download_via_url.js

storageRef.child('images/stars.jpg').getDownloadURL()
  .then((url) => {
    // `url` is the download URL for 'images/stars.jpg'

    // This can be downloaded directly:
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = (event) => {
      var blob = xhr.response;
    };
    xhr.open('GET', url);
    xhr.send();

    // Or inserted into an <img> element
    var img = document.getElementById('myimg');
    img.setAttribute('src', url);
  })
  .catch((error) => {
    // Handle any errors
  });
download-files.js

Mendownload Data Langsung dari SDK

Dari versi 9.5 dan yang lebih baru, SDK menyediakan fungsi ini untuk download langsung:

• getBlob()
• getBytes()
• getStream()

Dengan menggunakan fungsi ini, Anda tidak perlu mendownload dari URL, dan sebagai gantinya Anda dapat menampilkan data dalam kode Anda. Hal ini memungkinkan kontrol akses yang lebih terperinci melalui Aturan Keamanan Firebase.

Konfigurasi CORS

Untuk mendownload data secara langsung di browser, Anda harus mengonfigurasi bucket Cloud Storage untuk akses lintas-asal (CORS). Hal ini dapat dilakukan dengan alat command line gsutil, yang dapat Anda instal dari sini.

Jika Anda tidak menginginkan pembatasan berbasis domain (skenario yang paling umum), salin JSON ini ke file bernama cors.json:

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

Jalankan gsutil cors set cors.json gs://<your-cloud-storage-bucket> untuk men-deploy batasan ini.

Untuk informasi selengkapnya, lihat dokumentasi Google Cloud Storage.

Menangani Error

Ada sejumlah penyebab terjadinya error pada download, termasuk tidak adanya file atau pengguna tidak memiliki izin untuk mengakses file yang diinginkan. Informasi lebih lanjut mengenai error bisa dilihat di bagian Menangani Error pada dokumentasi.

Contoh Lengkap

Contoh lengkap download dengan penanganan error ditampilkan di bawah ini:

import { getStorage, ref, getDownloadURL } from "firebase/storage";

// Create a reference to the file we want to download
const storage = getStorage();
const starsRef = ref(storage, 'images/stars.jpg');

// Get the download URL
getDownloadURL(starsRef)
  .then((url) => {
    // Insert url into an <img> tag to "download"
  })
  .catch((error) => {
    // A full list of error codes is available at
    // https://firebase.google.com/docs/storage/web/handle-errors
    switch (error.code) {
      case 'storage/object-not-found':
        // File doesn't exist
        break;
      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 the server response
        break;
    }
  });
storage_download_full_example.js

// Create a reference to the file we want to download
var starsRef = storageRef.child('images/stars.jpg');

// Get the download URL
starsRef.getDownloadURL()
.then((url) => {
  // Insert url into an <img> tag to "download"
})
.catch((error) => {
  // A full list of error codes is available at
  // https://firebase.google.com/docs/storage/web/handle-errors
  switch (error.code) {
    case 'storage/object-not-found':
      // File doesn't exist
      break;
    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 the server response
      break;
  }
});
download-files.js

Anda juga dapat mengambil atau memperbarui metadata untuk file yang disimpan di Cloud Storage.