@thetechfossil/upfiles 0.1.0

package/README.md

@@ -0,0 +1,106 @@
+# @upfiles/uploader
+
+Lightweight JavaScript client and React component to upload files to an UpFiles server (presigned S3 under the hood). Similar to UploadThing-like DX.
+
+- Client: get presigned URLs and PUT to S3
+- React `<Uploader />`: drag/drop, progress, single/multiple, accepts/types, size limits
+
+## Installation
+
+```bash
+npm install @upfiles/uploader
+# or
+pnpm add @upfiles/uploader
+# or
+yarn add @upfiles/uploader
+```
+
+## Server prerequisites
+
+Your server must expose a presign endpoint compatible with:
+
+- Method: `POST`
+- Path: `/api/upload/presigned-url` (configurable via `clientOptions.presignPath`)
+- Body: `{ fileName, fileType, fileSize? }`
+- Response: `{ presignedUrl, fileKey, publicUrl }`
+
+This repository already provides that at `src/app/api/upload/presigned-url/route.ts`.
+
+If your server requires auth, pass cookies (withCredentials) or an Authorization header in `clientOptions.headers`.
+
+## Basic usage (React)
+
+```tsx
+import { Uploader } from '@upfiles/uploader';
+
+export default function Page() {
+  return (
+    <Uploader
+      clientOptions={{
+        baseUrl: process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:4000',
+        // headers: { Authorization: `Bearer ${token}` },
+        withCredentials: true, // if your server uses NextAuth session cookies
+      }}
+      multiple
+      accept={["image/*", "application/pdf"]}
+      maxFileSize={100 * 1024 * 1024}
+      onComplete={(files) => {
+        console.log('uploaded:', files);
+      }}
+      onError={(err) => {
+        console.error(err);
+      }}
+      dropzoneClassName="border border-dashed rounded-md p-6 cursor-pointer"
+      buttonClassName="px-3 py-2 rounded bg-blue-600 text-white"
+    />
+  );
+}
+```
+
+## Basic usage (vanilla JS)
+
+```ts
+import { UpfilesClient } from '@upfiles/uploader';
+
+const client = new UpfilesClient({
+  baseUrl: 'http://localhost:4000',
+  withCredentials: true,
+});
+
+async function upload(file) {
+  const { presignedUrl, publicUrl } = await client.getPresignedUrl({
+    fileName: file.name,
+    fileType: file.type,
+    fileSize: file.size,
+  });
+  const res = await client.uploadToS3(presignedUrl, file);
+  if (!res.ok) throw new Error('Upload failed');
+  return publicUrl;
+}
+```
+
+## API
+
+- `new UpfilesClient(options)`
+  - `baseUrl` (required): your UpFiles app base URL
+  - `presignPath` (optional): default `/api/upload/presigned-url`
+  - `headers` (optional): headers for your server, e.g. Authorization
+  - `withCredentials` (optional): `true` to send cookies
+- `client.getPresignedUrl({ fileName, fileType, fileSize? })`
+- `client.uploadToS3(presignedUrl, file)`
+
+- `<Uploader />` props
+  - `clientOptions`: same as `UpfilesClient` options
+  - `multiple` (default true)
+  - `accept` (array of MIME patterns)
+  - `maxFileSize` (bytes, default 100MB)
+  - `maxFiles` (default 10)
+  - `onComplete(files)` and `onError(error)`
+  - `className`, `buttonClassName`, `dropzoneClassName`
+  - `children`: custom dropzone inner content
+
+## Notes
+
+- Ensure CORS for your app domain (S3 bucket CORS and your server CORS as needed).
+- For cross-origin usage with cookies (NextAuth), set `withCredentials: true` and configure your server to allow credentials.
+- Consider adding API token auth if distributing the SDK publicly.

package/dist/index.d.mts

