uplofile 1.1.1 → 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

@@ -1,13 +1,13 @@
 /// <reference lib="es2015.iterable" />
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React, { HTMLAttributes, PropsWithChildren, RefObject, ChangeEvent, DragEvent, ButtonHTMLAttributes } from 'react';
+import React, { HTMLAttributes, DragEvent, RefObject, ChangeEvent, PropsWithChildren, ButtonHTMLAttributes } from 'react';
 
 declare const Dropzone: ({ asChild, ...rest }: {
     asChild?: boolean;
 } & HTMLAttributes<HTMLElement>) => react_jsx_runtime.JSX.Element;
 
 type UploadStatus = "idle" | "uploading" | "done" | "error" | "canceled" | "removing";
-type UploadFileItem = {
+type UploadFileItem<TMeta = any> = {
     uid: string;
     id?: string;
     name: string;
@@ -17,15 +17,30 @@ type UploadFileItem = {
     status: UploadStatus;
     progress?: number;
     error?: string;
-    data?: any;
+    meta?: TMeta;
 };
 type UploadResult = {
     url: string;
     id?: string;
 };
-type RootProps = PropsWithChildren<{
+type UplofileRootRef<TMeta = any> = {
+    setItems: (items: UploadFileItem<TMeta>[] | ((prev: UploadFileItem<TMeta>[]) => UploadFileItem<TMeta>[])) => void;
+    getItems: () => UploadFileItem<TMeta>[];
+    onDrop: (e: DragEvent) => void;
+    onDragOver: (e: DragEvent) => void;
+    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, "uid" | "id" | "name" | "url">>;
+    initial?: 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.
@@ -35,18 +50,19 @@ type RootProps = PropsWithChildren<{
     maxCount?: number;
     disabled?: boolean;
     accept?: string;
-    onChange?: (items: UploadFileItem[]) => Promise<void> | void;
+    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, signal: AbortSignal) => Promise<void | any>;
+    onRemove?: (item: UploadFileItem<TMeta>, signal: AbortSignal) => Promise<void | any>;
 }>;
 type ItemActions = {
     cancel: (uid: string) => void;
     remove: (uid: string) => void;
     retry: (uid: string) => void;
 };
-type ImageUploaderContextValue = {
-    items: UploadFileItem[];
-    setItems: (items: UploadFileItem[]) => void;
+type ImageUploaderContextValue<TMeta = any> = {
+    items: UploadFileItem<TMeta>[];
+    setItems: (items: UploadFileItem<TMeta>[]) => void;
     disabled?: boolean;
     multiple: boolean;
     accept: string;
@@ -71,8 +87,8 @@ type ImageUploaderContextValue = {
     hiddenInputValue: string;
     name: string;
 };
-type TriggerRenderProps = {
-    items: UploadFileItem[];
+type TriggerRenderProps<TMeta = any> = {
+    items: UploadFileItem<TMeta>[];
     isUploading: boolean;
     uploadingCount: number;
     doneCount: number;
@@ -80,16 +96,16 @@ type TriggerRenderProps = {
     totalProgress?: number;
     open: () => void;
 };
-type PreviewRenderProps = {
-    items: UploadFileItem[];
-    setItems: (items: UploadFileItem[]) => void;
+type PreviewRenderProps<TMeta = any> = {
+    items: UploadFileItem<TMeta>[];
+    setItems: (items: UploadFileItem<TMeta>[]) => void;
     actions: ItemActions;
 };
 
-type Props = {
-    render?: (api: PreviewRenderProps) => React.ReactNode;
+type Props<TMeta = any> = {
+    render?: (api: PreviewRenderProps<TMeta>) => React.ReactNode;
 };
-declare const Preview: ({ render }: Props) => 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;
@@ -102,17 +118,33 @@ declare const Cancel: ({ uid, asChild, alwaysVisible, ...rest }: ButtonProps) =>
 declare const Retry: ({ uid, asChild, ...rest }: ButtonProps) => react_jsx_runtime.JSX.Element;
 declare const Remove: ({ uid, asChild, ...rest }: ButtonProps) => react_jsx_runtime.JSX.Element;
 
-declare const Root: ({ multiple, initial, onChange, upload, removeMode, onRemove, accept, name, maxCount, disabled, children, }: RootProps) => react_jsx_runtime.JSX.Element;
+declare const Root: React.ForwardRefExoticComponent<{
+    multiple?: boolean;
+    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;
+} & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<UplofileRootRef<unknown>>>;
 
-declare const Trigger: ({ asChild, children, render, ...rest }: PropsWithChildren<{
+declare const Trigger: <TMeta = any>({ asChild, children, render, ...rest }: PropsWithChildren<{
     asChild?: boolean;
-    render?: (api: TriggerRenderProps) => React.ReactNode;
-    children?: React.ReactNode | ((api: TriggerRenderProps) => React.ReactNode);
+    render?: (api: TriggerRenderProps<TMeta>) => React.ReactNode;
+    children?: React.ReactNode | ((api: TriggerRenderProps<TMeta>) => React.ReactNode);
 } & React.HTMLAttributes<HTMLElement>>) => react_jsx_runtime.JSX.Element;
 
-declare const useUplofile: () => ImageUploaderContextValue;
+declare const useUplofile: <TMeta = any>() => ImageUploaderContextValue<TMeta>;
 
-declare const isVideoFile: (item: UploadFileItem) => boolean;
+declare const getExtension: (path: string) => string | undefined;
+declare const isVideoFile: (item: UploadFileItem<any>, extraExtensions?: string[]) => boolean;
+declare const isImageFile: (item: UploadFileItem<any>, extraExtensions?: string[]) => boolean;
 
-export { Cancel, Dropzone, HiddenInput, Preview, Remove, Retry, Root, Trigger, isVideoFile, useUplofile };
-export type { ImageUploaderContextValue, ItemActions, RootProps, UploadFileItem, UploadResult, UploadStatus };
+export { Cancel, Dropzone, HiddenInput, Preview, Remove, Retry, Root, Trigger, getExtension, isImageFile, isVideoFile, useUplofile };
+export type { ImageUploaderContextValue, ItemActions, RootProps, UploadFileItem, UploadResult, UploadStatus, UplofileRootRef };

package/dist/index.mjs

@@ -1,45 +1,121 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
-import { useState, useRef, useEffect, useMemo, useCallback, createContext, useContext } from 'react';
+import { forwardRef, useState, useRef, useEffect, useMemo, useCallback, useImperativeHandle, createContext, useContext } from 'react';
 
 const uid = ()=>Math.random().toString(36).slice(2, 10) + Date.now().toString(36).slice(-4);
-const isVideoFile = (item)=>{
+const VIDEO_EXTENSIONS = [
+    "mp4",
+    "webm",
+    "ogg",
+    "mov",
+    "avi",
+    "mkv",
+    "wmv",
+    "flv",
+    "3gp",
+    "m4v",
+    "mpg",
+    "mpeg"
+];
+const IMAGE_EXTENSIONS = [
+    "jpg",
+    "jpeg",
+    "png",
+    "gif",
+    "webp",
+    "svg",
+    "avif",
+    "bmp",
+    "ico",
+    "tiff"
+];
+const getExtension = (path)=>{
+    try {
+        const url = new URL(path, "http://localhost");
+        const pathname = url.pathname;
+        const parts = pathname.split(".");
+        if (parts.length > 1) return parts.pop()?.toLowerCase();
+        return undefined;
+    } catch  {
+        const parts = path.split("?")[0].split("#")[0].split(".");
+        if (parts.length > 1) return parts.pop()?.toLowerCase();
+        return undefined;
+    }
+};
+const isVideoFile = (item, extraExtensions = [])=>{
     if (item.file) {
         return item.file.type.startsWith("video/");
     }
+    const allExtensions = [
+        ...VIDEO_EXTENSIONS,
+        ...extraExtensions
+    ];
+    if (item.url) {
+        const extension = getExtension(item.url);
+        if (extension && allExtensions.includes(extension)) {
+            return true;
+        }
+    }
+    if (item.name) {
+        const extension = getExtension(item.name);
+        if (extension && allExtensions.includes(extension)) {
+            return true;
+        }
+    }
+    return false;
+};
+const isImageFile = (item, extraExtensions = [])=>{
+    if (item.file) {
+        return item.file.type.startsWith("image/");
+    }
+    const allExtensions = [
+        ...IMAGE_EXTENSIONS,
+        ...extraExtensions
+    ];
     if (item.url) {
-        const extension = item.url.split(".").pop()?.toLowerCase();
-        const videoExtensions = [
-            "mp4",
-            "webm",
-            "ogg",
-            "mov",
-            "avi",
-            "mkv"
-        ];
-        if (extension && videoExtensions.includes(extension)) {
+        const extension = getExtension(item.url);
+        if (extension && allExtensions.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)) {
+        const extension = getExtension(item.name);
+        if (extension && allExtensions.includes(extension)) {
             return true;
         }
     }
     return false;
 };
+const acceptsFile = (file, accept)=>{
+    if (!accept || accept.trim() === "") return true;
+    const type = (file.type || "").toLowerCase();
+    const name = (file.name || "").toLowerCase();
+    const tokens = accept.split(",").map((t)=>t.trim().toLowerCase()).filter(Boolean);
+    // If accept is malformed, be permissive (browser file input also ignores)
+    if (tokens.length === 0) return true;
+    // Helper: match extension token like .jpg or jpg
+    const hasExt = (token)=>{
+        const extToken = token.startsWith(".") ? token.slice(1) : token;
+        const fileExt = name.includes(".") ? name.split(".").pop() : undefined;
+        return !!fileExt && fileExt === extToken;
+    };
+    // Check any token matches
+    return tokens.some((token)=>{
+        if (token === "*/*") return true;
+        // MIME type with wildcard, e.g., image/*
+        if (token.endsWith("/*")) {
+            const prefix = token.slice(0, -1); // keep the slash
+            return type.startsWith(prefix);
+        }
+        // Full MIME type e.g., image/png
+        if (token.includes("/")) return type === token;
+        // File extensions, with or without a leading dot
+        return hasExt(token);
+    });
+};
 
 const UploaderCtx = /*#__PURE__*/ createContext(null);
-const Root = ({ multiple = true, initial = [], onChange, upload, removeMode = "optimistic", onRemove, accept = "image/*", name = "images", maxCount, disabled, children })=>{
+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());
@@ -56,7 +132,8 @@ const Root = ({ multiple = true, initial = [], onChange, upload, removeMode = "o
                 id: it.id,
                 name: it.name,
                 url: it.url,
-                status: "done"
+                status: "done",
+                meta: it.meta
             };
         });
         // Only hydrate if the user hasn't already added/modified items locally
@@ -111,7 +188,7 @@ const Root = ({ multiple = true, initial = [], onChange, upload, removeMode = "o
                         ...it,
                         status: "done",
                         url: result.url,
-                        id: result.id,
+                        id: result.id ?? it.id,
                         previewUrl: serverPreview,
                         progress: 100
                     };
@@ -130,12 +207,13 @@ const Root = ({ multiple = true, initial = [], onChange, upload, removeMode = "o
         emitChange,
         upload
     ]);
-    const selectFiles = useCallback((files)=>{
-        if (!files || files.length === 0) return;
-        const selected = Array.from(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,
@@ -143,12 +221,59 @@ const Root = ({ multiple = true, initial = [], onChange, upload, removeMode = "o
                 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,
@@ -163,10 +288,15 @@ const Root = ({ multiple = true, initial = [], onChange, upload, removeMode = "o
     const onDrop = useCallback((e)=>{
         e.preventDefault();
         if (disabled) return;
-        selectFiles(e.dataTransfer.files);
+        const dtFiles = e.dataTransfer?.files;
+        if (!dtFiles || dtFiles.length === 0) return;
+        const accepted = Array.from(dtFiles).filter((f)=>acceptsFile(f, accept));
+        if (accepted.length === 0) return;
+        selectFiles(accepted);
     }, [
         disabled,
-        selectFiles
+        selectFiles,
+        accept
     ]);
     const onDragOver = useCallback((e)=>e.preventDefault(), []);
     const actions = useMemo(()=>({
@@ -271,6 +401,21 @@ const Root = ({ multiple = true, initial = [], onChange, upload, removeMode = "o
         hiddenInputValue,
         name
     };
+    // Expose imperative methods via ref
+    useImperativeHandle(ref, ()=>({
+            setItems: emitChange,
+            getItems: ()=>items,
+            onDrop,
+            onDragOver,
+            openFileDialog: ()=>inputRef.current?.click(),
+            actions
+        }), [
+        emitChange,
+        items,
+        onDrop,
+        onDragOver,
+        actions
+    ]);
     return /*#__PURE__*/ jsx(UploaderCtx.Provider, {
         value: ctx,
         children: /*#__PURE__*/ jsxs("div", {
@@ -285,7 +430,7 @@ const Root = ({ multiple = true, initial = [], onChange, upload, removeMode = "o
             ]
         })
     });
-};
+});
 
 const useUplofile = ()=>{
     const ctx = useContext(UploaderCtx);
@@ -582,33 +727,36 @@ const Cancel = ({ uid, asChild, alwaysVisible = false, ...rest })=>{
     const Comp = asChild ? Slot : "button";
     if (!isUploading && !alwaysVisible) return null;
     return /*#__PURE__*/ jsx(Comp, {
+        ...rest,
         onClick: (e)=>{
             e.stopPropagation();
             actions.cancel(uid);
-        },
-        ...rest
+            rest.onClick?.(e);
+        }
     });
 };
 const Retry = ({ uid, asChild, ...rest })=>{
     const { actions } = useUplofile();
     const Comp = asChild ? Slot : "button";
     return /*#__PURE__*/ jsx(Comp, {
+        ...rest,
         onClick: (e)=>{
             e.stopPropagation();
             actions.retry(uid);
-        },
-        ...rest
+            rest.onClick?.(e);
+        }
     });
 };
 const Remove = ({ uid, asChild, ...rest })=>{
     const { actions } = useUplofile();
     const Comp = asChild ? Slot : "button";
     return /*#__PURE__*/ jsx(Comp, {
+        ...rest,
         onClick: (e)=>{
             e.stopPropagation();
             actions.remove(uid);
-        },
-        ...rest
+            rest.onClick?.(e);
+        }
     });
 };
 
@@ -643,4 +791,4 @@ const Trigger = ({ asChild, children, render, ...rest })=>{
     });
 };
 
-export { Cancel, Dropzone, HiddenInput, Preview, Remove, Retry, Root, Trigger, isVideoFile, useUplofile };
+export { Cancel, Dropzone, HiddenInput, Preview, Remove, Retry, Root, Trigger, getExtension, isImageFile, isVideoFile, useUplofile };

package/package.json

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