Upload from a Blob or File
Once you've created an appropriate reference, you then call
the uploadBytes() method. uploadBytes() takes files via the JavaScript File and Blob APIs
and uploads them to Cloud Storage.
Web version 9Web version 8
Learn more about the tree-shakeable Web v9 modular SDK and upgrade from version 8.
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
Upload from a Byte Array
In addition to the File and Blob types, uploadBytes() can also upload a Uint8Array to Cloud
Storage.
Web version 9Web version 8
Learn more about the tree-shakeable Web v9 modular SDK and upgrade from version 8.
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
Upload from a String
If a Blob, File, or Uint8Array isn't available, you can use the uploadString() method to
upload a raw, base64, base64url, or data_url encoded string to Cloud Storage.
Web version 9Web version 8
Learn more about the tree-shakeable Web v9 modular SDK and upgrade from version 8.
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
uploadString() returns an UploadTask, which you can use as a promise or use to manage
and monitor the status of the upload.
Since the reference defines the full path to the file, make sure that you are uploading to
a non-empty path.
Add File Metadata
When uploading a file, you can also specify metadata for that file. This metadata
contains typical file metadata properties such as name, size, and contentType (commonly
referred to as MIME type). Cloud Storage automatically infers the content type from the
file extension where the file is stored on disk, but if you specify a contentType in the
metadata it will override the auto-detected type. If no contentType metadata is specified
and the file doesn't have a file extension, Cloud Storage defaults to the
type application/octet-stream. More information on file metadata can be found in the Use
File Metadata section.