npm - uplofile - Versions diffs - 1.0.1 → 1.1.0 - Mend

uplofile 1.0.1 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/index.cjs CHANGED Viewed

@@ -5,6 +5,40 @@ var reactSlot = require('@radix-ui/react-slot');
 var react = require('react');
 const uid = ()=>Math.random().toString(36).slice(2, 10) + Date.now().toString(36).slice(-4);
+const isVideoFile = (item)=>{
+    if (item.file) {
+        return item.file.type.startsWith("video/");
+    }
+    if (item.url) {
+        const extension = item.url.split(".").pop()?.toLowerCase();
+        const videoExtensions = [
+            "mp4",
+            "webm",
+            "ogg",
+            "mov",
+            "avi",
+            "mkv"
+        ];
+        if (extension && videoExtensions.includes(extension)) {
+            return true;
+        }
+    }
+    if (item.name) {
+        const extension = item.name.split(".").pop()?.toLowerCase();
+        const videoExtensions = [
+            "mp4",
+            "webm",
+            "ogg",
+            "mov",
+            "avi",
+            "mkv"
+        ];
+        if (extension && videoExtensions.includes(extension)) {
+            return true;
+        }
+    }
+    return false;
+};
 const UploaderCtx = /*#__PURE__*/ react.createContext(null);
 const Root = ({ multiple = true, initial = [], onChange, upload, removeMode = "optimistic", onRemove, accept = "image/*", name = "images", maxCount, disabled, children })=>{
@@ -235,6 +269,7 @@ const Root = ({ multiple = true, initial = [], onChange, upload, removeMode = "o
                 "data-disabled": disabled ? "" : undefined,
                 "data-multiple": multiple ? "" : undefined
             }),
+        setItems,
         hiddenInputValue,
         name
     };