@@ -0,0 +1,59 @@
+import React from 'react';
+
+type PresignResponse = {
+    presignedUrl: string;
+    fileKey: string;
+    publicUrl: string;
+};
+type UpfilesClientOptions = {
+    baseUrl: string;
+    presignPath?: string;
+    headers?: Record<string, string>;
+    withCredentials?: boolean;
+};
+declare class UpfilesClient {
+    private baseUrl;
+    private presignPath;
+    private headers?;
+    private withCredentials?;
+    constructor(opts: UpfilesClientOptions);
+    getPresignedUrl(params: {
+        fileName: string;
+        fileType: string;
+        fileSize?: number;
+        projectId?: string;
+        folderPath?: string;
+    }): Promise<PresignResponse>;
+    uploadToS3(presignedUrl: string, file: File): Promise<Response>;
+}
+
+type UploaderFile = {
+    id: string;
+    file: File;
+    name: string;
+    size: number;
+    type: string;
+    progress: number;
+    status: 'pending' | 'uploading' | 'success' | 'error';
+    error?: string;
+    publicUrl?: string;
+    fileKey?: string;
+};
+type UploaderProps = {
+    clientOptions: UpfilesClientOptions;
+    multiple?: boolean;
+    accept?: string[];
+    maxFileSize?: number;
+    maxFiles?: number;
+    projectId?: string;
+    folderPath?: string;
+    onComplete?: (files: UploaderFile[]) => void;
+    onError?: (error: Error) => void;
+    className?: string;
+    buttonClassName?: string;
+    dropzoneClassName?: string;
+    children?: React.ReactNode;
+};
+declare const Uploader: React.FC<UploaderProps>;
+
+export { type PresignResponse, UpfilesClient, type UpfilesClientOptions, Uploader, type UploaderFile, type UploaderProps };

package/dist/index.d.ts

@@ -0,0 +1,59 @@
+import React from 'react';
+
+type PresignResponse = {
+    presignedUrl: string;
+    fileKey: string;
+    publicUrl: string;
+};
+type UpfilesClientOptions = {
+    baseUrl: string;
+    presignPath?: string;
+    headers?: Record<string, string>;
+    withCredentials?: boolean;
+};
+declare class UpfilesClient {
+    private baseUrl;
+    private presignPath;
+    private headers?;
+    private withCredentials?;
+    constructor(opts: UpfilesClientOptions);
+    getPresignedUrl(params: {
+        fileName: string;
+        fileType: string;
+        fileSize?: number;
+        projectId?: string;
+        folderPath?: string;
+    }): Promise<PresignResponse>;
+    uploadToS3(presignedUrl: string, file: File): Promise<Response>;
+}
+
+type UploaderFile = {
+    id: string;
+    file: File;
+    name: string;
+    size: number;
+    type: string;
+    progress: number;
+    status: 'pending' | 'uploading' | 'success' | 'error';
+    error?: string;
+    publicUrl?: string;
+    fileKey?: string;
+};
+type UploaderProps = {
+    clientOptions: UpfilesClientOptions;
+    multiple?: boolean;
+    accept?: string[];
+    maxFileSize?: number;
+    maxFiles?: number;
+    projectId?: string;
+    folderPath?: string;
+    onComplete?: (files: UploaderFile[]) => void;
+    onError?: (error: Error) => void;
+    className?: string;
+    buttonClassName?: string;
+    dropzoneClassName?: string;
+    children?: React.ReactNode;
+};
+declare const Uploader: React.FC<UploaderProps>;
+
+export { type PresignResponse, UpfilesClient, type UpfilesClientOptions, Uploader, type UploaderFile, type UploaderProps };

package/dist/index.js

