react-file-upload-ui 0.1.0 → 0.1.3

package/README.md

@@ -20,15 +20,45 @@ pnpm add react-file-upload-ui
 
 ## Usage
 
+**Important:** You must import the CSS file for the component to be styled correctly.
+
 ```tsx
 import React from "react";
 import ReactFileUploaderUI from "react-file-upload-ui";
+import "react-file-upload-ui/styles.css"; // ← Import the styles
 
 export default function App() {
-  return <ReactFileUploaderUI />;
+  const handleFilesSelected = (files) => {
+    console.log("Selected files:", files);
+  };
+
+  return (
+    <div style={{ padding: "2rem" }}>
+      <ReactFileUploaderUI
+        accept="image/*"
+        maxSize={10 * 1024 * 1024}
+        maxFiles={10}
+        onFilesSelected={handleFilesSelected}
+      />
+    </div>
+  );
 }
 ```
 
+## Props
+
+| Prop              | Type                           | Default    | Description                                     |
+| ----------------- | ------------------------------ | ---------- | ----------------------------------------------- |
+| `accept`          | `string`                       | -          | File types to accept (e.g., "image/\*", ".pdf") |
+| `multiple`        | `boolean`                      | `true`     | Allow multiple file selection                   |
+| `maxSize`         | `number`                       | `10485760` | Maximum file size in bytes (default: 10MB)      |
+| `maxFiles`        | `number`                       | `10`       | Maximum number of files                         |
+| `onFilesSelected` | `(files: IFileData[]) => void` | -          | Callback when files are selected                |
+| `onError`         | `(error: string) => void`      | -          | Callback when an error occurs                   |
+| `disabled`        | `boolean`                      | `false`    | Disable the file uploader                       |
+| `className`       | `string`                       | `""`       | Additional CSS classes                          |
+| `defaultFiles`    | `IFileData[]`                  | -          | Pre-populate with default files                 |
+
 ## Building
 
 This package uses `tsup` to build. To build locally run:

package/dist/index.d.mts

@@ -1,9 +1,47 @@
-import React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
-interface ReactFileUploaderUIProps {
+interface IFileData {
+    id: string;
+    isDefault: boolean;
+    file: File | undefined;
+    url?: string;
+    name: string;
+}
+interface IReactFileUploaderUIProps {
     accept?: string;
     multiple?: boolean;
+    maxSize?: number;
+    maxFiles?: number;
+    onFilesSelected?: (data: IFileData[]) => void;
+    onError?: (error: string) => void;
+    disabled?: boolean;
+    className?: string;
+    /**
+     * Default files (external URLs) to pre-populate the uploader with.
+     * Example: [{ url: 'https://...', name: 'image.jpg' }]
+     */
+    defaultFiles?: DefaultFile[];
+}
+interface DefaultFile {
+    id?: string;
+    name?: string;
+    url: string;
+    type?: string;
+    isDefault?: boolean;
 }
-declare const ReactFileUploaderUI: React.FC<ReactFileUploaderUIProps>;
+interface IFileWithPreview {
+    id: string;
+    name: string;
+    size?: number;
+    type?: string;
+    preview?: string;
+    isDefault?: boolean;
+    /**
+     * Original File if the item was uploaded via input; undefined for external URL defaults.
+     */
+    rawFile?: File | undefined;
+}
+
+declare const ReactFileUploaderUI: ({ accept, multiple, maxSize, maxFiles, onFilesSelected, onError, disabled, className, defaultFiles, }: IReactFileUploaderUIProps) => react_jsx_runtime.JSX.Element;
 
-export { ReactFileUploaderUI, type ReactFileUploaderUIProps, ReactFileUploaderUI as default };
+export { type IFileData, type IFileWithPreview, type IReactFileUploaderUIProps, ReactFileUploaderUI as default };

package/dist/index.d.ts

@@ -1,9 +1,47 @@
-import React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
-interface ReactFileUploaderUIProps {
+interface IFileData {
+    id: string;
+    isDefault: boolean;
+    file: File | undefined;
+    url?: string;
+    name: string;
+}
+interface IReactFileUploaderUIProps {
     accept?: string;
     multiple?: boolean;
+    maxSize?: number;
+    maxFiles?: number;
+    onFilesSelected?: (data: IFileData[]) => void;
+    onError?: (error: string) => void;
+    disabled?: boolean;
+    className?: string;
+    /**
+     * Default files (external URLs) to pre-populate the uploader with.
+     * Example: [{ url: 'https://...', name: 'image.jpg' }]
+     */
+    defaultFiles?: DefaultFile[];
+}
+interface DefaultFile {
+    id?: string;
+    name?: string;
+    url: string;
+    type?: string;
+    isDefault?: boolean;
 }
-declare const ReactFileUploaderUI: React.FC<ReactFileUploaderUIProps>;
+interface IFileWithPreview {
+    id: string;
+    name: string;
+    size?: number;
+    type?: string;
+    preview?: string;
+    isDefault?: boolean;
+    /**
+     * Original File if the item was uploaded via input; undefined for external URL defaults.
+     */
+    rawFile?: File | undefined;
+}
+
+declare const ReactFileUploaderUI: ({ accept, multiple, maxSize, maxFiles, onFilesSelected, onError, disabled, className, defaultFiles, }: IReactFileUploaderUIProps) => react_jsx_runtime.JSX.Element;
 
-export { ReactFileUploaderUI, type ReactFileUploaderUIProps, ReactFileUploaderUI as default };
+export { type IFileData, type IFileWithPreview, type IReactFileUploaderUIProps, ReactFileUploaderUI as default };