Saltearse al contenido

Using Cloudflare R2 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 Cloudflare R2, built on top of Web Standards.

Here’s how you would set up Cloudflare R2 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 Cloudflare R2

To fetch files from Cloudflare R2, 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)
    })
}, [])