Buka konsol

Mengupload File di Web

Cloud Storage memungkinkan developer untuk mengupload file dengan cepat dan mudah ke bucket Google Cloud Storage yang disediakan dan dikelola oleh Firebase.

Karena aplikasi Google App Engine default dan Firebase sama-sama menggunakan bucket ini, mengonfigurasi akses publik akan membuat file App Engine yang baru diupload juga dapat diakses oleh umum. Pastikan Anda membatasi kembali akses ke bucket Storage saat menyiapkan autentikasi.

Mengupload File

Untuk mengupload file ke Cloud Storage, buat referensi ke lokasi lengkap file terlebih dahulu, termasuk nama filenya.

// 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

Mengupload dari Blob atau File

Setelah membuat referensi yang sesuai, panggil metode put(). put() mengambil file melalui API Blob dan File JavaScript, lalu menguploadnya ke Cloud Storage.

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

Mengupload dari Byte Array

Selain jenis File dan Blob, put() juga dapat mengupload Uint8Array ke 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!');
});

Mengupload dari String

Jika Blob, File, atau Uint8Array tidak tersedia, Anda dapat menggunakan metode putString() untuk mengupload string mentah, berenkode base64, base64url, atau data_url ke 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!');
});

Baik put() maupun putString() akan menampilkan UploadTask, yang dapat digunakan sebagai janji atau untuk mengelola dan memantau status upload.

Karena referensi menentukan lokasi lengkap ke file tersebut, pastikan Anda mengupload ke lokasi yang tidak kosong.

Menambahkan Metadata File

Saat mengupload file, Anda juga dapat menentukan metadata untuk file tersebut. Metadata ini berisi properti metadata file standar seperti name, size, dan contentType (umumnya dikenal sebagai jenis MIME). Cloud Storage otomatis menyimpulkan jenis konten dari ekstensi file tempat file tersebut disimpan di disk. Namun, jika Anda menentukan contentType di metadata, jenis ini akan mengganti jenis yang terdeteksi secara otomatis. Jika tidak ada metadata contentType yang ditentukan dan file tidak memiliki ekstensi file, Cloud Storage akan menetapkan jenis application/octet-stream sebagai default. Informasi lebih lanjut mengenai metadata file dapat ditemukan di bagian Menggunakan Metadata File.

// 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);

Mengelola Upload

Selain memulai upload, Anda dapat menjeda, melanjutkan, dan membatalkan upload menggunakan metode pause(), resume(), dan cancel(). Pemanggilan pause() atau resume() akan memunculkan perubahan status pause atau running. Pemanggilan metode cancel() akan menyebabkan upload gagal dan mengirimkan pesan error yang menunjukkan bahwa upload dibatalkan.

// 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();

Memantau Kemajuan Upload

Saat mengupload, tugas upload dapat memicu peristiwa kemajuan pada observer state_changed, seperti:

Jenis Peristiwa Penggunaan Standar
running Peristiwa ini dijalankan saat memulai tugas atau melanjutkan upload, dan sering kali digunakan bersamaan dengan peristiwa pause.
progress Peristiwa ini dijalankan setiap kali data diupload ke Cloud Storage, dan dapat digunakan untuk mengisi indikator kemajuan upload.
pause Peristiwa ini dijalankan setiap kali upload dijeda, dan sering kali digunakan bersamaan dengan peristiwa running.

Ketika terjadi suatu peristiwa, objek TaskSnapshot akan dikembalikan. Snapshot ini adalah tampilan tetap dari tugas pada saat peristiwa tersebut terjadi. Objek ini berisi properti berikut:

Properti Jenis Deskripsi
bytesTransferred Number Total jumlah byte yang telah ditransfer saat snapshot diambil.
totalBytes Number Total perkiraan jumlah byte yang akan diupload.
state firebase.storage.TaskState Status upload saat ini.
metadata firebaseStorage.Metadata Sebelum upload selesai, metadata dikirim ke server. Setelah upload selesai, metadata dikirim kembali oleh server.
task firebaseStorage.UploadTask Tugas yang berisi snapshot ini, yang dapat digunakan untuk 'menjeda`, `melanjutkan`, atau `membatalkan` tugas.
ref firebaseStorage.Reference Referensi tempat tugas ini berasal.

Perubahan status berikut, digabungkan dengan properti TaskSnapshot, memberikan cara sederhana namun efektif untuk memantau peristiwa upload.

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/...
  uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
    console.log('File available at', downloadURL);
  });
});

Penanganan Error

Ada sejumlah alasan mengapa error dapat terjadi pada upload, termasuk tidak adanya file, atau pengguna tidak memiliki izin untuk mengupload file yang diinginkan. Informasi lebih lanjut mengenai error dapat ditemukan di bagian Menangani Error pada dokumen.

Contoh Lengkap

Contoh lengkap upload dengan pemantauan kemajuan dan penanganan error ditampilkan di bawah ini:

// 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
  uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
    console.log('File available at', downloadURL);
  });
});

Setelah mengupload file, pelajari cara mendownloadnya dari Cloud Storage.