@igorvaryvoda/sirv-upload-widget 0.1.0

package/README.md

@@ -0,0 +1,185 @@
+# @sirv/upload-widget
+
+A React file upload widget for [Sirv CDN](https://sirv.com) with batch uploads, CSV/Excel import, and file browser.
+
+## Features
+
+- **Drag & drop** file upload with progress tracking
+- **Batch uploads** with configurable concurrency
+- **CSV/Excel import** for bulk URL imports
+- **Sirv file picker** to browse existing files
+- **HEIC/HEIF conversion** for iPhone photos
+- **Presigned URL support** for secure direct uploads
+- **Customizable styling** via CSS variables
+- **TypeScript** support with full type definitions
+
+## Installation
+
+```bash
+npm install @sirv/upload-widget
+# or
+yarn add @sirv/upload-widget
+# or
+pnpm add @sirv/upload-widget
+```
+
+## Quick Start
+
+### 1. Create a presign endpoint on your backend
+
+The widget uploads directly to Sirv using presigned URLs. Your backend just needs one endpoint:
+
+```typescript
+// app/api/sirv/presign/route.ts (Next.js)
+import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3'
+import { getSignedUrl } from '@aws-sdk/s3-request-presigner'
+
+const s3 = new S3Client({
+  endpoint: 'https://s3.sirv.com',
+  region: 'us-east-1',
+  credentials: {
+    accessKeyId: process.env.SIRV_S3_KEY!,
+    secretAccessKey: process.env.SIRV_S3_SECRET!,
+  },
+  forcePathStyle: true,
+})
+
+export async function POST(req: Request) {
+  const { filename, contentType, folder } = await req.json()
+  const key = `${folder}/${filename}`.replace(/^\/+/, '')
+
+  const uploadUrl = await getSignedUrl(s3, new PutObjectCommand({
+    Bucket: process.env.SIRV_BUCKET!,
+    Key: key,
+    ContentType: contentType,
+  }), { expiresIn: 300 })
+
+  return Response.json({
+    uploadUrl,
+    publicUrl: `https://${process.env.SIRV_BUCKET}.sirv.com/${key}`,
+    path: '/' + key,
+  })
+}
+```
+
+### 2. Use the widget in your React app
+
+```tsx
+import { SirvUploader } from '@sirv/upload-widget'
+import '@sirv/upload-widget/styles.css'
+
+export default function UploadPage() {
+  return (
+    <SirvUploader
+      presignEndpoint="/api/sirv/presign"
+      folder="/uploads"
+      onUpload={(files) => {
+        console.log('Uploaded files:', files)
+      }}
+    />
+  )
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `presignEndpoint` | `string` | - | **Recommended.** URL to get presigned upload URLs |
+| `proxyEndpoint` | `string` | - | Alternative: URL for full proxy mode |
+| `folder` | `string` | `"/"` | Default upload folder |
+| `onUpload` | `(files: SirvFile[]) => void` | - | Callback when files are uploaded |
+| `onError` | `(error: string, file?: SirvFile) => void` | - | Callback on upload errors |
+| `features` | `object` | - | Enable/disable features (see below) |
+| `maxFiles` | `number` | `50` | Maximum files for batch upload |
+| `maxFileSize` | `number` | `10485760` | Maximum file size in bytes |
+| `autoUpload` | `boolean` | `true` | Start upload immediately on file selection |
+| `concurrency` | `number` | `3` | Number of concurrent uploads |
+| `onConflict` | `'overwrite' \| 'rename' \| 'skip' \| 'ask'` | `'rename'` | Filename conflict handling |
+| `disabled` | `boolean` | `false` | Disable the widget |
+| `compact` | `boolean` | `false` | Compact mode for smaller spaces |
+| `labels` | `object` | - | Custom labels for i18n |
+| `className` | `string` | - | Custom CSS class |
+
+### Features Object
+
+```typescript
+features?: {
+  batch?: boolean      // Enable batch upload (default: true)
+  csvImport?: boolean  // Enable CSV/Excel import (default: true)
+  filePicker?: boolean // Enable Sirv file browser (default: true)
+  dragDrop?: boolean   // Enable drag & drop (default: true)
+}
+```
+
+## Styling
+
+Customize the widget using CSS variables:
+
+```css
+.sirv-uploader {
+  --sirv-primary: #0066cc;
+  --sirv-primary-hover: #0052a3;
+  --sirv-bg: #ffffff;
+  --sirv-text: #1e293b;
+  --sirv-border: #e2e8f0;
+  --sirv-radius: 8px;
+  /* ... see styles.css for all variables */
+}
+```
+
+## Individual Components
+
+For custom layouts, you can use the components individually:
+
+```tsx
+import {
+  DropZone,
+  FileList,
+  FilePicker,
+  SpreadsheetImport,
+  useSirvUpload,
+} from '@sirv/upload-widget'
+```
+
+## TypeScript
+
+Full TypeScript support with exported types:
+
+```typescript
+import type {
+  SirvFile,
+  SirvUploaderProps,
+  PresignRequest,
+  PresignResponse,
+} from '@sirv/upload-widget'
+```
+
+## Backend Examples
+
+### Cloudflare Workers (One-Click Deploy)
+
+[![Deploy to Cloudflare Workers](https://deploy.workers.cloudflare.com/button)](https://deploy.workers.cloudflare.com/?url=https://github.com/IgorVaryvoda/sirv-uploader/tree/main/examples/cloudflare-worker)
+
+You'll be prompted for your Sirv account name and S3 credentials during deployment.
+
+### Other Examples
+
+See the `/examples` folder for:
+- `cloudflare-worker/` - Cloudflare Workers (with deploy button)
+- `nextjs-presign.ts` - Next.js API route
+- `express-presign.ts` - Express.js server
+
+## How It Works
+
+1. User selects files in the widget
+2. Widget requests a presigned URL from your backend
+3. Your backend generates the URL using AWS SDK with Sirv's S3 endpoint
+4. Widget uploads directly to Sirv using the presigned URL
+5. File is available at `https://youraccount.sirv.com/path/to/file.jpg`
+
+This approach keeps your Sirv credentials secure on the server while allowing fast, direct uploads from the browser.
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@igorvaryvoda/sirv-upload-widget",
+  "version": "0.1.0",
+  "description": "A React file upload widget for Sirv CDN with batch uploads, CSV/Excel import, and file browser",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "clsx": "^2.1.0"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^5.1.2",
+    "jsdom": "^27.4.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "vitest": "^4.0.17"
+  },
+  "optionalDependencies": {
+    "exceljs": "^4.4.0",
+    "heic2any": "^0.0.4"
+  },
+  "keywords": [
+    "sirv",
+    "upload",
+    "file-upload",
+    "react",
+    "cdn",
+    "image-upload",
+    "batch-upload",
+    "csv-import",
+    "drag-drop"
+  ],
+  "author": "Sirv",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sirv/upload-widget"
+  },
+  "homepage": "https://sirv.com"
+}