@@ -271,59 +306,262 @@ const Dropzone = ({ asChild, ...rest })=>{
 };
 const Preview = ({ render })=>{
-    const { items, actions } = useUplofile();
+    const { items, actions, setItems } = useUplofile();
     if (render && typeof render === "function") return render({
         items,
+        setItems,
         actions
     });
+    if (items.length === 0) return null;
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
         "data-part": "preview",
         className: "uplofile-preview",
         children: /*#__PURE__*/ jsxRuntime.jsx("div", {
-            className: "uplofile-preview__wrapper grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4",
+            className: "uplofile-preview__wrapper grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5",
             children: items.map((item)=>/*#__PURE__*/ jsxRuntime.jsxs("div", {
                     onClick: (e)=>e.stopPropagation(),
-                    className: "uplofile-preview__item relative overflow-hidden rounded-xl border size-32",
+                    className: `uplofile-preview__item group relative aspect-square overflow-hidden rounded-xl border bg-muted/5 transition-all ${item.status === "error" ? "border-red-200 bg-red-50/30 hover:shadow-md" : "hover:shadow-md hover:ring-2 hover:ring-primary/20"}`,
                     "data-state": item.status,
                     children: [
-                        item.url || item.previewUrl ? /*#__PURE__*/ jsxRuntime.jsx("img", {
+                        item.status === "error" && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                            className: "absolute right-2 top-2 z-10 flex size-5 items-center justify-center rounded-full bg-red-500 text-white shadow-sm transition-opacity group-hover:opacity-0",
+                            children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
+                                xmlns: "http://www.w3.org/2000/svg",
+                                width: "12",
+                                height: "12",
+                                viewBox: "0 0 24 24",
+                                fill: "none",
+                                stroke: "currentColor",
+                                strokeWidth: "3",
+                                strokeLinecap: "round",
+                                strokeLinejoin: "round",
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx("circle", {
+                                        cx: "12",
+                                        cy: "12",
+                                        r: "10"
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx("line", {
+                                        x1: "12",
+                                        y1: "8",
+                                        x2: "12",
+                                        y2: "12"
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx("line", {
+                                        x1: "12",
+                                        y1: "16",
+                                        x2: "12.01",
+                                        y2: "16"
+                                    })
+                                ]
+                            })
+                        }),
+                        isVideoFile(item) ? /*#__PURE__*/ jsxRuntime.jsx("video", {
+                            src: item.url || item.previewUrl,
+                            className: "uplofile-preview__video w-full h-full object-cover transition-transform duration-500 group-hover:scale-110",
+                            muted: true,
+                            playsInline: true,
+                            onMouseOver: (e)=>e.currentTarget.play(),
+                            onMouseOut: (e)=>e.currentTarget.pause()
+                        }) : item.url || item.previewUrl ? /*#__PURE__*/ jsxRuntime.jsx("img", {
                             src: item.url || item.previewUrl,
                             alt: item.name,
-                            className: "uplofile-preview__image size-full object-cover"
-                        }) : /*#__PURE__*/ jsxRuntime.jsx("div", {
-                            className: "uplofile-preview__no-preview flex h-32 w-full items-center justify-center text-xs text-gray-500",
-                            children: "No preview"
+                            className: "uplofile-preview__image w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
+                        }) : /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                            className: "uplofile-preview__no-preview flex w-full h-full flex-col items-center justify-center gap-2 text-muted-foreground/40 bg-muted/20",
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsxs("svg", {
+                                    xmlns: "http://www.w3.org/2000/svg",
+                                    width: "28",
+                                    height: "28",
+                                    viewBox: "0 0 24 24",
+                                    fill: "none",
+                                    stroke: "currentColor",
+                                    strokeWidth: "1.5",
+                                    strokeLinecap: "round",
+                                    strokeLinejoin: "round",
+                                    className: "opacity-40",
+                                    children: [
+                                        /*#__PURE__*/ jsxRuntime.jsx("rect", {
+                                            width: "18",
+                                            height: "18",
+                                            x: "3",
+                                            y: "3",
+                                            rx: "2",
+                                            ry: "2"
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx("circle", {
+                                            cx: "9",
+                                            cy: "9",
+                                            r: "2"
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                            d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                    className: "max-w-[80%] truncate text-[10px] font-bold uppercase tracking-widest opacity-60",
+                                    children: item.name.split(".").pop()
+                                })
+                            ]
                         }),
-                        item.status === "uploading" && /*#__PURE__*/ jsxRuntime.jsx("div", {
-                            className: "uplofile-preview__progress absolute bottom-0 left-0 right-0 h-1 bg-gray-200",
-                            children: /*#__PURE__*/ jsxRuntime.jsx("div", {
-                                className: "uplofile-preview__progress-bar h-full bg-black/80",
-                                style: {
-                                    width: `${Math.max(0, Math.min(100, item.progress ?? 0))}%`
-                                }
-                            })
+                        item.status === "uploading" && /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                            className: "uplofile-preview__uploading-overlay absolute inset-0 z-20 flex flex-col items-center justify-center bg-black/60 backdrop-blur-[2px]",
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsxs("svg", {
+                                    className: "mb-2 size-6 animate-spin text-white",
+                                    xmlns: "http://www.w3.org/2000/svg",
+                                    fill: "none",
+                                    viewBox: "0 0 24 24",
+                                    children: [
+                                        /*#__PURE__*/ jsxRuntime.jsx("circle", {
+                                            className: "opacity-25",
+                                            cx: "12",
+                                            cy: "12",
+                                            r: "10",
+                                            stroke: "currentColor",
+                                            strokeWidth: "4"
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                            className: "opacity-75",
+                                            fill: "currentColor",
+                                            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                    className: "uplofile-preview__progress h-1 w-12 overflow-hidden rounded-full bg-white/20",
+                                    children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                        className: "uplofile-preview__progress-bar h-full bg-white transition-all duration-300",
+                                        style: {
+                                            width: `${Math.max(0, Math.min(100, item.progress ?? 0))}%`
+                                        }
+                                    })
+                                })
+                            ]
                         }),
                         /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                            className: "uplofile-preview__actions absolute inset-x-0 bottom-0 flex justify-end gap-2 bg-gradient-to-t from-black/60 to-transparent p-2",
+                            className: `uplofile-preview__overlay absolute inset-0 z-30 flex flex-col items-center justify-center gap-2 transition-all duration-200 group-hover:opacity-100 ${item.status === "error" ? "bg-red-950/70 opacity-0 backdrop-blur-[1px]" : "bg-black/40 opacity-0"}`,
                             children: [
-                                item.status === "uploading" && /*#__PURE__*/ jsxRuntime.jsx("button", {
-                                    type: "button",
-                                    className: "uplofile-preview__button uplofile-preview__button--cancel rounded-xl bg-black/50 px-2 py-1 text-xs text-white",
-                                    onClick: ()=>actions.cancel(item.uid),
-                                    children: "Cancel"
-                                }),
-                                (item.status === "error" || item.status === "canceled") && /*#__PURE__*/ jsxRuntime.jsx("button", {
-                                    type: "button",
-                                    className: "uplofile-preview__button uplofile-preview__button--retry rounded-xl bg-black/50 px-2 py-1 text-xs text-white",
-                                    onClick: ()=>actions.retry(item.uid),
-                                    children: "Retry"
+                                /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                    className: "flex gap-2",
+                                    children: [
+                                        item.status === "uploading" && /*#__PURE__*/ jsxRuntime.jsx("button", {
+                                            type: "button",
+                                            className: "uplofile-preview__button uplofile-preview__button--cancel flex size-9 items-center justify-center rounded-xl bg-white/90 text-black shadow-lg transition-transform hover:scale-110 active:scale-95",
+                                            onClick: ()=>actions.cancel(item.uid),
+                                            title: "Cancel",
+                                            children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
+                                                xmlns: "http://www.w3.org/2000/svg",
+                                                width: "18",
+                                                height: "18",
+                                                viewBox: "0 0 24 24",
+                                                fill: "none",
+                                                stroke: "currentColor",
+                                                strokeWidth: "2.5",
+                                                strokeLinecap: "round",
+                                                strokeLinejoin: "round",
+                                                children: [
+                                                    /*#__PURE__*/ jsxRuntime.jsx("circle", {
+                                                        cx: "12",
+                                                        cy: "12",
+                                                        r: "10"
+                                                    }),
+                                                    /*#__PURE__*/ jsxRuntime.jsx("line", {
+                                                        x1: "15",
+                                                        y1: "9",
+                                                        x2: "9",
+                                                        y2: "15"
+                                                    }),
+                                                    /*#__PURE__*/ jsxRuntime.jsx("line", {
+                                                        x1: "9",
+                                                        y1: "9",
+                                                        x2: "15",
+                                                        y2: "15"
+                                                    })
+                                                ]
+                                            })
+                                        }),
+                                        (item.status === "error" || item.status === "canceled") && /*#__PURE__*/ jsxRuntime.jsx("button", {
+                                            type: "button",
+                                            className: "uplofile-preview__button uplofile-preview__button--retry flex size-9 items-center justify-center rounded-xl text-primary-foreground shadow-lg transition-transform hover:scale-110 active:scale-95",
+                                            onClick: ()=>actions.retry(item.uid),
+                                            title: "Retry",
+                                            children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
+                                                xmlns: "http://www.w3.org/2000/svg",
+                                                width: "18",
+                                                height: "18",
+                                                viewBox: "0 0 24 24",
+                                                fill: "none",
+                                                stroke: "currentColor",
+                                                strokeWidth: "2.5",
+                                                strokeLinecap: "round",
+                                                strokeLinejoin: "round",
+                                                children: [
+                                                    /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                                        d: "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"
+                                                    }),
+                                                    /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                                        d: "M21 3v5h-5"
+                                                    })
+                                                ]
+                                            })
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx("button", {
+                                            type: "button",
+                                            className: `uplofile-preview__button uplofile-preview__button--remove flex size-9 items-center justify-center rounded-xl transition-all hover:scale-110 active:scale-95 text-red-600`,
+                                            onClick: ()=>actions.remove(item.uid),
+                                            disabled: item.status === "removing",
+                                            title: "Remove",
+                                            children: item.status === "removing" ? /*#__PURE__*/ jsxRuntime.jsxs("svg", {
+                                                className: "size-5 animate-spin text-inherit",
+                                                xmlns: "http://www.w3.org/2000/svg",
+                                                fill: "none",
+                                                viewBox: "0 0 24 24",
+                                                children: [
+                                                    /*#__PURE__*/ jsxRuntime.jsx("circle", {
+                                                        className: "opacity-25",
+                                                        cx: "12",
+                                                        cy: "12",
+                                                        r: "10",
+                                                        stroke: "currentColor",
+                                                        strokeWidth: "4"
+                                                    }),
+                                                    /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                                        className: "opacity-75",
+                                                        fill: "currentColor",
+                                                        d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                                                    })
+                                                ]
+                                            }) : /*#__PURE__*/ jsxRuntime.jsxs("svg", {
+                                                xmlns: "http://www.w3.org/2000/svg",
+                                                width: "18",
+                                                height: "18",
+                                                viewBox: "0 0 24 24",
+                                                fill: "none",
+                                                stroke: "currentColor",
+                                                strokeWidth: "2.5",
+                                                strokeLinecap: "round",
+                                                strokeLinejoin: "round",
+                                                children: [
+                                                    /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                                        d: "M3 6h18"
+                                                    }),
+                                                    /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                                        d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"
+                                                    }),
+                                                    /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                                        d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
+                                                    })
+                                                ]
+                                            })
+                                        })
+                                    ]
                                 }),
-                                /*#__PURE__*/ jsxRuntime.jsx("button", {
-                                    type: "button",
-                                    className: "uplofile-preview__button uplofile-preview__button--remove rounded-xl bg-black/50 px-2 py-1 text-xs text-white",
-                                    onClick: ()=>actions.remove(item.uid),
-                                    disabled: item.status === "removing",
-                                    children: item.status === "removing" ? "Removing..." : "Remove"
+                                item.status === "error" && /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                    className: "mt-1 px-3 text-center text-[10px] font-bold text-white drop-shadow-md line-clamp-2",
+                                    children: item.error || "Upload failed"
                                 })
                             ]
                         })
@@ -415,4 +653,5 @@ exports.Remove = Remove;
 exports.Retry = Retry;
 exports.Root = Root;
 exports.Trigger = Trigger;
+exports.isVideoFile = isVideoFile;
 exports.useUplofile = useUplofile;

package/dist/index.d.mts CHANGED Viewed

