Dengan Cloud Storage for Firebase, Anda dapat mengupload file dengan cepat dan mudah ke bucket Cloud Storage yang disediakan dan dikelola oleh Firebase.
Mengupload File
Untuk mengupload file ke Cloud Storage, buat referensi ke jalur lengkap file terlebih dahulu, termasuk nama filenya.
API modular web
import { getStorage, ref } from "firebase/storage"; // Create a root reference const storage = getStorage(); // Create a reference to 'mountains.jpg' const mountainsRef = ref(storage, 'mountains.jpg'); // Create a reference to 'images/mountains.jpg' const mountainImagesRef = ref(storage, '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
API dengan namespace web
// 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 uploadBytes()
. uploadBytes()
mengambil file melalui API File dan Blob JavaScript, lalu menguploadnya ke Cloud Storage.
API modular web
import { getStorage, ref, uploadBytes } from "firebase/storage"; const storage = getStorage(); const storageRef = ref(storage, 'some-child'); // 'file' comes from the Blob or File API uploadBytes(storageRef, file).then((snapshot) => { console.log('Uploaded a blob or file!'); });
API dengan namespace web
// 'file' comes from the Blob or File API ref.put(file).then((snapshot) => { console.log('Uploaded a blob or file!'); });
Mengupload dari Byte Array
Selain jenis File
dan Blob
, uploadBytes()
juga dapat mengupload Uint8Array
ke Cloud Storage.
API modular web
import { getStorage, ref, uploadBytes } from "firebase/storage"; const storage = getStorage(); const storageRef = ref(storage, 'some-child'); const bytes = new Uint8Array([0x48, 0x65, 0x6c, 0x6c, 0x6f, 0x2c, 0x20, 0x77, 0x6f, 0x72, 0x6c, 0x64, 0x21]); uploadBytes(storageRef, bytes).then((snapshot) => { console.log('Uploaded an array!'); });
API dengan namespace web
var bytes = new Uint8Array([0x48, 0x65, 0x6c, 0x6c, 0x6f, 0x2c, 0x20, 0x77, 0x6f, 0x72, 0x6c, 0x64, 0x21]); ref.put(bytes).then((snapshot) => { console.log('Uploaded an array!'); });
Mengupload dari String
Jika Blob
, File
, atau Uint8Array
tidak tersedia, Anda dapat menggunakan metode uploadString()
untuk mengupload string dengan enkode base64
, base64url
, data_url
mentah ke Cloud Storage.
API modular web
import { getStorage, ref, uploadString } from "firebase/storage"; const storage = getStorage(); const storageRef = ref(storage, 'some-child'); // Raw string is the default if no format is provided const message = 'This is my message.'; uploadString(storageRef, message).then((snapshot) => { console.log('Uploaded a raw string!'); }); // Base64 formatted string const message2 = '5b6p5Y+344GX44G+44GX44Gf77yB44GK44KB44Gn44Go44GG77yB'; uploadString(storageRef, message2, 'base64').then((snapshot) => { console.log('Uploaded a base64 string!'); }); // Base64url formatted string const message3 = '5b6p5Y-344GX44G-44GX44Gf77yB44GK44KB44Gn44Go44GG77yB'; uploadString(storageRef, message3, 'base64url').then((snapshot) => { console.log('Uploaded a base64url string!'); }); // Data URL string const message4 = 'data:text/plain;base64,5b6p5Y+344GX44G+44GX44Gf77yB44GK44KB44Gn44Go44GG77yB'; uploadString(storageRef, message4, 'data_url').then((snapshot) => { console.log('Uploaded a data_url string!'); });
API dengan namespace web
// Raw string is the default if no format is provided var message = 'This is my message.'; ref.putString(message).then((snapshot) => { console.log('Uploaded a raw string!'); }); // Base64 formatted string var message = '5b6p5Y+344GX44G+44GX44Gf77yB44GK44KB44Gn44Go44GG77yB'; ref.putString(message, 'base64').then((snapshot) => { console.log('Uploaded a base64 string!'); }); // Base64url formatted string var message = '5b6p5Y-344GX44G-44GX44Gf77yB44GK44KB44Gn44Go44GG77yB'; ref.putString(message, 'base64url').then((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((snapshot) => { console.log('Uploaded a data_url string!'); });
Karena referensi menentukan jalur lengkap ke file tersebut, pastikan Anda mengupload ke jalur 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
secara otomatis menyimpulkan jenis konten dari ekstensi file tempat file disimpan
di disk. Namun, jika Anda menentukan contentType
dalam 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
secara default. Informasi lebih lanjut mengenai metadata file dapat ditemukan di bagian Menggunakan Metadata File.
API modular web
import { getStorage, ref, uploadBytes } from "firebase/storage"; const storage = getStorage(); const storageRef = ref(storage, 'images/mountains.jpg'); // Create file metadata including the content type /** @type {any} */ const metadata = { contentType: 'image/jpeg', }; // Upload the file and metadata const uploadTask = uploadBytes(storageRef, file, metadata);
API dengan namespace web
// 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()
. Memanggil pause()
atau
resume()
akan memunculkan perubahan status pause
atau running
. Memanggil metode cancel()
akan menyebabkan upload gagal dan menampilkan pesan error yang menunjukkan bahwa upload dibatalkan.
API modular web
import { getStorage, ref, uploadBytesResumable } from "firebase/storage"; const storage = getStorage(); const storageRef = ref(storage, 'images/mountains.jpg'); // Upload the file and metadata const uploadTask = uploadBytesResumable(storageRef, file); // Pause the upload uploadTask.pause(); // Resume the upload uploadTask.resume(); // Cancel the upload uploadTask.cancel();
API dengan namespace web
// 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 Progres Upload
Saat mengupload, tugas upload dapat memicu peristiwa progres pada
observer state_changed
, seperti:
Jenis Peristiwa | Penggunaan Standar |
---|---|
running |
Peristiwa ini dijalankan saat memulai tugas atau melanjutkan upload, dan sering digunakan bersamaan dengan peristiwa pause . Untuk upload yang lebih besar, peristiwa ini dapat dijalankan beberapa kali sebagai pembaruan proses. |
pause |
Peristiwa ini dijalankan setiap kali upload dijeda, dan sering digunakan bersamaan dengan peristiwa running . |
Ketika terjadi suatu peristiwa, objek TaskSnapshot
akan diteruskan kembali. 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 yang dikirim ke server. Setelah upload selesai, metadata yang dikirim kembali oleh server. |
task |
firebaseStorage.UploadTask |
Snapshot tugas ini, yang dapat digunakan untuk 'menjeda`, `melanjutkan`, atau `membatalkan` tugas. |
ref |
firebaseStorage.Reference |
Referensi tempat tugas ini berasal. |
Perubahan status ini, bersama dengan properti TaskSnapshot
, memberikan cara sederhana tetapi efektif untuk memantau peristiwa upload.
API modular web
import { getStorage, ref, uploadBytesResumable, getDownloadURL } from "firebase/storage"; const storage = getStorage(); const storageRef = ref(storage, 'images/rivers.jpg'); const uploadTask = uploadBytesResumable(storageRef, 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', (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 const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100; console.log('Upload is ' + progress + '% done'); switch (snapshot.state) { case 'paused': console.log('Upload is paused'); break; case 'running': console.log('Upload is running'); break; } }, (error) => { // Handle unsuccessful uploads }, () => { // Handle successful uploads on complete // For instance, get the download URL: https://firebasestorage.googleapis.com/... getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => { console.log('File available at', downloadURL); }); } );
API dengan namespace web
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', (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; } }, (error) => { // Handle unsuccessful uploads }, () => { // Handle successful uploads on complete // For instance, get the download URL: https://firebasestorage.googleapis.com/... uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => { console.log('File available at', downloadURL); }); } );
Penanganan Error
Ada sejumlah penyebab terjadinya error saat upload, termasuk tidak adanya file lokal, 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 progres dan penanganan error ditampilkan di bawah ini:
API modular web
import { getStorage, ref, uploadBytesResumable, getDownloadURL } from "firebase/storage"; const storage = getStorage(); // Create the file metadata /** @type {any} */ const metadata = { contentType: 'image/jpeg' }; // Upload file and metadata to the object 'images/mountains.jpg' const storageRef = ref(storage, 'images/' + file.name); const uploadTask = uploadBytesResumable(storageRef, file, metadata); // Listen for state changes, errors, and completion of the upload. uploadTask.on('state_changed', (snapshot) => { // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100; console.log('Upload is ' + progress + '% done'); switch (snapshot.state) { case 'paused': console.log('Upload is paused'); break; case 'running': console.log('Upload is running'); break; } }, (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; } }, () => { // Upload completed successfully, now we can get the download URL getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => { console.log('File available at', downloadURL); }); } );
API dengan namespace web
// 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' (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; } }, (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; } }, () => { // Upload completed successfully, now we can get the download URL uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => { console.log('File available at', downloadURL); }); } );
Setelah Anda mengupload file, pelajari cara mendownloadnya dari Cloud Storage.