uploadzx/dist/react/index.d.ts

Browser-only TypeScript upload library with tus integration for resumable uploads

import * as react_jsx_runtime from 'react/jsx-runtime';
import { ReactNode } from 'react';

interface UploadFile {
    id: string;
    file: File;
    fileHandle?: FileSystemFileHandle;
    name: string;
    size: number;
    type: string;
}
interface UploadProgress {
    fileId: string;
    bytesUploaded: number;
    bytesTotal: number;
    percentage: number;
    bytesPerSecond: number;
}
interface UploadState {
    fileId: string;
    status: 'pending' | 'uploading' | 'paused' | 'completed' | 'error' | 'cancelled';
    progress: UploadProgress;
    error?: Error;
    tusUrl?: string;
    file: File;
}
interface UploadOptions {
    endpoint: string;
    chunkSize?: number;
    retryDelays?: number[];
    metadata?: Record<string, string>;
    headers?: Record<string, string>;
    onInit?: () => void;
}
interface UploadEvents {
    onProgress?: (progress: UploadProgress) => void;
    onStateChange?: (state: UploadState) => void;
    onComplete?: (fileId: string, tusUrl: string) => void;
    onError?: (fileId: string, error: Error) => void;
    onCancel?: (fileId: string) => void;
}
interface FilePickerOptions {
    accept?: string;
    multiple?: boolean;
    useFileSystemAccess?: boolean;
}
interface StoredFileHandle {
    id: string;
    name: string;
    size: number;
    type: string;
    handle: FileSystemFileHandle;
    lastModified: number;
    tusUploadUrl?: string;
    bytesUploaded?: number;
}

interface TusUploaderOptions {
    previousUploadUrl?: string;
    previousBytesUploaded?: number;
    trackSpeed?: boolean;
}

interface QueueOptions extends UploadOptions {
    maxConcurrent?: number;
    autoStart?: boolean;
}

declare global {
    interface DataTransferItem {
        getAsFileSystemHandle?(): Promise<FileSystemHandle | null>;
    }
}

interface UploadzxOptions extends QueueOptions {
    filePickerOptions?: FilePickerOptions;
    tusOptions?: TusUploaderOptions;
}

interface UseUploadzxOptions extends UploadzxOptions {
    autoStart?: boolean;
    onProgress?: (progress: any) => void;
    onStateChange?: (state: UploadState) => void;
    onComplete?: (fileId: string, tusUrl: string) => void;
    onError?: (fileId: string, error: Error) => void;
    onCancel?: (fileId: string) => void;
}
declare function useUploadzx(options: UseUploadzxOptions): {
    isInitialized: boolean;
    uploadStates: Record<string, UploadState>;
    queueStats: {
        queueLength: number;
        activeCount: number;
    };
    unfinishedUploads: StoredFileHandle[];
    pickAndUploadFiles: () => Promise<void>;
    pickFiles: () => Promise<UploadFile[]>;
    addFiles: (files: UploadFile[]) => Promise<void>;
    startUploads: () => Promise<void>;
    pauseAll: () => Promise<void>;
    resumeAll: () => Promise<void>;
    cancelAll: () => Promise<void>;
    pauseUpload: (fileId: string) => Promise<void>;
    resumeUpload: (fileId: string) => Promise<void>;
    cancelUpload: (fileId: string) => Promise<void>;
    getUploadState: (fileId: string) => UploadState | null;
    getAllStates: () => {};
    restoreUnfinishedUpload: (fileHandleOrId: StoredFileHandle | string) => Promise<void>;
    clearCompletedUploads: () => void;
};

declare function useUploadState(fileId: string): UploadState | null;

declare function useUploadProgress(uploadStates: Record<string, any>, fileId: string): UploadProgress | null;

declare function useFilePicker(options?: FilePickerOptions): {
    pickFiles: () => Promise<UploadFile[]>;
};

