فایل‌ها را با فضای ذخیره‌سازی ابری در وب آپلود کنید

Cloud Storage for Firebase به شما امکان می‌دهد تا به سرعت و به راحتی فایل‌ها را در یک مخزن Cloud Storage که توسط فایربیس ارائه و مدیریت می‌شود، آپلود کنید.

آپلود فایل‌ها

برای آپلود فایل در Cloud Storage ، ابتدا باید یک ارجاع به مسیر کامل فایل، شامل نام فایل، ایجاد کنید.

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 
storage_upload_ref.js

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 
upload-files.js

آپلود از یک Blob یا File

پس از ایجاد یک مرجع مناسب، متد uploadBytes() را فراخوانی می‌کنید. uploadBytes() فایل‌ها را از طریق APIهای فایل جاوا اسکریپت و Blob دریافت کرده و آنها را در Cloud Storage آپلود می‌کند.

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!');
});
storage_upload_blob.js

Web 

// 'file' comes from the Blob or File API
ref.put(file).then((snapshot) => {
  console.log('Uploaded a blob or file!');
});
upload-files.js

آپلود از یک آرایه بایتی

علاوه بر انواع File و Blob ، uploadBytes() می‌تواند یک Uint8Array نیز در Cloud Storage آپلود کند.

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!');
});
storage_upload_bytes.js

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!');
});
upload-files.js

آپلود از یک رشته

اگر یک Blob ، File یا Uint8Array در دسترس نباشد، می‌توانید از متد uploadString() برای آپلود یک رشته خام، base64 ، base64url یا data_url کدگذاری شده در Cloud Storage استفاده کنید.

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!');
});
storage_upload_string.js

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!');
});
upload-files.js

از آنجایی که این ارجاع، مسیر کامل فایل را مشخص می‌کند، مطمئن شوید که فایل را در مسیری غیر خالی آپلود می‌کنید.

افزودن متادیتای فایل

هنگام آپلود فایل، می‌توانید برای آن فایل، فراداده (metadata) نیز مشخص کنید. این فراداده شامل ویژگی‌های معمول فراداده فایل مانند name ، size و contentType (که معمولاً به عنوان نوع MIME شناخته می‌شود) است. Cloud Storage به طور خودکار نوع محتوا را از پسوند فایلی که فایل روی دیسک ذخیره شده است، استنباط می‌کند، اما اگر نوع contentType در فراداده مشخص کنید، نوع شناسایی شده خودکار را نادیده می‌گیرد. اگر هیچ فراداده contentType مشخص نشده باشد و فایل پسوند فایل نداشته باشد، Cloud Storage به طور پیش‌فرض نوع application/octet-stream را در نظر می‌گیرد. اطلاعات بیشتر در مورد فراداده فایل را می‌توانید در بخش «استفاده از فراداده فایل» بیابید.

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);
storage_upload_metadata.js

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);
upload-files.js

مدیریت آپلودها

علاوه بر شروع آپلود، می‌توانید با استفاده از متدهای pause() ، resume() و cancel() آپلودها را متوقف، از سر بگیرید و لغو کنید. فراخوانی pause() یا resume() باعث ایجاد تغییرات در حالت pause یا running می‌شود. فراخوانی متد cancel() منجر به عدم موفقیت آپلود و برگرداندن خطایی می‌شود که نشان می‌دهد آپلود لغو شده است.

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();
storage_manage_uploads.js

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();
upload-files.js

نظارت بر پیشرفت آپلود

هنگام آپلود، ممکن است وظیفه آپلود رویدادهای پیشرفت را در ناظر state_changed ایجاد کند، مانند:

نوع رویداد کاربرد معمول
running این رویداد زمانی رخ می‌دهد که وظیفه شروع به آپلود شدن می‌کند یا آپلود را از سر می‌گیرد و اغلب همراه با رویداد pause استفاده می‌شود. برای آپلودهای بزرگتر، این رویداد ممکن است چندین بار به عنوان به‌روزرسانی پیشرفت اجرا شود.
pause این رویداد هر زمان که آپلود متوقف شود، فعال می‌شود و اغلب همراه با رویداد running استفاده می‌شود.

وقتی یک رویداد رخ می‌دهد، یک شیء TaskSnapshot به عقب برگردانده می‌شود. این snapshot یک نمای تغییرناپذیر از وظیفه در زمان وقوع رویداد است. این شیء شامل ویژگی‌های زیر است:

ملک نوع توضیحات
bytesTransferred Number تعداد کل بایت‌هایی که هنگام گرفتن این اسنپ‌شات منتقل شده‌اند.
totalBytes Number تعداد کل بایت‌هایی که انتظار می‌رود آپلود شوند.
state firebase.storage.TaskState وضعیت فعلی آپلود.
metadata firebaseStorage.Metadata قبل از اتمام آپلود، متادیتا به سرور ارسال می‌شود. پس از اتمام آپلود، متادیتا توسط سرور بازگردانده می‌شود.
task firebaseStorage.UploadTask این یک تصویر لحظه‌ای از وظیفه است که می‌تواند برای «مکث»، «از سرگیری» یا «لغو» وظیفه استفاده شود.
ref firebaseStorage.Reference مرجعی که این وظیفه از آن آمده است.

این تغییرات در وضعیت، همراه با ویژگی‌های TaskSnapshot روشی ساده اما قدرتمند برای نظارت بر رویدادهای آپلود ارائه می‌دهد.

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);
    });
  }
);
storage_monitor_upload.js

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);
    });
  }
);
upload-files.js

مدیریت خطا

دلایل مختلفی برای بروز خطا در هنگام آپلود وجود دارد، از جمله عدم وجود فایل محلی یا عدم دسترسی کاربر برای آپلود فایل مورد نظر. اطلاعات بیشتر در مورد خطاها را می‌توانید در بخش «مدیریت خطاها» در مستندات بیابید.

مثال کامل

یک مثال کامل از آپلود با قابلیت نظارت بر پیشرفت و مدیریت خطا در زیر نشان داده شده است:

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);
    });
  }
);
storage_upload_handle_error.js

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);
    });
  }
);
upload-files.js

حالا که فایل‌ها را آپلود کرده‌اید، بیایید یاد بگیریم که چگونه آنها را از Cloud Storage دانلود کنیم.