Usar Amazon S3 como almacenamiento de objetos

Consulta el código fuente aquí.

LaunchFa.st te proporciona las APIs para interactuar con Amazon S3, construidas sobre estándares web.

Así es como configurarías Amazon S3 para usarlo con LaunchFast:

1. Sigue las instrucciones de uno de nuestros blogs para configurar Amazon S3.

2. Actualiza las variables de entorno según las siguientes instrucciones:

   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

Usar el componente <Upload />

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

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

Obtener archivos de Amazon S3 con GET

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

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