Multi Image Uploader Block

1import { ImageUploader } from '@/components/upload/multi-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 MultiImageUploaderBlock() {
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          <ImageUploader
30            maxFiles={6}
31            maxSize={1024 * 1024 * 2} // 2MB
32          />
33          <CompletedImages />
34        </UploaderProvider>
35      </div>
36    </div>
37  );
38}
39 
40function CompletedImages() {
41  const { fileStates } = useUploader();
42 
43  const completedFiles = fileStates.filter(
44    (fs): fs is CompletedFileState => fs.status === 'COMPLETE',
45  );
46 
47  if (completedFiles.length === 0) {
48    return null;
49  }
50 
51  return (
52    <div className="mt-8 w-full">
53      <h3 className="mb-2 text-lg font-semibold">Uploaded Files</h3>
54      <div className="rounded-md bg-gray-50 p-4 dark:bg-gray-900">
55        {completedFiles.map((res) => (
56          <a
57            key={res.url}
58            className="mb-1 block underline"
59            href={res.url}
60            target="_blank"
61            rel="noopener noreferrer"
62          >
63            {res.file.name}
64          </a>
65        ))}
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                progress = Math.min(progress + increment, 100);
91// … truncated