Firebase Storage als Object Storage nutzen

Sehen Sie sich den Quellcode hier an.

LaunchFa.st stellt Ihnen die APIs zur Verfügung, um mit Firebase Storage zu interagieren, aufgebaut auf Web-Standards.

So richten Sie Firebase Storage für die Nutzung mit LaunchFast ein:

1. Öffnen Sie in der Firebase-Konsole Settings > Service Accounts.

2. Klicken Sie auf Generate New Private Key und bestätigen Sie durch Klick auf Generate Key.

3. Speichern Sie die JSON-Datei mit dem Schlüssel sicher.

4. Gehen Sie in der Firebase-Konsole zu Storage und speichern Sie den Wert, der mit gs://… beginnt.

5. Aktualisieren Sie die Umgebungsvariablen (mit dem Schlüssel storageBucket und den übrigen erhaltenen Werten) über die folgenden Anweisungen:

   Astro

   https://github.com/LaunchFast-Boilerplates/launchfa.st-astro#storage

   SvelteKit

   https://github.com/LaunchFast-Boilerplates/launchfa.st-sveltekit#storage

   Next.js

   https://github.com/LaunchFast-Boilerplates/launchfa.st-nextjs#storage

Die <Upload />-Komponente verwenden

Um Datei-Uploads in Ihrer Anwendung einfach umzusetzen, importieren Sie die Upload-Komponente in Ihrer Anwendung:

Astro

page.astro

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

<Upload />

SvelteKit

+page.svelte

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

<Upload />

Next.js

page.tsx

'use client'

import Upload from '@/components/Upload'

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

Dateien aus Firebase Storage abrufen (GET)

Um Dateien aus Firebase Storage abzurufen, übergeben Sie den Slug der Datei als file-searchParam an die Route /api/storage wie folgt:

Astro

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>

SvelteKit

+page.svelte

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

Next.js

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