Membuat referensi Cloud Storage di Web

File Anda disimpan di bucket Cloud Storage. File di bucket ini disajikan secara hierarkis, seperti sistem file pada hard disk lokal atau data dalam Firebase Realtime Database. Dengan membuat referensi ke sebuah file, aplikasi Anda akan mendapatkan akses ke file tersebut. Selanjutnya, referensi ini bisa digunakan untuk mengupload atau mendownload data, memperoleh atau mengupdate metadata, atau menghapus file. Referensi bisa menunjuk ke file tertentu atau ke node bertingkat lebih tinggi dalam hierarki.

Jika Anda telah menggunakan Firebase Realtime Database, jalur ini tentu sudah tidak asing bagi Anda. Namun, data file Anda disimpan di Cloud Storage, bukan di Realtime Database

Membuat Referensi

Untuk mengupload atau mendownload file, menghapus file, atau mendapatkan atau mengupdate metadata, Anda harus membuat referensi ke file yang ingin Anda operasikan. Referensi bisa dianggap sebagai penunjuk ke file di cloud. Referensi bersifat ringan, jadi Anda bisa membuat sebanyak yang Anda butuhkan dan menggunakannya kembali untuk beberapa operasi.

Untuk membuat referensi, dapatkan instance layanan Storage menggunakan getStorage(), lalu panggil ref() dengan layanan sebagai argumen. Referensi ini menunjuk ke root bucket Cloud Storage Anda.

Web

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

// Get a reference to the storage service, which is used to create references in your storage bucket
const storage = getStorage();

// Create a storage reference from our storage service
const storageRef = ref(storage);
storage_create_ref.js

Web

// Get a reference to the storage service, which is used to create references in your storage bucket
var storage = firebase.storage();

// Create a storage reference from our storage service
var storageRef = storage.ref();
create-reference.js

Anda bisa membuat referensi ke lokasi yang lebih rendah pada hierarki, misalnya 'images/space.jpg' dengan meneruskan jalur ini sebagai argumen kedua saat memanggil ref().

Web

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

const storage = getStorage();

// Create a child reference
const imagesRef = ref(storage, 'images');
// imagesRef now points to 'images'

// Child references can also take paths delimited by '/'
const spaceRef = ref(storage, 'images/space.jpg');
// spaceRef now points to "images/space.jpg"
// imagesRef still points to "images"
storage_create_ref_child.js

Web

// Create a child reference
var imagesRef = storageRef.child('images');
// imagesRef now points to 'images'

// Child references can also take paths delimited by '/'
var spaceRef = storageRef.child('images/space.jpg');
// spaceRef now points to "images/space.jpg"
// imagesRef still points to "images"
create-reference.js

Anda juga dapat menggunakan properti parent dan root untuk naik ke atas dalam hierarki file. parent naik satu level ke atas, sedangkan root naik ke level paling atas.

Web

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

const storage = getStorage();
const spaceRef = ref(storage, 'images/space.jpg');

// Parent allows us to move to the parent of a reference
const imagesRef = spaceRef.parent;
// imagesRef now points to 'images'

// Root allows us to move all the way back to the top of our bucket
const rootRef = spaceRef.root;
// rootRef now points to the root
storage_navigate_ref.js

Web

// Parent allows us to move to the parent of a reference
var imagesRef = spaceRef.parent;
// imagesRef now points to 'images'

// Root allows us to move all the way back to the top of our bucket
var rootRef = spaceRef.root;
// rootRef now points to the root
create-reference.js

child(), parent, dan root bisa digabungkan bersama beberapa kali, karena masing-masing menampilkan referensi. Pengecualiannya adalah parent dari root, yang merupakan null.

Web

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

const storage = getStorage();
const spaceRef = ref(storage, 'images/space.jpg');

// References can be chained together multiple times
const earthRef = ref(spaceRef.parent, 'earth.jpg');
// earthRef points to 'images/earth.jpg'

// nullRef is null, since the parent of root is null
const nullRef = spaceRef.root.parent;
storage_navigate_ref_chain.js

Web

// References can be chained together multiple times
var earthRef = spaceRef.parent.child('earth.jpg');
// earthRef points to 'images/earth.jpg'

// nullRef is null, since the parent of root is null
var nullRef = spaceRef.root.parent;
create-reference.js

Properti Referensi

Anda bisa memeriksa referensi agar dapat lebih memahami file yang dituju oleh referensi tersebut menggunakan properti fullPath, name, dan bucket. Properti ini mendapatkan jalur lengkap file, nama file, dan bucket tempat penyimpanan file tersebut.

Web

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

const storage = getStorage();
const spaceRef = ref(storage, 'images/space.jpg');

// Reference's path is: 'images/space.jpg'
// This is analogous to a file path on disk
spaceRef.fullPath;

// Reference's name is the last segment of the full path: 'space.jpg'
// This is analogous to the file name
spaceRef.name;

// Reference's bucket is the name of the storage bucket where files are stored
spaceRef.bucket;
storage_ref_properties.js

Web

// Reference's path is: 'images/space.jpg'
// This is analogous to a file path on disk
spaceRef.fullPath;

// Reference's name is the last segment of the full path: 'space.jpg'
// This is analogous to the file name
spaceRef.name;

// Reference's bucket is the name of the storage bucket where files are stored
spaceRef.bucket;
create-reference.js

Pembatasan Referensi

Jalur dan nama referensi bisa memuat urutan karakter Unicode yang valid, tetapi ada pembatasan tertentu yang diberlakukan, antara lain:

  1. Panjang total reference.fullPath harus antara 1 dan 1.024 byte jika berenkode UTF-8.
  2. Tidak mengandung karakter Enter atau Line Feed.
  3. Hindari penggunaan #, [, ], *, atau ?, karena karakter tersebut tidak berfungsi baik dengan alat lain seperti Firebase Realtime Database atau gsutil.

Contoh Lengkap

Web

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

const storage = getStorage();

// Points to the root reference
const storageRef = ref(storage);

// Points to 'images'
const imagesRef = ref(storageRef, 'images');

// Points to 'images/space.jpg'
// Note that you can use variables to create child values
const fileName = 'space.jpg';
const spaceRef = ref(imagesRef, fileName);

// File path is 'images/space.jpg'
const path = spaceRef.fullPath;

// File name is 'space.jpg'
const name = spaceRef.name;

// Points to 'images'
const imagesRefAgain = spaceRef.parent;
storage_ref_full_example.js

Web

// Points to the root reference
var storageRef = firebase.storage().ref();

// Points to 'images'
var imagesRef = storageRef.child('images');

// Points to 'images/space.jpg'
// Note that you can use variables to create child values
var fileName = 'space.jpg';
var spaceRef = imagesRef.child(fileName);

// File path is 'images/space.jpg'
var path = spaceRef.fullPath;

// File name is 'space.jpg'
var name = spaceRef.name;

// Points to 'images'
var imagesRef = spaceRef.parent;
create-reference.js

Selanjutnya, mari pelajari cara mengupload file ke Cloud Storage.