uplofile 2.0.0 → 2.1.0

package/README.md

@@ -10,6 +10,7 @@ Accessible, unstyled primitives for building your own upload UI — with drag‑
 - 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  
 - Unstyled — bring your own design
 
@@ -29,53 +30,17 @@ pnpm add uplofile
 
 ## Quick Start
 
-Import the primitives:
+Import and use the components in your React component:
 
-```typescript
-import * as Uplofile from "uplofile";
-
-const UplofileRoot = Uplofile.Root;
-
-const UplofileTrigger = Uplofile.Trigger;
-
-const UplofileHiddenInput = Uplofile.HiddenInput;
-
-const UplofileDropzone = Uplofile.Dropzone;
-
-const UplofilePreview = Uplofile.Preview;
-
-const UplofileCancel = Uplofile.Cancel;
-
-const UplofileRetry = Uplofile.Retry;
-
-const UplofileRemove = Uplofile.Remove;
-
-export {
-  UplofileRoot,
-  UplofileTrigger,
-  UplofileHiddenInput,
-  UplofileDropzone,
-  UplofilePreview,
-  UplofileCancel,
-  UplofileRetry,
-  UplofileRemove,
-};
-
-```
-
-Then use them in your React component:
 ```tsx
 "use client";
 
 import {
-    UplofileCancel,
     UplofileDropzone,
     UplofilePreview,
-    UplofileRemove,
-    UplofileRetry,
     UplofileRoot,
     UplofileTrigger,
-} from "./components/ui/uplofile";
+} from "uplofile";
 
 export default function Basic() {
   return (

package/dist/index.d.ts

@@ -31,6 +31,13 @@ type UplofileRootRef<TMeta = any> = {
     openFileDialog: () => void;
     actions: ItemActions;
 };
+type BeforeUploadResult<TMeta = any> = boolean | Array<{
+    valid: boolean;
+    meta?: TMeta;
+    id?: string;
+    uid: string;
+    reason?: string;
+}>;
 type RootProps<TMeta = any> = PropsWithChildren<{
     multiple?: boolean;
     initial?: Array<Pick<UploadFileItem<TMeta>, "uid" | "id" | "name" | "url" | "meta">>;
@@ -43,6 +50,7 @@ type RootProps<TMeta = any> = PropsWithChildren<{
     maxCount?: number;
     disabled?: boolean;
     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>;
     onRemove?: (item: UploadFileItem<TMeta>, signal: AbortSignal) => Promise<void | any>;
@@ -97,7 +105,7 @@ type PreviewRenderProps<TMeta = any> = {
 type Props<TMeta = any> = {
     render?: (api: PreviewRenderProps<TMeta>) => React.ReactNode;
 };
-declare const Preview: <TMeta = any>({ render }: Props<TMeta>) => string | number | boolean | Iterable<React.ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
+declare const Preview: <TMeta = any>({ render }: 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;
@@ -112,12 +120,13 @@ declare const Remove: ({ uid, asChild, ...rest }: ButtonProps) => react_jsx_runt
 
 declare const Root: React.ForwardRefExoticComponent<{
     multiple?: boolean;
-    initial?: Pick<UploadFileItem<unknown>, "name" | "uid" | "id" | "url" | "meta">[] | undefined;
+    initial?: Pick<UploadFileItem<unknown>, "id" | "name" | "uid" | "url" | "meta">[] | undefined;
     removeMode?: "optimistic" | "strict";
     name?: string;
     maxCount?: number;
     disabled?: boolean;
     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>;
     onRemove?: ((item: UploadFileItem<unknown>, signal: AbortSignal) => Promise<void | any>) | undefined;

package/dist/index.mjs

@@ -115,7 +115,7 @@ const acceptsFile = (file, accept)=>{
 };
 
 const UploaderCtx = /*#__PURE__*/ createContext(null);
-const Root = /*#__PURE__*/ forwardRef(({ multiple = true, initial = [], onChange, upload, removeMode = "optimistic", onRemove, accept = "image/*", name = "image", maxCount, disabled, children }, ref)=>{
+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 controllers = useRef(new Map());
     const removeControllers = useRef(new Map());
@@ -188,7 +188,7 @@ const Root = /*#__PURE__*/ forwardRef(({ multiple = true, initial = [], onChange
                         ...it,
                         status: "done",
                         url: result.url,
-                        id: result.id,
+                        id: result.id ?? it.id,
                         previewUrl: serverPreview,
                         progress: 100
                     };
@@ -207,13 +207,13 @@ const Root = /*#__PURE__*/ forwardRef(({ multiple = true, initial = [], onChange
         emitChange,
         upload
     ]);
-    const selectFiles = useCallback((files)=>{
+    const selectFiles = useCallback(async (files)=>{
         if (!files) return;
         const selected = Array.isArray(files) ? files : Array.from(files);
         if (selected.length === 0) return;
         const remaining = maxCount ? Math.max(0, maxCount - items.filter((i)=>i.status !== "canceled").length) : undefined;
         const toUse = typeof remaining === "number" ? selected.slice(0, remaining) : selected;
-        const newItems = toUse.map((file)=>({
+        let newItems = toUse.map((file)=>({
                 uid: uid(),
                 name: file.name,
                 file,
@@ -221,12 +221,59 @@ const Root = /*#__PURE__*/ forwardRef(({ multiple = true, initial = [], onChange
                 status: "idle",
                 progress: 0
             }));
-        emitChange([
-            ...items,
-            ...newItems
-        ]);
-        newItems.forEach((it)=>startUpload(it));
+        if (beforeUpload) {
+            const result = await beforeUpload(newItems);
+            if (result === false) {
+                newItems.forEach((it)=>{
+                    if (it.previewUrl) URL.revokeObjectURL(it.previewUrl);
+                });
+                return;
+            }
+            if (Array.isArray(result)) {
+                const resultMap = new Map(result.map((r)=>[
+                        r.uid,
+                        r
+                    ]));
+                const processedItems = [];
+                for (const item of newItems){
+                    const validation = resultMap.get(item.uid);
+                    if (!validation) {
+                        if (item.previewUrl) URL.revokeObjectURL(item.previewUrl);
+                        continue;
+                    }
+                    if (validation.valid) {
+                        processedItems.push({
+                            ...item,
+                            meta: validation.meta !== undefined ? validation.meta : item.meta,
+                            id: validation.id !== undefined ? validation.id : item.id
+                        });
+                    } else if (validation.reason) {
+                        processedItems.push({
+                            ...item,
+                            status: "error",
+                            error: validation.reason,
+                            meta: validation.meta !== undefined ? validation.meta : item.meta,
+                            id: validation.id !== undefined ? validation.id : item.id
+                        });
+                    } else {
+                        if (item.previewUrl) URL.revokeObjectURL(item.previewUrl);
+                    }
+                }
+                newItems = processedItems;
+            }
+        }
+        if (newItems.length === 0) return;
+        emitChange((prev)=>[
+                ...prev,
+                ...newItems
+            ]);
+        newItems.forEach((it)=>{
+            if (it.status === "idle") {
+                startUpload(it);
+            }
+        });
     }, [
+        beforeUpload,
         emitChange,
         items,
         maxCount,

package/package.json

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