Skip to content

Using Firebase Storage for Documents, Images, and more provides you with the APIs to interact with Firebase Storage, built on top of Web Standards.

You can configure it in the src/pages/api/storage directory.
  1. Update the firebaseConfig.ts file to have the necessary variables for Firebase Storage:
  • In the Firebase console, open Settings > Service Accounts

  • Click Generate New Private Key, then confirm by clicking Generate Key

  • Securely store the JSON file containing the key

  • In the Firebase Console, Go to Storage, and save the value starting with gs://…

  • Update the JSON with the key storageBucket with the value obtained above

// Example firebase config, do
// make sure to add the storageBucket
// from the steps above

export default {
  type: 'service_account',
  project_id: '...',
  private_key_id: '...',
  private_key: '...',
  client_email: '...',
  client_id: '...',
  auth_uri: '...',
  token_uri: '...',
  auth_provider_x509_cert_url: '...',
  client_x509_cert_url: '...',
  universe_domain: '...',
  storageBucket: '...',
  1. To make it easier for you to implement file upload, just import the following component in your Svelte app:
// File: page.astro

import Upload from '@/components/Upload.astro'

<Upload />
  1. To fetch the uploaded file, make sure to persist the response containing the fileURL which’ll be used to fetch the original file. To do so, hit the following API:
// File: page.astro

  const getFile = new URL('/api/storage/post', window.location.origin)
  getFile.searchParams.set('file', fileURL)

    .then((res) => res.json())
    .then((res) => {
      const { filePublicURL } = res