uplofile 2.2.1 → 2.2.2

package/dist/index.d.ts

@@ -34,6 +34,7 @@ type UplofileRootRef<TMeta = any> = {
     onDragOver: (e: DragEvent) => void;
     openFileDialog: () => void;
     actions: ItemActions;
+    onLoadingChange?: (isLoading: boolean) => void;
 };
 type BeforeUploadResult<TMeta = any> = boolean | Array<{
     valid: boolean;
@@ -56,6 +57,7 @@ type RootProps<TMeta = any> = PropsWithChildren<{
     accept?: string;
     beforeUpload?: (items: UploadFileItem<TMeta>[]) => BeforeUploadResult<TMeta> | Promise<BeforeUploadResult<TMeta>>;
     onChange?: (items: UploadFileItem<TMeta>[]) => Promise<void> | void;
+    onLoadingChange?: (isLoading: boolean) => void;
     upload: (file: File, signal: AbortSignal, setProgress?: (pct: number) => void) => Promise<UploadResult<TMeta>>;
     onRemove?: (item: UploadFileItem<TMeta>, signal: AbortSignal) => Promise<void | any>;
 }>;
@@ -111,8 +113,9 @@ type PreviewRenderProps<TMeta = any> = {
 
 type Props<TMeta = any> = {
     render?: (api: PreviewRenderProps<TMeta>) => React.ReactNode;
+    className?: string;
 };
-declare const Preview: <TMeta = any>({ render }: Props<TMeta>) => string | number | boolean | react_jsx_runtime.JSX.Element | Iterable<React.ReactNode> | null | undefined;
+declare const Preview: <TMeta = any>({ render, className, }: Props<TMeta>) => string | number | boolean | react_jsx_runtime.JSX.Element | Iterable<React.ReactNode> | null | undefined;
 declare const HiddenInput: ({ name }: {
     name?: string;
 }) => react_jsx_runtime.JSX.Element;
@@ -135,13 +138,14 @@ declare const Root: React.ForwardRefExoticComponent<{
     accept?: string;
     beforeUpload?: ((items: UploadFileItem<unknown>[]) => BeforeUploadResult<unknown> | Promise<BeforeUploadResult<unknown>>) | undefined;
     onChange?: ((items: UploadFileItem<unknown>[]) => Promise<void> | void) | undefined;
+    onLoadingChange?: (isLoading: boolean) => void;
     upload: (file: File, signal: AbortSignal, setProgress?: (pct: number) => void) => Promise<UploadResult<unknown>>;
     onRemove?: ((item: UploadFileItem<unknown>, signal: AbortSignal) => Promise<void | any>) | undefined;
 } & {
     children?: React.ReactNode | undefined;
 } & React.RefAttributes<UplofileRootRef<unknown>>>;
 
-declare const Trigger: <TMeta = any>({ asChild, children, render, ...rest }: PropsWithChildren<{
+declare const Trigger: <TMeta = any>({ asChild, children, render, onClick, ...rest }: PropsWithChildren<{
     asChild?: boolean;
     render?: (api: TriggerRenderProps<TMeta>) => React.ReactNode;
     children?: React.ReactNode | ((api: TriggerRenderProps<TMeta>) => React.ReactNode);

package/dist/index.mjs

@@ -115,13 +115,24 @@ const acceptsFile = (file, accept)=>{
 };
 
 const UploaderCtx = /*#__PURE__*/ createContext(null);
-const Root = /*#__PURE__*/ forwardRef(({ multiple = true, initial = [], onChange, upload, removeMode = "optimistic", onRemove, accept = "image/*", beforeUpload, name = "image", maxCount, disabled, children }, ref)=>{
+const Root = /*#__PURE__*/ forwardRef(({ multiple = true, initial = [], onChange, onLoadingChange, upload, removeMode = "optimistic", onRemove, accept = "image/*", beforeUpload, name = "image", maxCount, disabled, children }, ref)=>{
     const [items, setItems] = useState([]);
     const [isLoading, setIsLoading] = useState(Array.isArray(initial) ? initial.length > 0 : !!initial);
     const controllers = useRef(new Map());
     const removeControllers = useRef(new Map());
     const inputRef = useRef(null);
     const hasHydratedInitialRef = useRef(false);
+    const onLoadingChangeRef = useRef(onLoadingChange);
+    useEffect(()=>{
+        onLoadingChangeRef.current = onLoadingChange;
+    }, [
+        onLoadingChange
+    ]);
+    useEffect(()=>{
+        onLoadingChangeRef.current?.(isLoading);
+    }, [
+        isLoading
+    ]);
     // Hydrate initial items from the server and keep them marked as done
     useEffect(()=>{
         if (hasHydratedInitialRef.current) return;
@@ -139,8 +150,17 @@ const Root = /*#__PURE__*/ forwardRef(({ multiple = true, initial = [], onChange
                         meta: it.meta
                     };
                 });
-                // Only hydrate if the user hasn't already added/modified items locally
-                setItems((prev)=>prev.length === 0 ? mapped : prev);
+                // Append server items if user already added files while loading; avoid replacing
+                setItems((prev)=>{
+                    if (prev.length === 0) return mapped;
+                    const existing = new Set(prev.map((i)=>i.uid));
+                    const toAppend = mapped.filter((m)=>!existing.has(m.uid));
+                    if (toAppend.length === 0) return prev;
+                    return [
+                        ...prev,
+                        ...toAppend
+                    ];
+                });
                 hasHydratedInitialRef.current = true;
             } finally{
                 setIsLoading(false);
@@ -419,7 +439,13 @@ const Root = /*#__PURE__*/ forwardRef(({ multiple = true, initial = [], onChange
             onDrop,
             onDragOver,
             openFileDialog: ()=>inputRef.current?.click(),
-            actions
+            actions,
+            get onLoadingChange () {
+                return onLoadingChangeRef.current;
+            },
+            set onLoadingChange (callback){
+                onLoadingChangeRef.current = callback;
+            }
         }), [
         emitChange,
         items,
@@ -460,7 +486,7 @@ const Dropzone = ({ asChild, ...rest })=>{
     });
 };
 
-const Preview = ({ render })=>{
+const Preview = ({ render, className = "" })=>{
     const { items, actions, setItems, isLoading } = useUplofile();
     if (render && typeof render === "function") return render({
         items,
@@ -473,7 +499,10 @@ const Preview = ({ render })=>{
         "data-part": "preview",
         className: "uplofile-preview",
         children: /*#__PURE__*/ jsx("div", {
-            className: "uplofile-preview__wrapper grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5",
+            className: [
+                "uplofile-preview__wrapper grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5",
+                className
+            ].join(" ").trim(),
             children: items.map((item)=>/*#__PURE__*/ jsxs("div", {
                     onClick: (e)=>e.stopPropagation(),
                     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"}`,
@@ -773,7 +802,7 @@ const Remove = ({ uid, asChild, ...rest })=>{
     });
 };
 
-const Trigger = ({ asChild, children, render, ...rest })=>{
+const Trigger = ({ asChild, children, render, onClick, ...rest })=>{
     const { openFileDialog, disabled, items, isLoading } = useUplofile();
     const Comp = asChild ? Slot : "button";
     const uploading = items.filter((i)=>i.status === "uploading");
@@ -795,12 +824,13 @@ const Trigger = ({ asChild, children, render, ...rest })=>{
         type: asChild ? undefined : "button",
         "aria-disabled": disabled,
         "data-part": "trigger",
+        ...rest,
         onClick: (e)=>{
             if (disabled) return;
-            rest.onClick?.(e);
+            onClick?.(e);
+            if (e.defaultPrevented) return;
             openFileDialog();
         },
-        ...rest,
         children: render ? render(api) : children
     });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uplofile",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "description": "Composable file‑upload components for React.",
   "license": "MIT",
   "author": "Chris Josh <KristofaJosh>",