Usar Cloudflare R2 como almacenamiento de objetos

Consulta el código fuente aquí.

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

Así es como configurarías Cloudflare R2 para usarlo con LaunchFast:

1. Sigue las instrucciones de uno de nuestros blogs para configurar Cloudflare R2.

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 Cloudflare R2 con GET

Para obtener archivos de Cloudflare R2, 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)
    })
}, [])