Dropzone (File Upload) for Nuxt and Supabase

1<script setup lang="ts">
2import { provide, inject } from 'vue'
3import { cn } from '@/lib/utils'
4 
5interface File {
6  name: string
7  errors: Array<{ message: string }>
8  size: number
9  lastModified?: number
10  type?: string
11  preview?: string
12}
13 
14export interface DropzoneProps {
15  className?: string
16  isDragActive?: boolean
17  isDragReject?: boolean
18  isSuccess?: boolean
19  maxFiles?: number
20  maxFileSize?: number
21  inputRef?: HTMLInputElement | null
22  setFiles: (files: File[]) => void
23  onUpload: () => Promise<void>
24  loading?: boolean
25  successes: string[]
26  errors: Array<{ name: string; message: string }>
27  files: File[]
28  getRootProps: (options?: Record<string, unknown>) => Record<string, unknown>
29  getInputProps: () => Record<string, unknown>
30}
31 
32export const formatBytes = (
33  bytes: number,
34  decimals = 2,
35  size?: 'bytes' | 'KB' | 'MB' | 'GB' | 'TB' | 'PB' | 'EB' | 'ZB' | 'YB'
36) => {
37  const k = 1000
38  const dm = decimals < 0 ? 0 : decimals
39  const sizes = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
40 
41  if (!bytes || bytes < 0) return size ? `0 ${size}` : '0 bytes'
42 
43  const i = size
44    ? Math.max(0, sizes.indexOf(size))
45    : Math.max(0, Math.min(sizes.length - 1, Math.floor(Math.log(bytes) / Math.log(k))))
46 
47  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
48}
49 
50const DropzoneContext = Symbol('DropzoneContext')
51 
52export function useDropzoneContext() {
53  const ctx = inject<DropzoneProps>(DropzoneContext)
54  if (!ctx) throw new Error('useDropzoneContext must be used within <Dropzone>')
55  return ctx
56}
57 
58const props = defineProps<DropzoneProps>()
59 
60provide(DropzoneContext, props)
61</script>
62 
63<template>
64  <div
65    v-bind="
66      props.getRootProps({
67        class: cn(
68          'border-2 border-gray-300 rounded-lg p-6 text-center bg-card transition-colors duration-300 text-foreground',
69          props.className,
70          props.isSuccess ? 'border-solid' : 'border-dashed',
71          props.isDragActive && 'border-primary bg-primary/10',
72          ((props.isDragActive && props.isDragReject) ||
73            (props.errors.length > 0 && !props.isSuccess) ||
74            props.files.some((f) => f.errors.length !== 0)) &&
75            'border-destructive bg-destructive/10'
76        ),
77      })
78    "
79  >
80    <input v-bind="props.getInputProps()" />
81    <slot />
82  </div>
83</template>