uplofile 2.1.0 → 2.2.1

package/README.md

@@ -7,11 +7,11 @@ Accessible, unstyled primitives for building your own upload UI — with drag‑
 
 ## Features
 
-- React 16+ compatible  
-- Drag‑and‑drop or click‑to‑upload  
-- Upload progress, plus cancel/retry/remove actions  
+- React 16+ compatible
+- Drag‑and‑drop or click‑to‑upload
+- Upload progress, plus cancel/retry/remove actions
 - **Custom Validation:** Use `beforeUpload` to validate files before they start uploading
-- Hidden input for form submissions  
+- Hidden input for form submissions
 - Unstyled — bring your own design
 
 ---
@@ -36,25 +36,25 @@ Import and use the components in your React component:
 "use client";
 
 import {
-    UplofileDropzone,
-    UplofilePreview,
-    UplofileRoot,
-    UplofileTrigger,
+  UplofileDropzone,
+  UplofilePreview,
+  UplofileRoot,
+  UplofileTrigger,
 } from "uplofile";
 
 export default function Basic() {
   return (
-      <UplofileRoot onRemove={onRemove} upload={upload} removeMode={"strict"}>
-          <UplofileDropzone className={"border p-2 rounded"}>
-              <span>Drop your files here or</span>{" "}
-              <UplofileTrigger className={"underline text-blue-500"}>
-                  Select file
-              </UplofileTrigger>
-              <div className={"border-t my-6 py-6"}>
-                  <UplofilePreview />
-              </div>
-          </UplofileDropzone>
-      </UplofileRoot>
+    <UplofileRoot onRemove={onRemove} upload={upload} removeMode={"strict"}>
+      <UplofileDropzone className={"border p-2 rounded"}>
+        <span>Drop your files here or</span>{" "}
+        <UplofileTrigger className={"underline text-blue-500"}>
+          Select file
+        </UplofileTrigger>
+        <div className={"border-t my-6 py-6"}>
+          <UplofilePreview />
+        </div>
+      </UplofileDropzone>
+    </UplofileRoot>
   );
 }
 ```

package/dist/index.d.ts

@@ -6,6 +6,7 @@ declare const Dropzone: ({ asChild, ...rest }: {
     asChild?: boolean;
 } & HTMLAttributes<HTMLElement>) => react_jsx_runtime.JSX.Element;
 
+type MaybePromise<T> = T | Promise<T>;
 type UploadStatus = "idle" | "uploading" | "done" | "error" | "canceled" | "removing";
 type UploadFileItem<TMeta = any> = {
     uid: string;
@@ -19,13 +20,16 @@ type UploadFileItem<TMeta = any> = {
     error?: string;
     meta?: TMeta;
 };
-type UploadResult = {
+type UploadResult<TMeta = any> = {
     url: string;
     id?: string;
+    meta?: TMeta;
+    previewUrl?: string;
 };
 type UplofileRootRef<TMeta = any> = {
     setItems: (items: UploadFileItem<TMeta>[] | ((prev: UploadFileItem<TMeta>[]) => UploadFileItem<TMeta>[])) => void;
     getItems: () => UploadFileItem<TMeta>[];
+    isLoading: boolean;
     onDrop: (e: DragEvent) => void;
     onDragOver: (e: DragEvent) => void;
     openFileDialog: () => void;
@@ -40,7 +44,7 @@ type BeforeUploadResult<TMeta = any> = boolean | Array<{
 }>;
 type RootProps<TMeta = any> = PropsWithChildren<{
     multiple?: boolean;
-    initial?: Array<Pick<UploadFileItem<TMeta>, "uid" | "id" | "name" | "url" | "meta">>;
+    initial?: MaybePromise<Array<Pick<UploadFileItem<TMeta>, "uid" | "id" | "name" | "url" | "meta">>>;
     /**
      * optimistic (default): remove from UI immediately, call onRemove in the background; if it fails, restore the item and show error.
      * strict: call onRemove first; only remove from UI if it succeeds.
@@ -52,7 +56,7 @@ type RootProps<TMeta = any> = PropsWithChildren<{
     accept?: string;
     beforeUpload?: (items: UploadFileItem<TMeta>[]) => BeforeUploadResult<TMeta> | Promise<BeforeUploadResult<TMeta>>;
     onChange?: (items: UploadFileItem<TMeta>[]) => Promise<void> | void;
-    upload: (file: File, signal: AbortSignal, setProgress?: (pct: number) => void) => Promise<UploadResult>;
+    upload: (file: File, signal: AbortSignal, setProgress?: (pct: number) => void) => Promise<UploadResult<TMeta>>;
     onRemove?: (item: UploadFileItem<TMeta>, signal: AbortSignal) => Promise<void | any>;
 }>;
 type ItemActions = {
@@ -63,6 +67,7 @@ type ItemActions = {
 type ImageUploaderContextValue<TMeta = any> = {
     items: UploadFileItem<TMeta>[];
     setItems: (items: UploadFileItem<TMeta>[]) => void;
+    isLoading: boolean;
     disabled?: boolean;
     multiple: boolean;
     accept: string;
@@ -89,6 +94,7 @@ type ImageUploaderContextValue<TMeta = any> = {
 };
 type TriggerRenderProps<TMeta = any> = {
     items: UploadFileItem<TMeta>[];
+    isLoading: boolean;
     isUploading: boolean;
     uploadingCount: number;
     doneCount: number;
@@ -98,6 +104,7 @@ type TriggerRenderProps<TMeta = any> = {
 };
 type PreviewRenderProps<TMeta = any> = {
     items: UploadFileItem<TMeta>[];
+    isLoading: boolean;
     setItems: (items: UploadFileItem<TMeta>[]) => void;
     actions: ItemActions;
 };
@@ -120,7 +127,7 @@ declare const Remove: ({ uid, asChild, ...rest }: ButtonProps) => react_jsx_runt
 
 declare const Root: React.ForwardRefExoticComponent<{
     multiple?: boolean;
-    initial?: Pick<UploadFileItem<unknown>, "id" | "name" | "uid" | "url" | "meta">[] | undefined;
+    initial?: MaybePromise<Pick<UploadFileItem<unknown>, "id" | "name" | "uid" | "url" | "meta">[]> | undefined;
     removeMode?: "optimistic" | "strict";
     name?: string;
     maxCount?: number;
@@ -128,7 +135,7 @@ 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;
-    upload: (file: File, signal: AbortSignal, setProgress?: (pct: number) => void) => Promise<UploadResult>;
+    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;
@@ -147,4 +154,4 @@ declare const isVideoFile: (item: UploadFileItem<any>, extraExtensions?: string[
 declare const isImageFile: (item: UploadFileItem<any>, extraExtensions?: string[]) => boolean;
 
 export { Cancel, Dropzone, HiddenInput, Preview, Remove, Retry, Root, Trigger, getExtension, isImageFile, isVideoFile, useUplofile };
-export type { ImageUploaderContextValue, ItemActions, RootProps, UploadFileItem, UploadResult, UploadStatus, UplofileRootRef };
+export type { BeforeUploadResult, ImageUploaderContextValue, ItemActions, RootProps, UploadFileItem, UploadResult, UploadStatus, UplofileRootRef };

package/dist/index.mjs

@@ -117,6 +117,7 @@ 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 [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);
@@ -124,21 +125,28 @@ const Root = /*#__PURE__*/ forwardRef(({ multiple = true, initial = [], onChange
     // Hydrate initial items from the server and keep them marked as done
     useEffect(()=>{
         if (hasHydratedInitialRef.current) return;
-        const arr = initial ?? [];
-        if (!Array.isArray(arr) || arr.length === 0) return;
-        const mapped = arr.map((it)=>{
-            return {
-                uid: it.uid || it.id,
-                id: it.id,
-                name: it.name,
-                url: it.url,
-                status: "done",
-                meta: it.meta
-            };
-        });
-        // Only hydrate if the user hasn't already added/modified items locally
-        setItems((prev)=>prev.length === 0 ? mapped : prev);
-        hasHydratedInitialRef.current = true;
+        const hydrate = async ()=>{
+            try {
+                const arr = await initial;
+                if (!Array.isArray(arr) || arr.length === 0) return;
+                const mapped = arr.map((it)=>{
+                    return {
+                        uid: it.uid || it.id,
+                        id: it.id,
+                        name: it.name,
+                        url: it.url,
+                        status: "done",
+                        meta: it.meta
+                    };
+                });
+                // Only hydrate if the user hasn't already added/modified items locally
+                setItems((prev)=>prev.length === 0 ? mapped : prev);
+                hasHydratedInitialRef.current = true;
+            } finally{
+                setIsLoading(false);
+            }
+        };
+        void hydrate();
     }, [
         initial
     ]);
@@ -183,13 +191,14 @@ const Root = /*#__PURE__*/ forwardRef(({ multiple = true, initial = [], onChange
                         } catch  {
                         /*fail silently*/ }
                     }
-                    const serverPreview = result?.preview || result.url;
+                    const serverPreview = result.previewUrl ?? result.preview ?? result.url;
                     return {
                         ...it,
                         status: "done",
                         url: result.url,
                         id: result.id ?? it.id,
                         previewUrl: serverPreview,
+                        meta: result.meta ?? it.meta,
                         progress: 100
                     };
                 }));
@@ -373,6 +382,7 @@ const Root = /*#__PURE__*/ forwardRef(({ multiple = true, initial = [], onChange
         }, []);
     const ctx = {
         items,
+        isLoading,
         disabled,
         multiple,
         accept,
@@ -405,6 +415,7 @@ const Root = /*#__PURE__*/ forwardRef(({ multiple = true, initial = [], onChange
     useImperativeHandle(ref, ()=>({
             setItems: emitChange,
             getItems: ()=>items,
+            isLoading,
             onDrop,
             onDragOver,
             openFileDialog: ()=>inputRef.current?.click(),
@@ -412,6 +423,7 @@ const Root = /*#__PURE__*/ forwardRef(({ multiple = true, initial = [], onChange
         }), [
         emitChange,
         items,
+        isLoading,
         onDrop,
         onDragOver,
         actions
@@ -449,11 +461,12 @@ const Dropzone = ({ asChild, ...rest })=>{
 };
 
 const Preview = ({ render })=>{
-    const { items, actions, setItems } = useUplofile();
+    const { items, actions, setItems, isLoading } = useUplofile();
     if (render && typeof render === "function") return render({
         items,
         setItems,
-        actions
+        actions,
+        isLoading
     });
     if (items.length === 0) return null;
     return /*#__PURE__*/ jsx("div", {
@@ -761,7 +774,7 @@ const Remove = ({ uid, asChild, ...rest })=>{
 };
 
 const Trigger = ({ asChild, children, render, ...rest })=>{
-    const { openFileDialog, disabled, items } = useUplofile();
+    const { openFileDialog, disabled, items, isLoading } = useUplofile();
     const Comp = asChild ? Slot : "button";
     const uploading = items.filter((i)=>i.status === "uploading");
     const uploadingCount = uploading.length;
@@ -770,6 +783,7 @@ const Trigger = ({ asChild, children, render, ...rest })=>{
     const totalProgress = uploadingCount ? Math.round(uploading.reduce((acc, it)=>acc + (typeof it.progress === "number" ? it.progress : 0), 0) / uploadingCount) : undefined;
     const api = {
         items,
+        isLoading,
         isUploading: uploadingCount > 0,
         uploadingCount,
         doneCount,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uplofile",
-  "version": "2.1.0",
+  "version": "2.2.1",
   "description": "Composable file‑upload components for React.",
   "license": "MIT",
   "author": "Chris Josh <KristofaJosh>",
@@ -41,7 +41,8 @@
     "clean": "rm -rf dist",
     "prepare": "pnpm run build",
     "prepublishOnly": "pnpm run build",
-    "test": "vitest"
+    "test": "vitest",
+    "format": "prettier --write ."
   },
   "dependencies": {
     "@radix-ui/react-slot": "1.1.0"