Single Image Dropzone Block

1import { SingleImageDropzone } from '@/components/upload/single-image';
2import {
3  UploaderProvider,
4  useUploader,
5  type CompletedFileState,
6  type UploadFn,
7} from '@/components/upload/uploader-provider';
8import * as React from 'react';
9 
10export default function SingleImageUploaderBlock() {
11  const { edgestore } = useMockEdgeStore();
12 
13  const uploadFn: UploadFn = React.useCallback(
14    async ({ file, signal, onProgressChange }) => {
15      const res = await edgestore.myPublicImages.upload({
16        file,
17        signal,
18        onProgressChange,
19      });
20      return { url: res.url };
21    },
22    [edgestore],
23  );
24 
25  return (
26    <div className="flex flex-col items-center gap-4 p-4">
27      <div className="w-full max-w-md">
28        <UploaderProvider uploadFn={uploadFn} autoUpload>
29          <SingleImageDropzone
30            width={320}
31            height={320}
32            dropzoneOptions={{ maxSize: 1024 * 1024 * 2 }} // 2MB
33          />
34          <CompletedImage />
35        </UploaderProvider>
36      </div>
37    </div>
38  );
39}
40 
41function CompletedImage() {
42  const { fileStates } = useUploader();
43 
44  const completedFile = fileStates.find(
45    (fs): fs is CompletedFileState => fs.status === 'COMPLETE',
46  );
47 
48  if (!completedFile) {
49    return null;
50  }
51 
52  return (
53    <div className="mt-8 w-full">
54      <h3 className="mb-2 text-lg font-semibold">Uploaded Image</h3>
55      <div className="rounded-md bg-gray-50 p-4 dark:bg-gray-900">
56        <div className="flex flex-col items-center">
57          <a
58            href={completedFile.url}
59            target="_blank"
60            rel="noopener noreferrer"
61            className="underline"
62          >
63            {completedFile.file.name}
64          </a>
65        </div>
66      </div>
67    </div>
68  );
69}
70 
71// Mock implementation of EdgeStore
72function useMockEdgeStore() {
73  return {
74    edgestore: {
75      myPublicImages: {
76        upload: async ({
77          file,
78          onProgressChange,
79        }: {
80          file: File;
81          signal?: AbortSignal;
82          onProgressChange?: (progress: number) => void | Promise<void>;
83        }) => {
84          // Simulate upload progress with a Promise that completes only after reaching 100%
85          await new Promise<void>((resolve) => {
86            if (onProgressChange) {
87              let progress = 0;
88              const interval = setInterval(() => {
89                const increment = Math.floor(Math.random() * 41) + 10;
90// … truncated