declare function useUploadItem(fileId: string): {
    handlePause: () => void;
    handleResume: () => void;
    handleCancel: () => void;
    canPause: boolean;
    canResume: boolean;
    canCancel: boolean;
    progress: UploadProgress | undefined;
};

declare function useQueueActions(): {
    handlePauseAll: () => void;
    handleResumeAll: () => void;
    handleCancelAll: () => void;
    handlePickFiles: () => void;
    canPauseAll: boolean;
    hasActiveUploads: boolean;
    hasQueuedUploads: boolean;
    queueStatsText: string;
    queueStats: {
        queueLength: number;
        activeCount: number;
    };
};

interface UploadzxProviderProps {
    children: ReactNode;
    options: UseUploadzxOptions;
}
declare function UploadzxProvider({ children, options }: UploadzxProviderProps): react_jsx_runtime.JSX.Element;
declare function useUploadzxActions(): {
    pickAndUploadFiles: () => Promise<void>;
    pickFiles: () => Promise<any[]>;
    addFiles: (files: any[]) => Promise<void>;
    startUploads: () => Promise<void>;
    pauseAll: () => Promise<void>;
    resumeAll: () => Promise<void>;
    cancelAll: () => Promise<void>;
    pauseUpload: (fileId: string) => Promise<void>;
    resumeUpload: (fileId: string) => Promise<void>;
    cancelUpload: (fileId: string) => Promise<void>;
    getUploadState: (fileId: string) => any;
    getAllStates: () => any;
    clearCompletedUploads: () => void;
    restoreUnfinishedUpload: (fileHandleOrId: StoredFileHandle | string) => Promise<void>;
};
declare function useUploadzxState(): {
    isInitialized: boolean;
};
declare function useUploadStates(): {
    uploadStates: Record<string, UploadState>;
};
declare function useQueueStats(): {
    queueStats: {
        queueLength: number;
        activeCount: number;
    };
};
declare function useUnfinishedUploads(): {
    unfinishedUploads: StoredFileHandle[];
};
/**
 * @deprecated Use individual hooks instead: useUploadzxActions, useUploadzxState, useUploadStates, useQueueStats, useUnfinishedUploads
 */
declare function useUploadzxContext(): {
    uploadStates: Record<string, UploadState>;
    queueStats: {
        queueLength: number;
        activeCount: number;
    };
    unfinishedUploads: StoredFileHandle[];
    isInitialized: boolean;
    pickAndUploadFiles: () => Promise<void>;
    pickFiles: () => Promise<any[]>;
    addFiles: (files: any[]) => Promise<void>;
    startUploads: () => Promise<void>;
    pauseAll: () => Promise<void>;
    resumeAll: () => Promise<void>;
    cancelAll: () => Promise<void>;
    pauseUpload: (fileId: string) => Promise<void>;
    resumeUpload: (fileId: string) => Promise<void>;
    cancelUpload: (fileId: string) => Promise<void>;
    getUploadState: (fileId: string) => any;
    getAllStates: () => any;
    clearCompletedUploads: () => void;
    restoreUnfinishedUpload: (fileHandleOrId: StoredFileHandle | string) => Promise<void>;
};

interface UploadDropzoneProps extends React.HTMLAttributes<HTMLDivElement> {
    children: ReactNode;
    onFilesDrop?: (files: UploadFile[]) => void;
    className?: string;
    activeClassName?: string;
    disabled?: boolean;
    clickable?: boolean;
}
declare function UploadDropzone({ children, onFilesDrop, className, activeClassName, disabled, clickable, }: UploadDropzoneProps): react_jsx_runtime.JSX.Element;

export { type FilePickerOptions, type QueueOptions, type StoredFileHandle, UploadDropzone, type UploadEvents, type UploadFile, type UploadOptions, type UploadProgress, type UploadState, UploadzxProvider, useFilePicker, useQueueActions, useQueueStats, useUnfinishedUploads, useUploadItem, useUploadProgress, useUploadState, useUploadStates, useUploadzx, useUploadzxActions, useUploadzxContext, useUploadzxState };