Upload A File To Storage

1'use client';
2 
3import { type ChangeEvent, useState } from 'react';
4import { useUploadFile } from '@/registry/default/storage/use-upload-file';
5 
6export function UploadFile() {
7  const [progress, setProgress] = useState(0);
8  const [isUploading, setIsUploading] = useState(false);
9  const { uploadFile } = useUploadFile();
10 
11  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
12    const file = e.target.files?.[0];
13    if (!file) {
14      return;
15    }
16 
17    setIsUploading(true);
18    uploadFile({
19      file,
20      onProgress: (p: number) => setProgress(p),
21      onSuccess: (url: string) => {
22        console.log('Uploaded to:', url);
23        setIsUploading(false);
24        setProgress(0);
25      },
26      onError: (err: Error) => {
27        console.error(`Upload failed: ${err.message}`);
28        setIsUploading(false);
29        setProgress(0);
30      },
31    });
32  };
33 
34  return (
35    <div className="flex flex-col gap-4">
36      <input
37        className="file:mr-4 file:rounded-md file:border-0 file:bg-secondary file:px-4 file:py-2 file:font-semibold file:text-secondary-foreground file:text-sm hover:file:bg-secondary/80"
38        onChange={handleFileChange}
39        type="file"
40      />
41 
42      {isUploading && (
43        <div className="mt-4 flex items-center gap-2">
44          <div className="h-2 w-full rounded-full bg-secondary">
45            <div
46              className="h-2 rounded-full bg-primary transition-all duration-300"
47              style={{ width: `${progress}%` }}
48            />
49          </div>
50          <span className="text-muted-foreground text-sm">{progress}%</span>
51        </div>
52      )}
53    </div>
54  );
55}