@@ -0,0 +1,266 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  UpfilesClient: () => UpfilesClient,
+  Uploader: () => Uploader
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/client.ts
+var UpfilesClient = class {
+  constructor(opts) {
+    this.baseUrl = opts.baseUrl.replace(/\/$/, "");
+    this.presignPath = opts.presignPath ?? "/api/upload/presigned-url";
+    this.headers = opts.headers;
+    this.withCredentials = opts.withCredentials;
+  }
+  async getPresignedUrl(params) {
+    const res = await fetch(`${this.baseUrl}${this.presignPath}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        ...this.headers || {}
+      },
+      credentials: this.withCredentials ? "include" : "same-origin",
+      body: JSON.stringify(params)
+    });
+    if (!res.ok) {
+      let msg = "Failed to get upload URL";
+      try {
+        const data = await res.json();
+        msg = data.error || msg;
+      } catch {
+      }
+      throw new Error(msg);
+    }
+    return res.json();
+  }
+  async uploadToS3(presignedUrl, file) {
+    return fetch(presignedUrl, {
+      method: "PUT",
+      body: file,
+      headers: {
+        "Content-Type": file.type
+      }
+    });
+  }
+};
+
+// src/Uploader.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Uploader = ({
+  clientOptions,
+  multiple = true,
+  accept = ["image/*", "video/*", "audio/*", "application/pdf", "text/plain", "application/json"],
+  maxFileSize = 100 * 1024 * 1024,
+  maxFiles = 10,
+  onComplete,
+  onError,
+  className,
+  buttonClassName,
+  dropzoneClassName,
+  children,
+  projectId,
+  folderPath
+}) => {
+  const inputRef = (0, import_react.useRef)(null);
+  const client = (0, import_react.useMemo)(() => new UpfilesClient(clientOptions), [clientOptions]);
+  const [files, setFiles] = (0, import_react.useState)([]);
+  const [isUploading, setIsUploading] = (0, import_react.useState)(false);
+  const [isDragOver, setIsDragOver] = (0, import_react.useState)(false);
+  const addFiles = (0, import_react.useCallback)((incoming) => {
+    const filtered = incoming.filter((f) => {
+      if (f.size > maxFileSize) {
+        return false;
+      }
+      return true;
+    });
+    const limited = filtered.slice(0, Math.max(0, maxFiles - files.length));
+    const mapped = limited.map((f) => ({
+      id: Math.random().toString(36).slice(2),
+      file: f,
+      name: f.name,
+      size: f.size,
+      type: f.type,
+      progress: 0,
+      status: "pending"
+    }));
+    setFiles((prev) => [...prev, ...mapped]);
+  }, [files.length, maxFileSize, maxFiles]);
+  const onInputChange = (0, import_react.useCallback)((e) => {
+    const fs = Array.from(e.target.files || []);
+    addFiles(fs);
+    if (inputRef.current) inputRef.current.value = "";
+  }, [addFiles]);
+  const handleDrop = (0, import_react.useCallback)((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(false);
+    addFiles(Array.from(e.dataTransfer.files || []));
+  }, [addFiles]);
+  const uploadOne = (0, import_react.useCallback)(async (item) => {
+    const update = (patch) => {
+      setFiles((prev) => prev.map((f) => f.id === item.id ? { ...f, ...patch } : f));
+    };
+    try {
+      update({ status: "uploading", progress: 1 });
+      const presign = await client.getPresignedUrl({
+        fileName: item.name,
+        fileType: item.type,
+        fileSize: item.size,
+        projectId,
+        folderPath
+      });
+      await new Promise((resolve, reject) => {
+        const xhr = new XMLHttpRequest();
+        xhr.open("PUT", presign.presignedUrl, true);
+        xhr.upload.onprogress = (ev) => {
+          if (ev.lengthComputable) {
+            const pct = Math.min(99, Math.floor(ev.loaded / ev.total * 100));
+            update({ progress: pct });
+          }
+        };
+        xhr.onload = () => {
+          if (xhr.status >= 200 && xhr.status < 300) {
+            resolve();
+          } else {
+            reject(new Error(`Upload failed with status ${xhr.status}`));
+          }
+        };
+        xhr.onerror = () => reject(new Error("Network error during upload"));
+        xhr.setRequestHeader("Content-Type", item.type || "application/octet-stream");
+        xhr.send(item.file);
+      });
+      update({ status: "success", progress: 100, fileKey: presign.fileKey, publicUrl: presign.publicUrl });
+      return { ...item, status: "success", progress: 100, fileKey: presign.fileKey, publicUrl: presign.publicUrl };
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Upload failed";
+      update({ status: "error", error: message });
+      throw err;
+    }
+  }, [client]);
+  const uploadAll = (0, import_react.useCallback)(async () => {
+    const targets = files.filter((f) => f.status === "pending");
+    if (!targets.length) return;
+    setIsUploading(true);
+    try {
+      const results = [];
+      for (const f of targets) {
+        try {
+          const done = await uploadOne(f);
+          results.push(done);
+        } catch (e) {
+        }
+      }
+      onComplete?.(results.filter((f) => f.status === "success"));
+    } catch (e) {
+      onError?.(e);
+    } finally {
+      setIsUploading(false);
+    }
+  }, [files, onComplete, onError, uploadOne]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        style: { display: "none" },
+        multiple,
+        accept: accept.join(","),
+        onChange: onInputChange
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: dropzoneClassName,
+        onDragOver: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          setIsDragOver(true);
+        },
+        onDragLeave: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          setIsDragOver(false);
+        },
+        onDrop: handleDrop,
+        onClick: () => inputRef.current?.click(),
+        role: "button",
+        "aria-label": "Upload files",
+        children: children ?? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { textAlign: "center", padding: 16 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontWeight: 600 }, children: "Drop files here or click to browse" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { fontSize: 12, color: "#666" }, children: [
+            multiple ? `Up to ${maxFiles} files` : "Single file",
+            " \u2022 Max ",
+            (maxFileSize / (1024 * 1024)).toFixed(0),
+            "MB"
+          ] })
+        ] })
+      }
+    ),
+    files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginTop: 12 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: 8, marginBottom: 8 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            className: buttonClassName,
+            disabled: isUploading || files.every((f) => f.status !== "pending"),
+            onClick: uploadAll,
+            children: isUploading ? "Uploading..." : "Upload"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            className: buttonClassName,
+            disabled: isUploading,
+            onClick: () => setFiles([]),
+            children: "Clear"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { style: { display: "grid", gap: 8, listStyle: "none", padding: 0 }, children: files.map((f) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { style: { border: "1px solid #e5e7eb", borderRadius: 8, padding: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { minWidth: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis" }, children: f.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { fontSize: 12, color: "#666" }, children: [
+            (f.size / (1024 * 1024)).toFixed(2),
+            " MB"
+          ] }),
+          f.error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 12, color: "#b91c1c" }, children: f.error }),
+          f.publicUrl && f.status === "success" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: f.publicUrl, target: "_blank", rel: "noreferrer", style: { fontSize: 12, color: "#2563eb" }, children: "View" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { minWidth: 120, textAlign: "right" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { height: 6, background: "#e5e7eb", borderRadius: 999, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: `${f.progress}%`, height: "100%", background: f.status === "error" ? "#ef4444" : "#2563eb" } }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 12, color: "#666", marginTop: 4 }, children: f.status })
+        ] })
+      ] }) }, f.id)) })
+    ] })
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  UpfilesClient,
+  Uploader
+});

package/dist/index.mjs

@@ -0,0 +1,238 @@
+// src/client.ts
+var UpfilesClient = class {
+  constructor(opts) {
+    this.baseUrl = opts.baseUrl.replace(/\/$/, "");
+    this.presignPath = opts.presignPath ?? "/api/upload/presigned-url";
+    this.headers = opts.headers;
+    this.withCredentials = opts.withCredentials;
+  }
+  async getPresignedUrl(params) {
+    const res = await fetch(`${this.baseUrl}${this.presignPath}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        ...this.headers || {}
+      },
+      credentials: this.withCredentials ? "include" : "same-origin",
+      body: JSON.stringify(params)
+    });
+    if (!res.ok) {
+      let msg = "Failed to get upload URL";
+      try {
+        const data = await res.json();
+        msg = data.error || msg;
+      } catch {
+      }
+      throw new Error(msg);
+    }
+    return res.json();
+  }
+  async uploadToS3(presignedUrl, file) {
+    return fetch(presignedUrl, {
+      method: "PUT",
+      body: file,
+      headers: {
+        "Content-Type": file.type
+      }
+    });
+  }
+};
+
+// src/Uploader.tsx
+import { useCallback, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Uploader = ({
+  clientOptions,
+  multiple = true,
+  accept = ["image/*", "video/*", "audio/*", "application/pdf", "text/plain", "application/json"],
+  maxFileSize = 100 * 1024 * 1024,
+  maxFiles = 10,
+  onComplete,
+  onError,
+  className,
+  buttonClassName,
+  dropzoneClassName,
+  children,
+  projectId,
+  folderPath
+}) => {
+  const inputRef = useRef(null);
+  const client = useMemo(() => new UpfilesClient(clientOptions), [clientOptions]);
+  const [files, setFiles] = useState([]);
+  const [isUploading, setIsUploading] = useState(false);
+  const [isDragOver, setIsDragOver] = useState(false);
+  const addFiles = useCallback((incoming) => {
+    const filtered = incoming.filter((f) => {
+      if (f.size > maxFileSize) {
+        return false;
+      }
+      return true;
+    });
+    const limited = filtered.slice(0, Math.max(0, maxFiles - files.length));
+    const mapped = limited.map((f) => ({
+      id: Math.random().toString(36).slice(2),
+      file: f,
+      name: f.name,
+      size: f.size,
+      type: f.type,
+      progress: 0,
+      status: "pending"
+    }));
+    setFiles((prev) => [...prev, ...mapped]);
+  }, [files.length, maxFileSize, maxFiles]);
+  const onInputChange = useCallback((e) => {
+    const fs = Array.from(e.target.files || []);
+    addFiles(fs);
+    if (inputRef.current) inputRef.current.value = "";
+  }, [addFiles]);
+  const handleDrop = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(false);
+    addFiles(Array.from(e.dataTransfer.files || []));
+  }, [addFiles]);
+  const uploadOne = useCallback(async (item) => {
+    const update = (patch) => {
+      setFiles((prev) => prev.map((f) => f.id === item.id ? { ...f, ...patch } : f));
+    };
+    try {
+      update({ status: "uploading", progress: 1 });
+      const presign = await client.getPresignedUrl({
+        fileName: item.name,
+        fileType: item.type,
+        fileSize: item.size,
+        projectId,
+        folderPath
+      });
+      await new Promise((resolve, reject) => {
+        const xhr = new XMLHttpRequest();
+        xhr.open("PUT", presign.presignedUrl, true);
+        xhr.upload.onprogress = (ev) => {
+          if (ev.lengthComputable) {
+            const pct = Math.min(99, Math.floor(ev.loaded / ev.total * 100));
+            update({ progress: pct });
+          }
+        };
+        xhr.onload = () => {
+          if (xhr.status >= 200 && xhr.status < 300) {
+            resolve();
+          } else {
+            reject(new Error(`Upload failed with status ${xhr.status}`));
+          }
+        };
+        xhr.onerror = () => reject(new Error("Network error during upload"));
+        xhr.setRequestHeader("Content-Type", item.type || "application/octet-stream");
+        xhr.send(item.file);
+      });
+      update({ status: "success", progress: 100, fileKey: presign.fileKey, publicUrl: presign.publicUrl });
+      return { ...item, status: "success", progress: 100, fileKey: presign.fileKey, publicUrl: presign.publicUrl };
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Upload failed";
+      update({ status: "error", error: message });
+      throw err;
+    }
+  }, [client]);
+  const uploadAll = useCallback(async () => {
+    const targets = files.filter((f) => f.status === "pending");
+    if (!targets.length) return;
+    setIsUploading(true);
+    try {
+      const results = [];
+      for (const f of targets) {
+        try {
+          const done = await uploadOne(f);
+          results.push(done);
+        } catch (e) {
+        }
+      }
+      onComplete?.(results.filter((f) => f.status === "success"));
+    } catch (e) {
+      onError?.(e);
+    } finally {
+      setIsUploading(false);
+    }
+  }, [files, onComplete, onError, uploadOne]);
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        style: { display: "none" },
+        multiple,
+        accept: accept.join(","),
+        onChange: onInputChange
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: dropzoneClassName,
+        onDragOver: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          setIsDragOver(true);
+        },
+        onDragLeave: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          setIsDragOver(false);
+        },
+        onDrop: handleDrop,
+        onClick: () => inputRef.current?.click(),
+        role: "button",
+        "aria-label": "Upload files",
+        children: children ?? /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: 16 }, children: [
+          /* @__PURE__ */ jsx("div", { style: { fontWeight: 600 }, children: "Drop files here or click to browse" }),
+          /* @__PURE__ */ jsxs("div", { style: { fontSize: 12, color: "#666" }, children: [
+            multiple ? `Up to ${maxFiles} files` : "Single file",
+            " \u2022 Max ",
+            (maxFileSize / (1024 * 1024)).toFixed(0),
+            "MB"
+          ] })
+        ] })
+      }
+    ),
+    files.length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginTop: 12 }, children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, marginBottom: 8 }, children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: buttonClassName,
+            disabled: isUploading || files.every((f) => f.status !== "pending"),
+            onClick: uploadAll,
+            children: isUploading ? "Uploading..." : "Upload"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: buttonClassName,
+            disabled: isUploading,
+            onClick: () => setFiles([]),
+            children: "Clear"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("ul", { style: { display: "grid", gap: 8, listStyle: "none", padding: 0 }, children: files.map((f) => /* @__PURE__ */ jsx("li", { style: { border: "1px solid #e5e7eb", borderRadius: 8, padding: 8 }, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+        /* @__PURE__ */ jsxs("div", { style: { minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx("div", { style: { fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis" }, children: f.name }),
+          /* @__PURE__ */ jsxs("div", { style: { fontSize: 12, color: "#666" }, children: [
+            (f.size / (1024 * 1024)).toFixed(2),
+            " MB"
+          ] }),
+          f.error && /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "#b91c1c" }, children: f.error }),
+          f.publicUrl && f.status === "success" && /* @__PURE__ */ jsx("a", { href: f.publicUrl, target: "_blank", rel: "noreferrer", style: { fontSize: 12, color: "#2563eb" }, children: "View" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { minWidth: 120, textAlign: "right" }, children: [
+          /* @__PURE__ */ jsx("div", { style: { height: 6, background: "#e5e7eb", borderRadius: 999, overflow: "hidden" }, children: /* @__PURE__ */ jsx("div", { style: { width: `${f.progress}%`, height: "100%", background: f.status === "error" ? "#ef4444" : "#2563eb" } }) }),
+          /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "#666", marginTop: 4 }, children: f.status })
+        ] })
+      ] }) }, f.id)) })
+    ] })
+  ] });
+};
+export {
+  UpfilesClient,
+  Uploader
+};

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@thetechfossil/upfiles",
+  "version": "0.1.0",
+  "description": "Lightweight client and React components to upload files to UpFiles API (presigned S3)",
+  "license": "MIT",
+  "author": "UpFiles",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/your-org/upfiles.git"
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.2"
+  }
+}