@@ -45,6 +45,7 @@ type ItemActions = {
 };
 type ImageUploaderContextValue = {
     items: UploadFileItem[];
+    setItems: (items: UploadFileItem[]) => void;
     disabled?: boolean;
     multiple: boolean;
     accept: string;
@@ -80,13 +81,14 @@ type TriggerRenderProps = {
 };
 type PreviewRenderProps = {
     items: UploadFileItem[];
+    setItems: (items: UploadFileItem[]) => void;
     actions: ItemActions;
 };
 type Props = {
     render?: (api: PreviewRenderProps) => React.ReactNode;
 };
-declare const Preview: ({ render }: Props) => string | number | boolean | Iterable<React.ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
+declare const Preview: ({ render }: Props) => string | number | boolean | react_jsx_runtime.JSX.Element | Iterable<React.ReactNode> | null | undefined;
 declare const HiddenInput: ({ name }: {
     name?: string;
 }) => react_jsx_runtime.JSX.Element;
@@ -109,6 +111,8 @@ declare const Trigger: ({ asChild, children, render, ...rest }: PropsWithChildre
 declare const useUplofile: () => ImageUploaderContextValue;
-export { Cancel, Dropzone, HiddenInput, Preview, Remove, Retry, Root, Trigger, useUplofile };
+declare const isVideoFile: (item: UploadFileItem) => boolean;
+export { Cancel, Dropzone, HiddenInput, Preview, Remove, Retry, Root, Trigger, isVideoFile, useUplofile };
 export type { ImageUploaderContextValue, ItemActions, RootProps, UploadFileItem, UploadResult, UploadStatus };
 //# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.mts","sources":["../src/components/dropzone.tsx","../src/types.ts","../src/components/preview.tsx","../src/context.tsx","../src/components/trigger.tsx","../src/hook.ts"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport { HTMLAttributes } from \"react\";\n\nimport { useUplofile } from \"../hook\";\n\nexport const Dropzone = ({\n asChild,\n ...rest\n}: { asChild?: boolean } & HTMLAttributes<HTMLElement>) => {\n const { getDropzoneProps } = useUplofile();\n const Comp: any = asChild ? Slot : \"div\";\n return <Comp data-part=\"dropzone\" {...getDropzoneProps()} {...rest} />;\n};\n","import type {\n ChangeEvent,\n DragEvent,\n PropsWithChildren,\n RefObject,\n} from \"react\";\n\nexport type UploadStatus =\n \| \"idle\"\n \| \"uploading\"\n \| \"done\"\n \| \"error\"\n \| \"canceled\"\n \| \"removing\";\n\nexport type UploadFileItem = {\n uid: string;\n id?: string;\n name: string;\n url?: string;\n previewUrl?: string;\n file?: File;\n status: UploadStatus;\n progress?: number;\n error?: string;\n data?: any;\n};\n\nexport type UploadResult = { url: string; id?: string };\n\nexport type RootProps = PropsWithChildren<{\n multiple?: boolean;\n initial?: Array<Pick<UploadFileItem, \"uid\" \| \"id\" \| \"name\" \| \"url\">>;\n /*\n optimistic (default): remove from UI immediately, call onRemove in the background; if it fails, restore the item and show error.\n * strict: call onRemove first; only remove from UI if it succeeds.\n /\n removeMode?: \"optimistic\" \| \"strict\";\n name?: string;\n maxCount?: number;\n disabled?: boolean;\n accept?: string;\n onChange?: (items: UploadFileItem[]) => Promise<void> \| void;\n upload: (\n file: File,\n signal: AbortSignal,\n setProgress?: (pct: number) => void,\n ) => Promise<UploadResult>;\n onRemove?: (item: UploadFileItem, signal: AbortSignal) => Promise<void \| any>;\n}>;\n\nexport type ItemActions = {\n cancel: (uid: string) => void;\n remove: (uid: string) => void;\n retry: (uid: string) => void;\n};\n\nexport type ImageUploaderContextValue = {\n items: UploadFileItem[];\n disabled?: boolean;\n multiple: boolean;\n accept: string;\n actions: ItemActions;\n openFileDialog: () => void;\n fileInputProps: {\n ref: RefObject<HTMLInputElement>;\n onChange: (e: ChangeEvent<HTMLInputElement>) => void;\n accept: string;\n multiple: boolean;\n disabled?: boolean;\n };\n getDropzoneProps: () => {\n role: string;\n tabIndex: number;\n onDrop: (e: DragEvent) => void;\n onDragOver: (e: DragEvent) => void;\n onKeyDown: (e: KeyboardEvent) => void;\n \"data-disabled\"?: string;\n \"data-multiple\"?: string;\n };\n hiddenInputValue: string;\n name: string;\n};\n\nexport type TriggerRenderProps = {\n items: UploadFileItem[];\n isUploading: boolean;\n uploadingCount: number;\n doneCount: number;\n errorCount: number;\n totalProgress?: number;\n open: () => void;\n};\n\nexport type PreviewRenderProps = {\n items: UploadFileItem[];\n actions: ItemActions;\n};\n","import { Slot } from \"@radix-ui/react-slot\";\nimport React, { ButtonHTMLAttributes } from \"react\";\n\nimport { useUplofile } from \"../hook\";\n\nimport type { PreviewRenderProps } from \"../types\";\n\ntype Props = {\n render?: (api: PreviewRenderProps) => React.ReactNode;\n};\n\nexport const Preview = ({ render }: Props) => {\n const { items, actions } = useUplofile();\n\n if (render && typeof render === \"function\") return render({ items, actions });\n\n return (\n <div data-part=\"preview\" className={\"uplofile-preview\"}>\n <div className=\"uplofile-preview__wrapper grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4\">\n {items.map((item) => (\n <div\n key={item.uid}\n onClick={(e) => e.stopPropagation()}\n className=\"uplofile-preview__item relative overflow-hidden rounded-xl border size-32\"\n data-state={item.status}\n >\n {item.url \|\| item.previewUrl ? (\n <img\n src={item.url \|\| item.previewUrl}\n alt={item.name}\n className=\"uplofile-preview__image size-full object-cover\"\n />\n ) : (\n <div className=\"uplofile-preview__no-preview flex h-32 w-full items-center justify-center text-xs text-gray-500\">\n No preview\n </div>\n )}\n {item.status === \"uploading\" && (\n <div className=\"uplofile-preview__progress absolute bottom-0 left-0 right-0 h-1 bg-gray-200\">\n <div\n className=\"uplofile-preview__progress-bar h-full bg-black/80\"\n style={{\n width: `${Math.max(0, Math.min(100, item.progress ?? 0))}%`,\n }}\n />\n </div>\n )}\n <div className=\"uplofile-preview__actions absolute inset-x-0 bottom-0 flex justify-end gap-2 bg-gradient-to-t from-black/60 to-transparent p-2\">\n {item.status === \"uploading\" && (\n <button\n type=\"button\"\n className=\"uplofile-preview__button uplofile-preview__button--cancel rounded-xl bg-black/50 px-2 py-1 text-xs text-white\"\n onClick={() => actions.cancel(item.uid)}\n >\n Cancel\n </button>\n )}\n {(item.status === \"error\" \|\| item.status === \"canceled\") && (\n <button\n type=\"button\"\n className=\"uplofile-preview__button uplofile-preview__button--retry rounded-xl bg-black/50 px-2 py-1 text-xs text-white\"\n onClick={() => actions.retry(item.uid)}\n >\n Retry\n </button>\n )}\n <button\n type=\"button\"\n className=\"uplofile-preview__button uplofile-preview__button--remove rounded-xl bg-black/50 px-2 py-1 text-xs text-white\"\n onClick={() => actions.remove(item.uid)}\n disabled={item.status === \"removing\"}\n >\n {item.status === \"removing\" ? \"Removing...\" : \"Remove\"}\n </button>\n </div>\n </div>\n ))}\n </div>\n </div>\n );\n};\n\nexport const HiddenInput = ({ name }: { name?: string }) => {\n const { hiddenInputValue, name: defaultName } = useUplofile();\n return (\n <input type=\"hidden\" name={name ?? defaultName} value={hiddenInputValue} />\n );\n};\n\ntype ButtonProps = {\n uid: string;\n alwaysVisible?: boolean;\n asChild?: boolean;\n} & ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const Cancel = ({\n uid,\n asChild,\n alwaysVisible = false,\n ...rest\n}: ButtonProps) => {\n const { actions, items } = useUplofile();\n const isUploading = items.find((i) => i.uid === uid)?.status === \"uploading\";\n const Comp: any = asChild ? Slot : \"button\";\n\n if (!isUploading && !alwaysVisible) return null;\n\n return (\n <Comp\n onClick={(e: { stopPropagation: () => void }) => {\n e.stopPropagation();\n actions.cancel(uid);\n }}\n {...rest}\n />\n );\n};\n\nexport const Retry = ({ uid, asChild, ...rest }: ButtonProps) => {\n const { actions } = useUplofile();\n const Comp: any = asChild ? Slot : \"button\";\n return (\n <Comp\n onClick={(e: { stopPropagation: () => void }) => {\n e.stopPropagation();\n actions.retry(uid);\n }}\n {...rest}\n />\n );\n};\n\nexport const Remove = ({ uid, asChild, ...rest }: ButtonProps) => {\n const { actions } = useUplofile();\n const Comp: any = asChild ? Slot : \"button\";\n return (\n <Comp\n onClick={(e: { stopPropagation: () => void }) => {\n e.stopPropagation();\n actions.remove(uid);\n }}\n {...rest}\n />\n );\n};\n","import type { DragEvent, RefObject } from \"react\";\nimport React, {\n createContext,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport type {\n ImageUploaderContextValue,\n ItemActions,\n RootProps,\n UploadFileItem,\n} from \"./types\";\nimport { uid } from \"./utils\";\n\nexport const UploaderCtx = createContext<ImageUploaderContextValue \| null>(\n null,\n);\n\nexport const Root = ({\n multiple = true,\n initial = [],\n onChange,\n upload,\n removeMode = \"optimistic\",\n onRemove,\n accept = \"image/\",\n name = \"images\",\n maxCount,\n disabled,\n children,\n}: RootProps) => {\n const [items, setItems] = useState<UploadFileItem[]>([]);\n const controllers = useRef(new Map<string, AbortController>());\n const removeControllers = useRef(new Map<string, AbortController>());\n const inputRef = useRef<HTMLInputElement \| null>(null);\n const hasHydratedInitialRef = useRef(false);\n\n // Hydrate initial items from the server and keep them marked as done\n useEffect(() => {\n if (hasHydratedInitialRef.current) return;\n const arr = initial ?? [];\n if (!Array.isArray(arr) \|\| arr.length === 0) return;\n\n const mapped: UploadFileItem[] = arr.map((it) => {\n return {\n uid: it.uid \|\| it.id,\n id: it.id,\n name: it.name,\n url: it.url,\n status: \"done\",\n } as UploadFileItem;\n });\n\n // Only hydrate if the user hasn't already added/modified items locally\n setItems((prev) => (prev.length === 0 ? mapped : prev));\n hasHydratedInitialRef.current = true;\n }, [initial]);\n\n const hiddenInputValue = useMemo(() => {\n const done = items.filter((i) => i.status === \"done\" && i.url);\n return JSON.stringify(\n done.map(\n ({\n uid: _u,\n previewUrl: _p,\n file: _f,\n status: _s,\n progress: _pr,\n error: _e,\n ...rest\n }) => rest,\n ),\n );\n }, [items]);\n\n const emitChange = useCallback(\n (\n next: UploadFileItem[] \| ((prev: UploadFileItem[]) => UploadFileItem[]),\n ) => {\n setItems((prev) => {\n const nextState =\n typeof next === \"function\" ? (next as any)(prev) : next;\n if (onChange) Promise.resolve(onChange(nextState)).catch(() => {});\n return nextState;\n });\n },\n [onChange],\n );\n\n const startUpload = useCallback(\n async (item: UploadFileItem) => {\n if (!item.file) return;\n const controller = new AbortController();\n controllers.current.set(item.uid, controller);\n\n const setProgress = (pct: number) => {\n emitChange((items) =>\n items.map((it) =>\n it.uid === item.uid\n ? { ...it, progress: Math.max(0, Math.min(100, pct)) }\n : it,\n ),\n );\n };\n\n emitChange((items) =>\n items.map((it) =>\n it.uid === item.uid\n ? { ...it, status: \"uploading\", error: undefined }\n : it,\n ),\n );\n\n try {\n const result = await upload(item.file, controller.signal, setProgress);\n\n emitChange((items) =>\n items.map((it) => {\n if (it.uid !== item.uid) return it;\n // Revoke the local objectURL preview to avoid memory leaks\n if (it.previewUrl && it.previewUrl.startsWith(\"blob:\")) {\n try {\n URL.revokeObjectURL(it.previewUrl);\n } catch {\n /fail silently/\n }\n }\n const serverPreview = (result as any)?.preview \|\| result.url;\n return {\n ...it,\n status: \"done\",\n url: result.url,\n id: result.id,\n previewUrl: serverPreview,\n progress: 100,\n };\n }),\n );\n } catch (err: any) {\n const wasAborted = controller.signal.aborted;\n emitChange((items) =>\n items.map((it) =>\n it.uid === item.uid\n ? {\n ...it,\n status: wasAborted ? \"canceled\" : \"error\",\n error: wasAborted\n ? undefined\n : err?.message \|\| \"Upload failed\",\n }\n : it,\n ),\n );\n } finally {\n controllers.current.delete(item.uid);\n }\n },\n [emitChange, upload],\n );\n\n const selectFiles = useCallback(\n (files: FileList \| null) => {\n if (!files \|\| files.length === 0) return;\n const selected = Array.from(files);\n const remaining = maxCount\n ? Math.max(\n 0,\n maxCount - items.filter((i) => i.status !== \"canceled\").length,\n )\n : undefined;\n const toUse =\n typeof remaining === \"number\" ? selected.slice(0, remaining) : selected;\n\n const newItems: UploadFileItem[] = toUse.map((file) => ({\n uid: uid(),\n name: file.name,\n file,\n previewUrl: URL.createObjectURL(file),\n status: \"idle\",\n progress: 0,\n }));\n\n emitChange([...items, ...newItems]);\n newItems.forEach((it) => startUpload(it));\n },\n [emitChange, items, maxCount, startUpload],\n );\n\n const onInputChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n selectFiles(e.target.files);\n e.currentTarget.value = \"\";\n },\n [selectFiles],\n );\n\n const onDrop = useCallback(\n (e: DragEvent) => {\n e.preventDefault();\n if (disabled) return;\n selectFiles(e.dataTransfer.files);\n },\n [disabled, selectFiles],\n );\n\n const onDragOver = useCallback((e: DragEvent) => e.preventDefault(), []);\n\n const actions: ItemActions = useMemo(\n () => ({\n cancel: (uidStr: string) => {\n const ctrl = controllers.current.get(uidStr);\n ctrl?.abort();\n },\n remove: async (uidStr: string) => {\n const item = items.find((i) => i.uid === uidStr);\n if (!item) return;\n\n // abort any in-flight upload first\n controllers.current.get(uidStr)?.abort();\n\n // If no server-side removal needed or not uploaded yet, just remove\n if (!onRemove \|\| item.status !== \"done\") {\n emitChange((list) => list.filter((i) => i.uid !== uidStr));\n return;\n }\n\n const ctrl = new AbortController();\n removeControllers.current.set(uidStr, ctrl);\n\n if (removeMode === \"optimistic\") {\n const prev = items;\n // remove from UI immediately\n emitChange((list) => list.filter((i) => i.uid !== uidStr));\n try {\n await onRemove(item, ctrl.signal);\n } catch {\n // rollback UI if server delete fails\n emitChange(prev);\n } finally {\n removeControllers.current.delete(uidStr);\n }\n } else {\n // strict: mark as removing, wait for API, then remove\n emitChange((list) =>\n list.map((it) =>\n it.uid === uidStr ? { ...it, status: \"removing\" as const } : it,\n ),\n );\n try {\n await onRemove(item, ctrl.signal);\n emitChange((list) => list.filter((i) => i.uid !== uidStr));\n } catch {\n // revert to done if delete fails\n emitChange((list) =>\n list.map((it) =>\n it.uid === uidStr ? { ...it, status: \"done\" as const } : it,\n ),\n );\n } finally {\n removeControllers.current.delete(uidStr);\n }\n }\n },\n retry: (uidStr: string) => {\n const item = items.find((i) => i.uid === uidStr);\n if (!item) return;\n if (item.file) {\n void startUpload({\n ...item,\n status: \"idle\",\n error: undefined,\n progress: 0,\n });\n }\n },\n }),\n [emitChange, items, onRemove, removeMode, startUpload],\n );\n\n useEffect(\n () => () => {\n items.forEach((i) => i.previewUrl && URL.revokeObjectURL(i.previewUrl));\n controllers.current.forEach((c) => c.abort());\n },\n [],\n );\n\n const ctx: ImageUploaderContextValue = {\n items,\n disabled,\n multiple,\n accept,\n actions,\n openFileDialog: () => inputRef.current?.click(),\n fileInputProps: {\n ref: inputRef as RefObject<HTMLInputElement>,\n onChange: onInputChange,\n accept,\n multiple,\n disabled,\n },\n getDropzoneProps: () => ({\n role: \"button\",\n tabIndex: 0,\n onDrop,\n onDragOver,\n onKeyDown: (e) => {\n if (disabled) return;\n if (e.key === \"Enter\" \|\| e.key === \" \") inputRef.current?.click();\n },\n \"data-disabled\": disabled ? \"\" : undefined,\n \"data-multiple\": multiple ? \"\" : undefined,\n }),\n hiddenInputValue,\n name,\n };\n\n return (\n <UploaderCtx.Provider value={ctx}>\n <div data-part=\"root\">\n <input type=\"file\" hidden {...ctx.fileInputProps} />\n {children}\n </div>\n </UploaderCtx.Provider>\n );\n};\n","import { Slot } from \"@radix-ui/react-slot\";\nimport React, { PropsWithChildren } from \"react\";\n\nimport { useUplofile } from \"../hook\";\nimport type { TriggerRenderProps } from \"../types\";\n\nexport const Trigger = ({\n asChild,\n children,\n render,\n ...rest\n}: PropsWithChildren<\n {\n asChild?: boolean;\n render?: (api: TriggerRenderProps) => React.ReactNode;\n children?: React.ReactNode \| ((api: TriggerRenderProps) => React.ReactNode);\n } & React.HTMLAttributes<HTMLElement>\n>) => {\n const { openFileDialog, disabled, items } = useUplofile();\n const Comp: any = asChild ? Slot : \"button\";\n\n const uploading = items.filter((i) => i.status === \"uploading\");\n const uploadingCount = uploading.length;\n const doneCount = items.filter((i) => i.status === \"done\").length;\n const errorCount = items.filter((i) => i.status === \"error\").length;\n const totalProgress = uploadingCount\n ? Math.round(\n uploading.reduce(\n (acc, it) =>\n acc + (typeof it.progress === \"number\" ? it.progress : 0),\n 0,\n ) / uploadingCount,\n )\n : undefined;\n\n const api: TriggerRenderProps = {\n items,\n isUploading: uploadingCount > 0,\n uploadingCount,\n doneCount,\n errorCount,\n totalProgress,\n open: openFileDialog,\n };\n\n return (\n <Comp\n type={asChild ? undefined : \"button\"}\n aria-disabled={disabled}\n data-part=\"trigger\"\n onClick={(e: any) => {\n if (disabled) return;\n (rest as any).onClick?.(e);\n openFileDialog();\n }}\n {...rest}\n >\n {render ? render(api) : children}\n </Comp>\n );\n};\n","import { useContext } from \"react\";\n\nimport { UploaderCtx } from \"./context\";\n\nexport const useUplofile = () => {\n const ctx = useContext(UploaderCtx);\n if (!ctx)\n throw new Error(\n \"useUplofile hook must be used within <Uplofile.Root>\",\n );\n return ctx;\n};\n"],"names":[],"mappings":";;;AACO;AACP;AACA;;ACFO;AACA;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;AACP;AACA;AACA;AACO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;AACP;AACA;AACA;AACA;AACO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;AACP;AACA;AACA;;AC3EA;AACA;AACA;AACO;AACA;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACO;AACA;AACA;;ACbA;;ACDA;AACP;AACA;AACA;AACA;;ACNO;;;"}
1	+ {"version":3,"file":"index.d.mts","sources":["../src/components/dropzone.tsx","../src/types.ts","../src/components/preview.tsx","../src/context.tsx","../src/components/trigger.tsx","../src/hook.ts","../src/utils.ts"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport { HTMLAttributes } from \"react\";\n\nimport { useUplofile } from \"../hook\";\n\nexport const Dropzone = ({\n asChild,\n ...rest\n}: { asChild?: boolean } & HTMLAttributes<HTMLElement>) => {\n const { getDropzoneProps } = useUplofile();\n const Comp: any = asChild ? Slot : \"div\";\n return <Comp data-part=\"dropzone\" {...getDropzoneProps()} {...rest} />;\n};\n","import type {\n ChangeEvent,\n DragEvent,\n PropsWithChildren,\n RefObject,\n} from \"react\";\n\nexport type UploadStatus =\n \| \"idle\"\n \| \"uploading\"\n \| \"done\"\n \| \"error\"\n \| \"canceled\"\n \| \"removing\";\n\nexport type UploadFileItem = {\n uid: string;\n id?: string;\n name: string;\n url?: string;\n previewUrl?: string;\n file?: File;\n status: UploadStatus;\n progress?: number;\n error?: string;\n data?: any;\n};\n\nexport type UploadResult = { url: string; id?: string };\n\nexport type RootProps = PropsWithChildren<{\n multiple?: boolean;\n initial?: Array<Pick<UploadFileItem, \"uid\" \| \"id\" \| \"name\" \| \"url\">>;\n /*\n optimistic (default): remove from UI immediately, call onRemove in the background; if it fails, restore the item and show error.\n * strict: call onRemove first; only remove from UI if it succeeds.\n /\n removeMode?: \"optimistic\" \| \"strict\";\n name?: string;\n maxCount?: number;\n disabled?: boolean;\n accept?: string;\n onChange?: (items: UploadFileItem[]) => Promise<void> \| void;\n upload: (\n file: File,\n signal: AbortSignal,\n setProgress?: (pct: number) => void,\n ) => Promise<UploadResult>;\n onRemove?: (item: UploadFileItem, signal: AbortSignal) => Promise<void \| any>;\n}>;\n\nexport type ItemActions = {\n cancel: (uid: string) => void;\n remove: (uid: string) => void;\n retry: (uid: string) => void;\n};\n\nexport type ImageUploaderContextValue = {\n items: UploadFileItem[];\n setItems: (items: UploadFileItem[]) => void;\n disabled?: boolean;\n multiple: boolean;\n accept: string;\n actions: ItemActions;\n openFileDialog: () => void;\n fileInputProps: {\n ref: RefObject<HTMLInputElement>;\n onChange: (e: ChangeEvent<HTMLInputElement>) => void;\n accept: string;\n multiple: boolean;\n disabled?: boolean;\n };\n getDropzoneProps: () => {\n role: string;\n tabIndex: number;\n onDrop: (e: DragEvent) => void;\n onDragOver: (e: DragEvent) => void;\n onKeyDown: (e: KeyboardEvent) => void;\n \"data-disabled\"?: string;\n \"data-multiple\"?: string;\n };\n hiddenInputValue: string;\n name: string;\n};\n\nexport type TriggerRenderProps = {\n items: UploadFileItem[];\n isUploading: boolean;\n uploadingCount: number;\n doneCount: number;\n errorCount: number;\n totalProgress?: number;\n open: () => void;\n};\n\nexport type PreviewRenderProps = {\n items: UploadFileItem[];\n setItems: (items: UploadFileItem[]) => void;\n actions: ItemActions;\n};\n","import { Slot } from \"@radix-ui/react-slot\";\nimport React, { ButtonHTMLAttributes } from \"react\";\n\nimport { useUplofile } from \"../hook\";\nimport { isVideoFile } from \"../utils\";\n\nimport type { PreviewRenderProps } from \"../types\";\n\ntype Props = {\n render?: (api: PreviewRenderProps) => React.ReactNode;\n};\n\nexport const Preview = ({ render }: Props) => {\n const { items, actions, setItems } = useUplofile();\n\n if (render && typeof render === \"function\")\n return render({ items, setItems, actions });\n\n if (items.length === 0) return null;\n\n return (\n <div data-part=\"preview\" className=\"uplofile-preview\">\n <div className=\"uplofile-preview__wrapper grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5\">\n {items.map((item) => (\n <div\n key={item.uid}\n onClick={(e) => e.stopPropagation()}\n className={`uplofile-preview__item group relative aspect-square overflow-hidden rounded-xl border bg-muted/5 transition-all ${\n item.status === \"error\"\n ? \"border-red-200 bg-red-50/30 hover:shadow-md\"\n : \"hover:shadow-md hover:ring-2 hover:ring-primary/20\"\n }`}\n data-state={item.status}\n >\n {item.status === \"error\" && (\n <div className=\"absolute right-2 top-2 z-10 flex size-5 items-center justify-center rounded-full bg-red-500 text-white shadow-sm transition-opacity group-hover:opacity-0\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"3\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\" />\n <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\" />\n </svg>\n </div>\n )}\n {isVideoFile(item) ? (\n <video\n src={item.url \|\| item.previewUrl}\n className=\"uplofile-preview__video w-full h-full object-cover transition-transform duration-500 group-hover:scale-110\"\n muted\n playsInline\n onMouseOver={(e) => e.currentTarget.play()}\n onMouseOut={(e) => e.currentTarget.pause()}\n />\n ) : item.url \|\| item.previewUrl ? (\n <img\n src={item.url \|\| item.previewUrl}\n alt={item.name}\n className=\"uplofile-preview__image w-full h-full object-cover transition-transform duration-500 group-hover:scale-110\"\n />\n ) : (\n <div className=\"uplofile-preview__no-preview flex w-full h-full flex-col items-center justify-center gap-2 text-muted-foreground/40 bg-muted/20\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"28\"\n height=\"28\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n className=\"opacity-40\"\n >\n <rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\" />\n <circle cx=\"9\" cy=\"9\" r=\"2\" />\n <path d=\"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21\" />\n </svg>\n <span className=\"max-w-[80%] truncate text-[10px] font-bold uppercase tracking-widest opacity-60\">\n {item.name.split(\".\").pop()}\n </span>\n </div>\n )}\n\n {item.status === \"uploading\" && (\n <div className=\"uplofile-preview__uploading-overlay absolute inset-0 z-20 flex flex-col items-center justify-center bg-black/60 backdrop-blur-[2px]\">\n <svg\n className=\"mb-2 size-6 animate-spin text-white\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n >\n <circle\n className=\"opacity-25\"\n cx=\"12\"\n cy=\"12\"\n r=\"10\"\n stroke=\"currentColor\"\n strokeWidth=\"4\"\n />\n <path\n className=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n />\n </svg>\n <div className=\"uplofile-preview__progress h-1 w-12 overflow-hidden rounded-full bg-white/20\">\n <div\n className=\"uplofile-preview__progress-bar h-full bg-white transition-all duration-300\"\n style={{\n width: `${Math.max(0, Math.min(100, item.progress ?? 0))}%`,\n }}\n />\n </div>\n </div>\n )}\n\n <div\n className={`uplofile-preview__overlay absolute inset-0 z-30 flex flex-col items-center justify-center gap-2 transition-all duration-200 group-hover:opacity-100 ${\n item.status === \"error\"\n ? \"bg-red-950/70 opacity-0 backdrop-blur-[1px]\"\n : \"bg-black/40 opacity-0\"\n }`}\n >\n <div className=\"flex gap-2\">\n {item.status === \"uploading\" && (\n <button\n type=\"button\"\n className=\"uplofile-preview__button uplofile-preview__button--cancel flex size-9 items-center justify-center rounded-xl bg-white/90 text-black shadow-lg transition-transform hover:scale-110 active:scale-95\"\n onClick={() => actions.cancel(item.uid)}\n title=\"Cancel\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\" />\n <line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\" />\n </svg>\n </button>\n )}\n {(item.status === \"error\" \|\| item.status === \"canceled\") && (\n <button\n type=\"button\"\n className=\"uplofile-preview__button uplofile-preview__button--retry flex size-9 items-center justify-center rounded-xl text-primary-foreground shadow-lg transition-transform hover:scale-110 active:scale-95\"\n onClick={() => actions.retry(item.uid)}\n title=\"Retry\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <path d=\"M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8\" />\n <path d=\"M21 3v5h-5\" />\n </svg>\n </button>\n )}\n <button\n type=\"button\"\n className={`uplofile-preview__button uplofile-preview__button--remove flex size-9 items-center justify-center rounded-xl transition-all hover:scale-110 active:scale-95 text-red-600`}\n onClick={() => actions.remove(item.uid)}\n disabled={item.status === \"removing\"}\n title=\"Remove\"\n >\n {item.status === \"removing\" ? (\n <svg\n className=\"size-5 animate-spin text-inherit\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n >\n <circle\n className=\"opacity-25\"\n cx=\"12\"\n cy=\"12\"\n r=\"10\"\n stroke=\"currentColor\"\n strokeWidth=\"4\"\n ></circle>\n <path\n className=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n ></path>\n </svg>\n ) : (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <path d=\"M3 6h18\" />\n <path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\" />\n <path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\" />\n </svg>\n )}\n </button>\n </div>\n {item.status === \"error\" && (\n <span className=\"mt-1 px-3 text-center text-[10px] font-bold text-white drop-shadow-md line-clamp-2\">\n {item.error \|\| \"Upload failed\"}\n </span>\n )}\n </div>\n </div>\n ))}\n </div>\n </div>\n );\n};\n\nexport const HiddenInput = ({ name }: { name?: string }) => {\n const { hiddenInputValue, name: defaultName } = useUplofile();\n return (\n <input type=\"hidden\" name={name ?? defaultName} value={hiddenInputValue} />\n );\n};\n\ntype ButtonProps = {\n uid: string;\n alwaysVisible?: boolean;\n asChild?: boolean;\n} & ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const Cancel = ({\n uid,\n asChild,\n alwaysVisible = false,\n ...rest\n}: ButtonProps) => {\n const { actions, items } = useUplofile();\n const isUploading = items.find((i) => i.uid === uid)?.status === \"uploading\";\n const Comp: any = asChild ? Slot : \"button\";\n\n if (!isUploading && !alwaysVisible) return null;\n\n return (\n <Comp\n onClick={(e: { stopPropagation: () => void }) => {\n e.stopPropagation();\n actions.cancel(uid);\n }}\n {...rest}\n />\n );\n};\n\nexport const Retry = ({ uid, asChild, ...rest }: ButtonProps) => {\n const { actions } = useUplofile();\n const Comp: any = asChild ? Slot : \"button\";\n return (\n <Comp\n onClick={(e: { stopPropagation: () => void }) => {\n e.stopPropagation();\n actions.retry(uid);\n }}\n {...rest}\n />\n );\n};\n\nexport const Remove = ({ uid, asChild, ...rest }: ButtonProps) => {\n const { actions } = useUplofile();\n const Comp: any = asChild ? Slot : \"button\";\n return (\n <Comp\n onClick={(e: { stopPropagation: () => void }) => {\n e.stopPropagation();\n actions.remove(uid);\n }}\n {...rest}\n />\n );\n};\n","import type { DragEvent, RefObject } from \"react\";\nimport React, {\n createContext,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport type {\n ImageUploaderContextValue,\n ItemActions,\n RootProps,\n UploadFileItem,\n} from \"./types\";\nimport { uid } from \"./utils\";\n\nexport const UploaderCtx = createContext<ImageUploaderContextValue \| null>(\n null,\n);\n\nexport const Root = ({\n multiple = true,\n initial = [],\n onChange,\n upload,\n removeMode = \"optimistic\",\n onRemove,\n accept = \"image/\",\n name = \"images\",\n maxCount,\n disabled,\n children,\n}: RootProps) => {\n const [items, setItems] = useState<UploadFileItem[]>([]);\n const controllers = useRef(new Map<string, AbortController>());\n const removeControllers = useRef(new Map<string, AbortController>());\n const inputRef = useRef<HTMLInputElement \| null>(null);\n const hasHydratedInitialRef = useRef(false);\n\n // Hydrate initial items from the server and keep them marked as done\n useEffect(() => {\n if (hasHydratedInitialRef.current) return;\n const arr = initial ?? [];\n if (!Array.isArray(arr) \|\| arr.length === 0) return;\n\n const mapped: UploadFileItem[] = arr.map((it) => {\n return {\n uid: it.uid \|\| it.id,\n id: it.id,\n name: it.name,\n url: it.url,\n status: \"done\",\n } as UploadFileItem;\n });\n\n // Only hydrate if the user hasn't already added/modified items locally\n setItems((prev) => (prev.length === 0 ? mapped : prev));\n hasHydratedInitialRef.current = true;\n }, [initial]);\n\n const hiddenInputValue = useMemo(() => {\n const done = items.filter((i) => i.status === \"done\" && i.url);\n return JSON.stringify(\n done.map(\n ({\n uid: _u,\n previewUrl: _p,\n file: _f,\n status: _s,\n progress: _pr,\n error: _e,\n ...rest\n }) => rest,\n ),\n );\n }, [items]);\n\n const emitChange = useCallback(\n (\n next: UploadFileItem[] \| ((prev: UploadFileItem[]) => UploadFileItem[]),\n ) => {\n setItems((prev) => {\n const nextState =\n typeof next === \"function\" ? (next as any)(prev) : next;\n if (onChange) Promise.resolve(onChange(nextState)).catch(() => {});\n return nextState;\n });\n },\n [onChange],\n );\n\n const startUpload = useCallback(\n async (item: UploadFileItem) => {\n if (!item.file) return;\n const controller = new AbortController();\n controllers.current.set(item.uid, controller);\n\n const setProgress = (pct: number) => {\n emitChange((items) =>\n items.map((it) =>\n it.uid === item.uid\n ? { ...it, progress: Math.max(0, Math.min(100, pct)) }\n : it,\n ),\n );\n };\n\n emitChange((items) =>\n items.map((it) =>\n it.uid === item.uid\n ? { ...it, status: \"uploading\", error: undefined }\n : it,\n ),\n );\n\n try {\n const result = await upload(item.file, controller.signal, setProgress);\n\n emitChange((items) =>\n items.map((it) => {\n if (it.uid !== item.uid) return it;\n // Revoke the local objectURL preview to avoid memory leaks\n if (it.previewUrl && it.previewUrl.startsWith(\"blob:\")) {\n try {\n URL.revokeObjectURL(it.previewUrl);\n } catch {\n /fail silently/\n }\n }\n const serverPreview = (result as any)?.preview \|\| result.url;\n return {\n ...it,\n status: \"done\",\n url: result.url,\n id: result.id,\n previewUrl: serverPreview,\n progress: 100,\n };\n }),\n );\n } catch (err: any) {\n const wasAborted = controller.signal.aborted;\n emitChange((items) =>\n items.map((it) =>\n it.uid === item.uid\n ? {\n ...it,\n status: wasAborted ? \"canceled\" : \"error\",\n error: wasAborted\n ? undefined\n : err?.message \|\| \"Upload failed\",\n }\n : it,\n ),\n );\n } finally {\n controllers.current.delete(item.uid);\n }\n },\n [emitChange, upload],\n );\n\n const selectFiles = useCallback(\n (files: FileList \| null) => {\n if (!files \|\| files.length === 0) return;\n const selected = Array.from(files);\n const remaining = maxCount\n ? Math.max(\n 0,\n maxCount - items.filter((i) => i.status !== \"canceled\").length,\n )\n : undefined;\n const toUse =\n typeof remaining === \"number\" ? selected.slice(0, remaining) : selected;\n\n const newItems: UploadFileItem[] = toUse.map((file) => ({\n uid: uid(),\n name: file.name,\n file,\n previewUrl: URL.createObjectURL(file),\n status: \"idle\",\n progress: 0,\n }));\n\n emitChange([...items, ...newItems]);\n newItems.forEach((it) => startUpload(it));\n },\n [emitChange, items, maxCount, startUpload],\n );\n\n const onInputChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n selectFiles(e.target.files);\n e.currentTarget.value = \"\";\n },\n [selectFiles],\n );\n\n const onDrop = useCallback(\n (e: DragEvent) => {\n e.preventDefault();\n if (disabled) return;\n selectFiles(e.dataTransfer.files);\n },\n [disabled, selectFiles],\n );\n\n const onDragOver = useCallback((e: DragEvent) => e.preventDefault(), []);\n\n const actions: ItemActions = useMemo(\n () => ({\n cancel: (uidStr: string) => {\n const ctrl = controllers.current.get(uidStr);\n ctrl?.abort();\n },\n remove: async (uidStr: string) => {\n const item = items.find((i) => i.uid === uidStr);\n if (!item) return;\n\n // abort any in-flight upload first\n controllers.current.get(uidStr)?.abort();\n\n // If no server-side removal needed or not uploaded yet, just remove\n if (!onRemove \|\| item.status !== \"done\") {\n emitChange((list) => list.filter((i) => i.uid !== uidStr));\n return;\n }\n\n const ctrl = new AbortController();\n removeControllers.current.set(uidStr, ctrl);\n\n if (removeMode === \"optimistic\") {\n const prev = items;\n // remove from UI immediately\n emitChange((list) => list.filter((i) => i.uid !== uidStr));\n try {\n await onRemove(item, ctrl.signal);\n } catch {\n // rollback UI if server delete fails\n emitChange(prev);\n } finally {\n removeControllers.current.delete(uidStr);\n }\n } else {\n // strict: mark as removing, wait for API, then remove\n emitChange((list) =>\n list.map((it) =>\n it.uid === uidStr ? { ...it, status: \"removing\" as const } : it,\n ),\n );\n try {\n await onRemove(item, ctrl.signal);\n emitChange((list) => list.filter((i) => i.uid !== uidStr));\n } catch {\n // revert to done if delete fails\n emitChange((list) =>\n list.map((it) =>\n it.uid === uidStr ? { ...it, status: \"done\" as const } : it,\n ),\n );\n } finally {\n removeControllers.current.delete(uidStr);\n }\n }\n },\n retry: (uidStr: string) => {\n const item = items.find((i) => i.uid === uidStr);\n if (!item) return;\n if (item.file) {\n void startUpload({\n ...item,\n status: \"idle\",\n error: undefined,\n progress: 0,\n });\n }\n },\n }),\n [emitChange, items, onRemove, removeMode, startUpload],\n );\n\n useEffect(\n () => () => {\n items.forEach((i) => i.previewUrl && URL.revokeObjectURL(i.previewUrl));\n controllers.current.forEach((c) => c.abort());\n },\n [],\n );\n\n const ctx: ImageUploaderContextValue = {\n items,\n disabled,\n multiple,\n accept,\n actions,\n openFileDialog: () => inputRef.current?.click(),\n fileInputProps: {\n ref: inputRef as RefObject<HTMLInputElement>,\n onChange: onInputChange,\n accept,\n multiple,\n disabled,\n },\n getDropzoneProps: () => ({\n role: \"button\",\n tabIndex: 0,\n onDrop,\n onDragOver,\n onKeyDown: (e) => {\n if (disabled) return;\n if (e.key === \"Enter\" \|\| e.key === \" \") inputRef.current?.click();\n },\n \"data-disabled\": disabled ? \"\" : undefined,\n \"data-multiple\": multiple ? \"\" : undefined,\n }),\n setItems,\n hiddenInputValue,\n name,\n };\n\n return (\n <UploaderCtx.Provider value={ctx}>\n <div data-part=\"root\">\n <input type=\"file\" hidden {...ctx.fileInputProps} />\n {children}\n </div>\n </UploaderCtx.Provider>\n );\n};\n","import { Slot } from \"@radix-ui/react-slot\";\nimport React, { PropsWithChildren } from \"react\";\n\nimport { useUplofile } from \"../hook\";\nimport type { TriggerRenderProps } from \"../types\";\n\nexport const Trigger = ({\n asChild,\n children,\n render,\n ...rest\n}: PropsWithChildren<\n {\n asChild?: boolean;\n render?: (api: TriggerRenderProps) => React.ReactNode;\n children?: React.ReactNode \| ((api: TriggerRenderProps) => React.ReactNode);\n } & React.HTMLAttributes<HTMLElement>\n>) => {\n const { openFileDialog, disabled, items } = useUplofile();\n const Comp: any = asChild ? Slot : \"button\";\n\n const uploading = items.filter((i) => i.status === \"uploading\");\n const uploadingCount = uploading.length;\n const doneCount = items.filter((i) => i.status === \"done\").length;\n const errorCount = items.filter((i) => i.status === \"error\").length;\n const totalProgress = uploadingCount\n ? Math.round(\n uploading.reduce(\n (acc, it) =>\n acc + (typeof it.progress === \"number\" ? it.progress : 0),\n 0,\n ) / uploadingCount,\n )\n : undefined;\n\n const api: TriggerRenderProps = {\n items,\n isUploading: uploadingCount > 0,\n uploadingCount,\n doneCount,\n errorCount,\n totalProgress,\n open: openFileDialog,\n };\n\n return (\n <Comp\n type={asChild ? undefined : \"button\"}\n aria-disabled={disabled}\n data-part=\"trigger\"\n onClick={(e: any) => {\n if (disabled) return;\n (rest as any).onClick?.(e);\n openFileDialog();\n }}\n {...rest}\n >\n {render ? render(api) : children}\n </Comp>\n );\n};\n","import { useContext } from \"react\";\n\nimport { UploaderCtx } from \"./context\";\n\nexport const useUplofile = () => {\n const ctx = useContext(UploaderCtx);\n if (!ctx)\n throw new Error(\n \"useUplofile hook must be used within <Uplofile.Root>\",\n );\n return ctx;\n};\n","export const uid = () =>\n Math.random().toString(36).slice(2, 10) + Date.now().toString(36).slice(-4);\n\nimport { UploadFileItem } from \"./types\";\n\nexport const isVideoFile = (item: UploadFileItem): boolean => {\n if (item.file) {\n return item.file.type.startsWith(\"video/\");\n }\n\n if (item.url) {\n const extension = item.url.split(\".\").pop()?.toLowerCase();\n const videoExtensions = [\"mp4\", \"webm\", \"ogg\", \"mov\", \"avi\", \"mkv\"];\n if (extension && videoExtensions.includes(extension)) {\n return true;\n }\n }\n\n if (item.name) {\n const extension = item.name.split(\".\").pop()?.toLowerCase();\n const videoExtensions = [\"mp4\", \"webm\", \"ogg\", \"mov\", \"avi\", \"mkv\"];\n if (extension && videoExtensions.includes(extension)) {\n return true;\n }\n }\n\n return false;\n};\n"],"names":[],"mappings":";;;AACO;AACP;AACA;;ACFO;AACA;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;AACP;AACA;AACA;AACO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;AACP;AACA;AACA;AACA;AACO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;AACP;AACA;AACA;AACA;;AC7EA;AACA;AACA;AACO;AACA;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACO;AACA;AACA;;ACbA;;ACDA;AACP;AACA;AACA;AACA;;ACNO;;ACEA;;;"}

package/dist/index.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+/// <reference lib="es2015.iterable" />
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React, { HTMLAttributes, PropsWithChildren, RefObject, ChangeEvent, DragEvent, ButtonHTMLAttributes } from 'react';
@@ -45,6 +46,7 @@ type ItemActions = {
 };
 type ImageUploaderContextValue = {
     items: UploadFileItem[];
+    setItems: (items: UploadFileItem[]) => void;
     disabled?: boolean;
     multiple: boolean;
     accept: string;
@@ -80,6 +82,7 @@ type TriggerRenderProps = {
 };
 type PreviewRenderProps = {
     items: UploadFileItem[];
+    setItems: (items: UploadFileItem[]) => void;
     actions: ItemActions;
 };
@@ -109,6 +112,8 @@ declare const Trigger: ({ asChild, children, render, ...rest }: PropsWithChildre
 declare const useUplofile: () => ImageUploaderContextValue;
-export { Cancel, Dropzone, HiddenInput, Preview, Remove, Retry, Root, Trigger, useUplofile };
+declare const isVideoFile: (item: UploadFileItem) => boolean;
+export { Cancel, Dropzone, HiddenInput, Preview, Remove, Retry, Root, Trigger, isVideoFile, useUplofile };
 export type { ImageUploaderContextValue, ItemActions, RootProps, UploadFileItem, UploadResult, UploadStatus };
 //# sourceMappingURL=index.d.ts.map