---
title: "Usar Firebase Storage como almacenamiento de objetos"
description: "¿Cómo usar Firebase Storage como almacenamiento de objetos con los starter kits de LaunchFast?"
source: "https://www.launchfa.st/es/documentation/storage/firebase"
---

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

> Consulta el código fuente [aquí](https://github.com/LaunchFast-Boilerplates/launchfa.st-astro/blob/master/src/lib/storage/firebase.ts).

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

LaunchFa.st te proporciona las APIs para interactuar con [Firebase Storage](https://firebase.google.com/docs/storage), construidas sobre estándares web.

Así es como configurarías Firebase Storage para usarlo con LaunchFast:

<Steps>
  1. En la consola de Firebase, abre **Settings** > [Service Accounts](https://console.firebase.google.com/project/_/settings/serviceaccounts/adminsdk).
  2. Haz clic en **Generate New Private Key** y confirma haciendo clic en **Generate Key**.
  3. Guarda de forma segura el archivo JSON que contiene la clave.
  4. En la **consola de Firebase**, ve a **Storage** y guarda el valor que empieza por **gs://...**.
  5. Actualiza las variables de entorno (con la clave **storageBucket** y el resto de valores obtenidos) según las siguientes instrucciones:

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

## Usar el componente `<Upload />`

Para implementar fácilmente subidas de archivos en tu aplicación, importa el componente `Upload` en tu aplicación:

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

## Obtener archivos de Firebase Storage con `GET`

Para obtener archivos de Firebase Storage, pasa el slug del archivo como searchParam `file` en la ruta `/api/storage` de la siguiente manera:

<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%;" />