Saltearse al contenido

Using Supabase Storage as Object Storage

Esta página aún no está disponible en tu idioma.

Browse the source code here.

LaunchFa.st provides you with the APIs to interact with Supabase Storage, built on top of Web Standards.

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

Using the `<Upload />` Component

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

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

<Upload />

<script lang="ts">
import Upload from '@/components/Upload.svelte'
</script>

<Upload />

'use client'

import Upload from '@/components/Upload'

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

`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:

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

<script lang="ts">
  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>

'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)
    })
}, [])