Code, Draw, Deploy: A drawing app with Nuxt & Cloudflare R2

export default defineNuxtConfig({
  modules: [
    '@nuxthub/core',
    '@nuxt/ui',
    'nuxt-auth-utils'
  ],
  hub: {
    // Enable Cloudflare R2 storage
    blob: true
  },
})

NUXT_SESSION_PASSWORD=our_session_secret
NUXT_OAUTH_GITHUB_CLIENT_ID=our_github_client_id
NUXT_OAUTH_GITHUB_CLIENT_SECRET=our_github_client_secret

export default oauthGitHubEventHandler({
  async onSuccess(event, { user }) {
    await setUserSession(event, {
      user: {
        provider: 'github',
        id: String(user.id),
        name: user.name || user.login,
        avatar: user.avatar_url,
        url: user.html_url,
      },
    })

    return sendRedirect(event, '/draw')
  },
})

<script setup lang="ts">
const { loggedIn } = useUserSession()
// ...
</script>

<template>
  <DrawPad v-if="loggedIn" @save="save" />
  <UButton v-else to="/auth/github" label="Sign-in with GitHub" external />
</template>

declare module '#auth-utils' {
  interface User {
    provider: 'github' | 'google'
    id: string
    name: string
    avatar: string
    url: string
  }
}
// export is required to avoid type errors
export {}

<script setup lang="ts">
import SignaturePad from 'signature_pad'

const emit = defineEmits(['save'])
const canvas = ref()
const signaturePad = ref()

onMounted(() => {
  signaturePad.value = new SignaturePad(canvas.value, {
    penColor: '#030712',
    backgroundColor: '#f9fafb',
  })
})

async function save() {
  const dataURL = signaturePad.value.toDataURL('image/jpeg')
  // Emit the dataURL to the parent component
  emit('save', dataURL)
}
</script>

<template>
  <div class="max-w-[400px]">
    <canvas ref="canvas" class="border rounded-md" />
    <UButton @click="save" />
  </div>
</template>

<script setup lang="ts">
const { loggedIn } = useUserSession()

async function save(dataURL: string) {
  // Transform the dataURL to a Blob
  const blob = await fetch(dataURL).then(res => res.blob())
  // Transform the Blob to a File
  const file = new File([blob], `drawing.jpg`, { type: 'image/jpeg' })
  // Create the form data
  const form = new FormData()
  form.append('drawing', file)

  // Upload the file to the server
  await $fetch('/api/upload', {
    method: 'POST',
    body: form
  })
    .then(() => navigateTo('/'))
    .catch((err) => alert(err.data?.message || err.message))
}
</script>

<template>
  <DrawPad v-if="loggedIn" @save="save" />
  <!-- ... -->
</template>

export default eventHandler(async (event) => {
  // Make sure the user is authenticated to upload
  const { user } = await requireUserSession(event)

  // Read the form data
  const form = await readFormData(event)
  const drawing = form.get('drawing') as File

  // Ensure the file is a jpeg image and is not larger than 1MB
  ensureBlob(drawing, {
    maxSize: '1MB',
    types: ['image/jpeg'],
  })

  // Upload the file to the Cloudflare R2 bucket
  return hubBlob().put(`${Date.now()}.jpg`, drawing, {
    addRandomSuffix: true,
    customMetadata: {
      userProvider: user.provider,
      userId: user.id,
      userName: user.name,
      userAvatar: user.avatar,
      userUrl: user.url,
    },
  })
})

export default eventHandler(async (event) => {
  // Return 100 last drawings
  return hubBlob().list({
    limit: 100
  })
})

<script setup lang="ts">
const { data } = await useFetch('/api/drawings')
</script>

<template>
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
    <div v-for="drawing in data?.blobs" :key="drawing.pathname" class="flex flex-col gap-2">
      <img :src="`/drawings/${drawing.pathname}`" :alt="drawing.pathname" />
      <div class="flex items-center justify-between">
        <span>{{ drawing.customMetadata?.userName }}</span>
        <span class="text-xs text-gray-500">{{ drawing.uploadedAt }}</span>
      </div>
    </div>
  </div>
</template>

export default eventHandler(async (event) => {
  // ...

  /**
   * Create a new pathname to be smaller than the last one uploaded
   * So the blob listing will send the last uploaded image at first
   * We use the timestamp in 2050 minus the current timestamp
   * So this project will start to be buggy in 2050, sorry for that
   **/ 
  const name = `${new Date('2050-01-01').getTime() - Date.now()}`

  // Upload the file to the Cloudflare R2 bucket
  return hubBlob().put(`${name}.jpg`, drawing, {
    // ...
  })
})

export default eventHandler(async (event) => {
  const { cursor } = await getQuery<{ cursor?: string }>(event)

  return hubBlob().list({
    limit: 100,
    cursor
  })
})

<script setup lang="ts">
import { vInfiniteScroll } from '@vueuse/components'

const loading = ref(false)
const { data } = await useFetch('/api/drawings', {
  // don't return a shallowRef as we mutate the array in loadMore()
  deep: true,
})

async function loadMore() {
  if (loading.value || !data.value?.hasMore) return
  loading.value = true

  const more = await $fetch(`/api/drawings`, {
    query: { cursor: data.value.cursor },
  })
  data.value.blobs.push(...more.blobs)
  data.value.cursor = more.cursor
  data.value.hasMore = more.hasMore
  loading.value = false
}
</script>


<template>
  <div class="my-8">
    <!-- ... -->
    <div v-if="data?.hasMore" v-infinite-scroll="[loadMore, { distance: 10, interval: 1000 }]">
      <UButton :loading="loading" @click="loadMore">
        {{ loading ? 'Loading more drawings...' : 'Load more drawings' }}
      </UButton>
    </div>
  </div>
</template>

npx nuxthub deploy

npx nuxt dev --remote

npx nuxthub manage