ultra-image-uploader 0.0.2 → 2.0.0

package/README.md

@@ -1,146 +1,321 @@
 # Ultra Image Uploader
 
-A modern React component for handling image uploads with drag-and-drop functionality, image preview, and ImgBB integration.
+<div align="center">
+
+A modern, beautiful React image upload component with support for multiple providers.
+
+[![npm version](https://badge.fury.io/js/ultra-image-uploader.svg)](https://www.npmjs.com/package/ultra-image-uploader)
+![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue)
+[![License: MIT](https://img.shields.io/badge/License-MIT-green)](https://opensource.org/licenses/MIT)
+
+**Modern UI** • **Multiple Providers** • **5 Themes** • **Production Ready**
+
+</div>
+
+---
 
 ## Features
 
-- 🎯 **Easy Integration** - Simple to use with any React/Next.js project
-- 🖼️ **Drag & Drop** - Intuitive drag and drop interface
-- 📸 **Image Preview** - Instant preview of uploaded images
-- ✨ **Multiple Upload** - Support for multiple image uploads
-- 🔍 **File Validation** - Built-in file type and size validation
-- 🎨 **Customizable** - Highly customizable styling and components
-- 🗑️ **Delete Function** - Easy image removal functionality
-- 🔄 **ImgBB Integration** - Built-in support for ImgBB image hosting
+- **Beautiful UI** - Modern, clean design with smooth animations
+- **5 Built-in Themes** - Light, Dark, Modern, Ocean, Sunset
+- **Custom Themes** - Create your own color schemes
+- **Multiple Providers** - ImgBB & Cloudinary support
+- **Drag & Drop** - Intuitive file handling
+- **Upload Progress** - Real-time progress tracking
+- **File Validation** - Type and size validation
+- **Auto Upload** - Optional automatic uploading
+- **TypeScript** - Fully typed
+- **Simple API** - Easy to use
 
 ## Installation
 
 ```bash
 npm install ultra-image-uploader
-# or
-yarn add ultra-image-uploader
-# or
-pnpm add ultra-image-uploader
 ```
 
 ## Quick Start
 
-### Basic Usage
-
 ```tsx
 import { ImageUploader } from "ultra-image-uploader";
 import { useState } from "react";
 
 function App() {
-  const [imageFiles, setImagesFiles] = useState<File[]>([]);
+  const [images, setImages] = useState<File[]>([]);
 
   return (
     <ImageUploader
-      images={imageFiles}
-      setImages={setImagesFiles}
-      mode="add"
-      multiple={true}
+      images={images}
+      setImages={setImages}
+      multiple
+      theme="light"
     />
   );
 }
 ```
 
-### With ImgBB Integration
+## Themes
+
+Choose from 5 beautiful themes:
+
+```tsx
+// Light (default)
+<ImageUploader theme="light" images={images} setImages={setImages} />
+
+// Dark
+<ImageUploader theme="dark" images={images} setImages={setImages} />
+
+// Modern (pink)
+<ImageUploader theme="modern" images={images} setImages={setImages} />
+
+// Ocean (cyan)
+<ImageUploader theme="ocean" images={images} setImages={setImages} />
+
+// Sunset (orange)
+<ImageUploader theme="sunset" images={images} setImages={setImages} />
+```
+
+## Custom Theme
+
+```tsx
+import { ImageUploader, type ThemeConfig } from "ultra-image-uploader";
+
+const customTheme: ThemeConfig = {
+  primary: '#ff6b6b',
+  background: '#fff',
+  border: '#ddd',
+  text: '#333',
+  textSecondary: '#666',
+  error: '#e74c3c',
+  success: '#2ecc71',
+  radius: '8px',
+};
+
+<ImageUploader
+  images={images}
+  setImages={setImages}
+  theme={customTheme}
+/>
+```
+
+## Upload to ImgBB
 
 ```tsx
 import { ImageUploader, uploadImagesToImageBB } from "ultra-image-uploader";
-import { useState } from "react";
 
-function ImageUploadForm() {
+function UploadToImgBB() {
   const [images, setImages] = useState<File[]>([]);
-  const [loading, setLoading] = useState(false);
-
-  const handleGetImageUrl = async () => {
-    setLoading(true);
-    try {
-      const result = await uploadImagesToImageBB(
-        images,
-        "your-imgbb-api-key-here"
-      );
-      console.log("Uploaded URLs:", result.urls);
-    } catch (error) {
-      console.error("Error uploading images:", error);
-    } finally {
-      setLoading(false);
-    }
+
+  const handleUpload = async () => {
+    const result = await uploadImagesToImageBB(images, 'YOUR_API_KEY');
+    console.log('Uploaded:', result.urls);
   };
 
   return (
     <div>
-      <ImageUploader
-        images={images}
-        setImages={setImages}
-        mode="add"
-        multiple={true}
-      />
-      <button
-        onClick={handleGetImageUrl}
-        disabled={loading || images.length === 0}
-        className="bg-blue-500 text-white p-2 rounded disabled:opacity-50"
-      >
-        {loading ? "Uploading..." : "Upload Images"}
-      </button>
+      <ImageUploader images={images} setImages={setImages} multiple />
+      <button onClick={handleUpload}>Upload</button>
     </div>
   );
 }
 ```
 
-## Component Props
-
-| Prop             | Type                     | Default    | Description |
-|------------------|--------------------------|------------|-------------|
-| `images`         | `File[]`                 | Required   | Array of selected image files |
-| `setImages`      | `(files: File[]) => void`| Required   | Function to update images array |
-| `mode`           | `"add" | "update"`      | Required   | Component operation mode |
-| `defaultImages`  | `string[]`               | `[]`       | Existing image URLs for update mode |
-| `multiple`       | `boolean`                | `false`    | Allow multiple file selection |
-| `inputStyles`    | `string`                 | `""`       | Custom CSS classes for upload input |
-| `containerStyles`| `string`                 | `""`       | Custom CSS classes for container |
-| `uploadText`     | `string`                 | `"Browse files or drag & drop"` | Upload area text |
-| `typeText`       | `string`                 | `"PNG, JPG, JPEG, WEBP"` | Allowed file types text |
+## Upload to Cloudinary
 
+```tsx
+import { ImageUploader, uploadImagesToCloudinary } from "ultra-image-uploader";
 
-## ImgBB Utility
+function UploadToCloudinary() {
+  const [images, setImages] = useState<File[]>([]);
 
-The package includes a utility function for uploading to ImgBB:
+  const handleUpload = async () => {
+    const results = await uploadImagesToCloudinary(images, {
+      cloudName: 'your-cloud-name',
+      uploadPreset: 'your-upload-preset',
+    });
+    console.log('Uploaded:', results.map(r => r.url));
+  };
 
-```ts
-interface ImageBBUrlResult {
-  urls: string[];
+  return (
+    <div>
+      <ImageUploader images={images} setImages={setImages} multiple theme="dark" />
+      <button onClick={handleUpload}>Upload</button>
+    </div>
+  );
 }
+```
 
-async function uploadImagesToImageBB(
-  images: File[],
-  apiKey: string
-): Promise<ImageBBUrlResult>
+## Auto Upload Mode
+
+```tsx
+<ImageUploader
+  images={images}
+  setImages={setImages}
+  multiple
+  autoUpload
+  uploadConfig={{
+    provider: 'imgbb',
+    config: { apiKey: 'your-api-key' },
+  }}
+  onUploadComplete={(urls) => console.log('Done!', urls)}
+  onUploadError={(error) => console.error('Error:', error)}
+/>
 ```
 
-## Development
+## Props
 
-To contribute to this project:
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `images` | `File[]` | **Required** | Selected image files |
+| `setImages` | `(files: File[]) => void` | **Required** | Update images state |
+| `multiple` | `boolean` | `false` | Allow multiple files |
+| `theme` | `'light' \| 'dark' \| 'modern' \| 'ocean' \| 'sunset' \| ThemeConfig` | `'light'` | Theme to use |
+| `mode` | `'add' \| 'update'` | `'add'` | Component mode |
+| `defaultImages` | `string[]` | `[]` | Existing image URLs |
+| `uploadText` | `string` | `'Drop images here...'` | Upload area text |
+| `maxSize` | `number` | `10485760` | Max file size (bytes) |
+| `allowedTypes` | `string[]` | Image types | Allowed MIME types |
+| `showFileSize` | `boolean` | `true` | Show file size |
+| `dragAndDrop` | `boolean` | `true` | Enable drag-drop |
+| `previewWidth` | `number` | `140` | Preview width (px) |
+| `previewHeight` | `number` | `140` | Preview height (px) |
+| `autoUpload` | `boolean` | `false` | Auto upload files |
+| `uploadConfig` | `{ provider, config }` | `undefined` | Upload config |
+| `onUploadComplete` | `(urls: string[]) => void` | `undefined` | Upload success callback |
+| `onUploadError` | `(error: Error) => void` | `undefined` | Upload error callback |
+| `className` | `string` | `''` | Extra CSS classes |
 
-1. Clone the repository
-2. Install dependencies:
-   ```bash
-   yarn
-   ```
-3. Make your changes
-4. Run the build:
-   ```bash
-   yarn build
-   ```
-5. Test your changes
-6. Submit a pull request
+## Upload Functions
+
+### `uploadImage(file, provider, config, options?)`
+
+Upload a single image.
+
+```tsx
+import { uploadImage } from "ultra-image-uploader";
+
+const result = await uploadImage(
+  file,
+  'imgbb',
+  { apiKey: 'your-key' },
+  {
+    onProgress: (p) => console.log(p.percentage + '%'),
+  }
+);
+console.log(result.url);
+```
+
+### `uploadImages(files, provider, config, options?)`
+
+Upload multiple images.
+
+```tsx
+const results = await uploadImages(files, 'cloudinary', {
+  cloudName: 'your-cloud',
+});
+```
+
+### `uploadImagesToImageBB(images, apiKey)`
+
+Upload to ImgBB (shorthand).
+
+```tsx
+const { urls } = await uploadImagesToImageBB(images, 'api-key');
+```
+
+### `uploadImagesToCloudinary(files, config, options?)`
+
+Upload to Cloudinary (shorthand).
+
+```tsx
+const results = await uploadImagesToCloudinary(images, {
+  cloudName: 'your-cloud',
+  uploadPreset: 'your-preset',
+});
+```
+
+## Get API Keys
+
+### ImgBB
+1. Go to [imgbb.com/settings/api](https://imgbb.com/settings/api)
+2. Copy your API key
+
+### Cloudinary
+1. Sign up at [cloudinary.com](https://cloudinary.com)
+2. Get your cloud name from dashboard
+3. Create upload preset (Settings → Upload)
+
+## TypeScript
+
+All types are exported:
+
+```tsx
+import type {
+  UploadProvider,
+  UploadResult,
+  ThemeConfig,
+  ImageUploaderProps,
+  FileValidationOptions,
+  // ... more
+} from "ultra-image-uploader";
+```
+
+## Examples
+
+### Profile Picture
+
+```tsx
+<ImageUploader
+  images={avatar}
+  setImages={setAvatar}
+  multiple={false}
+  maxSize={2 * 1024 * 1024}
+  theme="modern"
+/>
+```
+
+### Product Gallery
+
+```tsx
+<ImageUploader
+  images={products}
+  setImages={setProducts}
+  multiple
+  mode="update"
+  defaultImages={existingImages}
+  allowedTypes={['image/jpeg', 'image/webp']}
+  theme="ocean"
+/>
+```
+
+### Custom Colors
+
+```tsx
+<ImageUploader
+  images={images}
+  setImages={setImages}
+  theme={{
+    primary: '#00d9ff',
+    background: '#0a0a0a',
+    border: '#333',
+    text: '#fff',
+    textSecondary: '#999',
+    error: '#ff4757',
+    success: '#2ed573',
+    radius: '16px',
+  }}
+/>
+```
 
 ## License
 
 MIT © Digontha Das
 
-## Support
+## Links
+
+- [GitHub](https://github.com/digontha/ultra-image-uploader)
+- [NPM](https://www.npmjs.com/package/ultra-image-uploader)
+- [Issues](https://github.com/digontha/ultra-image-uploader/issues)
+
+---
 
-For support or feature requests, please [open an issue](https://github.com/Digontha/ultra_image_uploader) on GitHub.
+Made with ❤️ by [Digontha Das](https://github.com/digontha)

package/dist/components/ImageUploader.d.ts

@@ -1,12 +1,27 @@
+import type { UploadProvider, ProviderConfig, ThemeConfig } from '../types';
+export declare const themes: Record<string, ThemeConfig>;
 export interface ImageUploaderProps {
     images: File[];
     setImages: (images: File[]) => void;
-    mode: "add" | "update";
+    mode?: 'add' | 'update';
     defaultImages?: string[];
     multiple?: boolean;
-    inputStyles?: string;
-    containerStyles?: string;
+    theme?: keyof typeof themes | ThemeConfig;
     uploadText?: string;
-    typeText?: string;
+    maxSize?: number;
+    allowedTypes?: string[];
+    showFileSize?: boolean;
+    dragAndDrop?: boolean;
+    previewWidth?: number;
+    previewHeight?: number;
+    className?: string;
+    autoUpload?: boolean;
+    uploadConfig?: {
+        provider: UploadProvider;
+        config: ProviderConfig;
+    };
+    onUploadComplete?: (urls: string[]) => void;
+    onUploadError?: (error: Error) => void;
 }
-export declare function ImageUploader({ images, setImages, mode, defaultImages, multiple, inputStyles, containerStyles, uploadText, typeText, }: ImageUploaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ImageUploader({ images, setImages, mode, defaultImages, multiple, theme, uploadText, maxSize, allowedTypes, showFileSize, dragAndDrop, previewWidth, previewHeight, className, autoUpload, uploadConfig, onUploadComplete, onUploadError, }: ImageUploaderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ImageUploader.d.ts.map

package/dist/components/ImageUploader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageUploader.d.ts","sourceRoot":"","sources":["../../src/components/ImageUploader.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAK5E,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAmD9C,CAAC;AAEF,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,IAAI,EAAE,CAAC;IACf,SAAS,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACpC,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,OAAO,MAAM,GAAG,WAAW,CAAC;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE;QACb,QAAQ,EAAE,cAAc,CAAC;QACzB,MAAM,EAAE,cAAc,CAAC;KACxB,CAAC;IACF,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC5C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACxC;AAMD,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,SAAS,EACT,IAAY,EACZ,aAAkB,EAClB,QAAgB,EAChB,KAAe,EACf,UAAkD,EAClD,OAA0B,EAC1B,YAAkF,EAClF,YAAmB,EACnB,WAAkB,EAClB,YAAkB,EAClB,aAAmB,EACnB,SAAc,EACd,UAAkB,EAClB,YAAY,EACZ,gBAAgB,EAChB,aAAa,GACd,EAAE,kBAAkB,2CAqTpB"}