Upload the image - sana028/VueLearningsPoc GitHub Wiki

uploading files in firebase cloud storage

1. To upload a file to Cloud Storage, first we need to create a reference to the full path of the file, including the file name.

const storage = getStorage() //getstorage method from firebase/storage
const storageRef = ref(storage, `${file.name}`) //import ref from firebase/storage

//you can specify the specific folder name where you want to store
const storageRef = ref(storage, `images/${file.name}`)

2. Upload blob or file using upload bytes after creating a reference , we will call the uploadBytes() method. uploadBytes() takes files via the JavaScript File and Blob APIs and uploads them to Cloud Storage.

uploadBytes(storageRef,file);

it also upload Uint8Array byte array to Cloud Storage.

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

3.we can upload the file if it is not a blod, file are unit8array, we can use the uploadString() method to upload a raw, base64, base64url, or data_url encoded string to Cloud Storage.

this is a Data URL

const message4 = 'data:text/plain;base64,5b6p5Y+344GX44G+44GX44Gf77yB44GK44KB44Gn44Go44GG77yB';
uploadString(storageRef, message4, 'data_url').then((snapshot) => {
  console.log('Uploaded a data_url string!');
}); 

4. Add File Metadata when uploading a file, we can also specify the meta data for the file , this meta data contains the file name, size, content type. By default the meta-data will take defule data from the file until we customize the metadata

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