cropper-file-upload-demo

1"use client";
2 
3import { CropIcon, UploadIcon, XIcon } from "lucide-react";
4import * as React from "react";
5import { toast } from "sonner";
6import { Button } from "@/registry/bases/base/ui/button";
7import {
8  Cropper,
9  CropperArea,
10  type CropperAreaData,
11  CropperImage,
12  type CropperPoint,
13  type CropperProps,
14} from "@/registry/bases/base/ui/cropper";
15import {
16  Dialog,
17  DialogContent,
18  DialogDescription,
19  DialogFooter,
20  DialogHeader,
21  DialogTitle,
22  DialogTrigger,
23} from "@/registry/bases/base/ui/dialog";
24import {
25  FileUpload,
26  FileUploadDropzone,
27  FileUploadItem,
28  FileUploadItemDelete,
29  FileUploadItemMetadata,
30  FileUploadItemPreview,
31  FileUploadList,
32  FileUploadTrigger,
33} from "@/registry/bases/base/ui/file-upload";
34import { Label } from "@/registry/bases/base/ui/label";
35import { Slider } from "@/registry/bases/base/ui/slider";
36 
37async function createCroppedImage(
38  imageSrc: string,
39  cropData: CropperAreaData,
40  fileName: string,
41): Promise<File> {
42  const image = new Image();
43  image.crossOrigin = "anonymous";
44 
45  return new Promise((resolve, reject) => {
46    image.onload = () => {
47      const canvas = document.createElement("canvas");
48      const ctx = canvas.getContext("2d");
49 
50      if (!ctx) {
51        reject(new Error("Could not get canvas context"));
52        return;
53      }
54 
55      canvas.width = cropData.width;
56      canvas.height = cropData.height;
57 
58      ctx.drawImage(
59        image,
60        cropData.x,
61        cropData.y,
62        cropData.width,
63        cropData.height,
64        0,
65        0,
66        cropData.width,
67        cropData.height,
68      );
69 
70      canvas.toBlob((blob) => {
71        if (!blob) {
72          reject(new Error("Canvas is empty"));
73          return;
74        }
75 
76        const croppedFile = new File([blob], `cropped-${fileName}`, {
77          type: "image/png",
78        });
79        resolve(croppedFile);
80      }, "image/png");
81    };
82 
83    image.onerror = () => reject(new Error("Failed to load image"));
84    image.src = imageSrc;
85  });
86}
87 
88interface FileWithCrop {
89  original: File;
90  cropped?: File;
91}
92 
93export default function CropperFileUploadDemo() {
94  const [files, setFiles] = React.useState<File[]>([]);
95  const [filesWithCrops, setFilesWithCrops] = React.useState<
96    Map<string, FileWithCrop>
97  >(new Map());
98  const [selectedFile, setSelectedFile] = React.useState<File | null>(null);
99  const [crop, setCrop] = React.useState<CropperPoint>({ x: 0, y: 0 });
100  const [zoom, setZoom] = React.useState(1);
101// … truncated