Zum Inhalt springen

Using Cloudflare R2 as Object Storage

Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.

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