---
title: "Using Supabase Storage as Object Storage"
description: "How to use Supabase Storage as Object Storage with LaunchFast starter kits?"
source: "https://www.launchfa.st/documentation/storage/supabase"
---

> **Site index for agents**
> Fetch https://www.launchfa.st/llms.txt to discover every page on this site.
> Every page is also available as Markdown by appending `.md` to its URL.

> Browse the source code [here](https://github.com/LaunchFast-Boilerplates/launchfa.st-astro/blob/master/src/lib/storage/supabase.ts).

import { Tabs, TabItem, Steps } from '@astrojs/starlight/components'

LaunchFa.st provides you with the APIs to interact with [Supabase Storage](https://supabase.com/docs/guides/storage), built on top of Web Standards.

Here's how you would set up Supabase Storage to use it with LaunchFast:

<Steps>
  1. In the Supabase console, open the **Storage** tab, and grab the bucket name.
  2. Update the environment variables via the following instructions:

      <Tabs>
        <TabItem label="Astro">
            [https://github.com/LaunchFast-Boilerplates/launchfa.st-astro#storage](https://github.com/LaunchFast-Boilerplates/launchfa.st-astro#storage)
        </TabItem>
        <TabItem label="SvelteKit">
            [https://github.com/LaunchFast-Boilerplates/launchfa.st-sveltekit#storage](https://github.com/LaunchFast-Boilerplates/launchfa.st-sveltekit#storage)
        </TabItem>
        <TabItem label="Next.js">
            [https://github.com/LaunchFast-Boilerplates/launchfa.st-nextjs#storage](https://github.com/LaunchFast-Boilerplates/launchfa.st-nextjs#storage)
        </TabItem>
      </Tabs> 
</Steps>

## Using the `<Upload />` Component

To easily implemented file uploads in your application, import the `Upload` component in your application:

<Tabs>

  <TabItem label="Astro">

    ```astro
    ---
    // File: page.astro

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

    <Upload />
    ```

  </TabItem>

  <TabItem label="SvelteKit">

    ```svelte
    <script lang="ts">
    // File: +page.svelte

    import Upload from '@/components/Upload.svelte'
    </script>

    <Upload />
    ```

  </TabItem>

  <TabItem label="Next.js">

    ```typescript
    // File: page.tsx
    'use client'

    import Upload from '@/components/Upload'

    export default async function () {
      return <Upload />
    }
    ```

  </TabItem>

</Tabs>

## `GET` files from Supabase Storage

To fetch files from Supabase Storage, pass the file's slug as the `file` searchParam in `/api/storage` route as following:

<Tabs>

  <TabItem label="Astro">

    ```astro add={6,7,9-14}
    ---
    // File: page.astro
    ---

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

      fetch(getFile.toString())
        .then((res) => res.json())
        .then((res) => {
          const { filePublicURL } = res
          console.log(filePublicURL)
        })
    </script>
    ```

  </TabItem>

  <TabItem label="SvelteKit">

    ```svelte add={6,7,10-15}
    <script lang="ts">
      // File: +page.svelte

      import { onMount } from 'svelte'

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

      onMount(() => {
        fetch(getFile.toString())
          .then((res) => res.json())
          .then((res) => {
            const { filePublicURL } = res
            console.log(filePublicURL)
          })
      })
    </script>
    ```

  </TabItem>

  <TabItem label="Next.js">

    ```typescript add={5-12}
    // File: page.tsx
    'use client'

    useEffect(() => {
      const getFile = new URL('/api/storage', window.location.origin)
      getFile.searchParams.set('file', fileURL)
      fetch(getFile.toString())
        .then((res) => res.json())
        .then((res) => {
          const { filePublicURL } = res
          console.log(filePublicURL)
        })
    }, [])
    ```

  </TabItem>

</Tabs>

<div style="height: 1px; background: #C1C1C150; width: 100%;" />