ultra-image-uploader 0.0.1

package/README.md

@@ -0,0 +1,201 @@
+# Ultra Image Uploader
+
+A modern React component for handling image uploads with drag-and-drop functionality, image preview, and ImgBB integration.
+
+## 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
+
+## Installation
+
+```bash
+npm install ultra-image-uploaderer
+# or
+yarn add ultra-image-uploaderer
+# or
+pnpm add ultra-image-uploaderer
+```
+
+## Quick Start
+
+### Basic Usage
+
+```tsx
+import { ImageUploader, imageUrl } from "ultra-image-uploaderer";
+import { useState } from "react";
+
+function App() {
+  const [images, setImages] = useState<File[]>([]);
+
+  return (
+    <ImageUploader
+      images={images}
+      setImages={setImages}
+      mode="add"
+      multiple={true}
+    />
+  );
+}
+```
+
+### With ImgBB Integration
+
+```tsx
+import { ImageUploader, imageUrl } from "ultra-image-uploaderer";
+import { useState } from "react";
+
+function ImageUploadForm() {
+  const [images, setImages] = useState<File[]>([]);
+
+  const handleSubmit = async () => {
+    try {
+      const uploadedUrls = await imageUrl(images, "YOUR_IMGBB_API_KEY");
+      console.log("Uploaded image URLs:", uploadedUrls);
+    } catch (error) {
+      console.error("Upload failed:", error);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <ImageUploader
+        images={images}
+        setImages={setImages}
+        mode="add"
+        multiple={true}
+      />
+      <button type="submit">Upload Images</button>
+    </form>
+  );
+}
+```
+
+## Component Props
+
+| Prop                    | Type                                  | Default                       | Description                      |
+| ----------------------- | ------------------------------------- | ----------------------------- | -------------------------------- |
+| `images`                | `File[]`                              | Required                      | Array of selected image files    |
+| `setImages`             | `(images: File[]) => void`            | Required                      | Function to update images array  |
+| `mode`                  | `"add" \| "update"`                   | Required                      | Mode of operation                |
+| `defaultImages`         | `string[]`                            | `[]`                          | Array of existing image URLs     |
+| `multiple`              | `boolean`                             | `false`                       | Allow multiple file selection    |
+| `maxFileSize`           | `number`                              | `5242880`                     | Maximum file size in bytes (5MB) |
+| `allowedFileTypes`      | `string[]`                            | `["image/jpeg", "image/png"]` | Allowed MIME types               |
+| `containerClassName`    | `string`                              | `""`                          | Custom container class           |
+| `uploadBoxClassName`    | `string`                              | `""`                          | Custom upload box class          |
+| `imageClassName`        | `string`                              | `""`                          | Custom image preview class       |
+| `uploadBoxStyle`        | `React.CSSProperties`                 | `{}`                          | Custom upload box styles         |
+| `imageStyle`            | `React.CSSProperties`                 | `{}`                          | Custom image preview styles      |
+| `uploadIcon`            | `React.ReactNode`                     | `<UploadCloudIcon />`         | Custom upload icon               |
+| `deleteIcon`            | `React.ReactNode`                     | `<TrashIcon />`               | Custom delete icon               |
+| `uploadText`            | `string`                              | `"Choose files to upload"`    | Upload box text                  |
+| `dragAndDropText`       | `string`                              | `"Drag and drop files here"`  | Drag and drop text               |
+| `fileTypeText`          | `string`                              | `"PNG, JPG, or JPEG files"`   | File type info text              |
+| `onUpload`              | `(files: File[]) => void`             | -                             | Upload callback                  |
+| `onRemove`              | `(file: File, index: number) => void` | -                             | Remove callback                  |
+| `onFileValidationError` | `(error: string) => void`             | -                             | Validation error callback        |
+
+## Usage Examples
+
+### Add Mode (New Upload)
+
+```tsx
+import { ImageUploader, imageUrl } from "ultra-image-uploaderer";
+
+function AddImage() {
+  const [images, setImages] = useState<File[]>([]);
+
+  const handleSubmit = async () => {
+    const imgUrls = await imageUrl(images, "YOUR_IMGBB_API_KEY");
+    // Handle the uploaded image URLs
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <ImageUploader
+        images={images}
+        setImages={setImages}
+        mode="add"
+        multiple={true}
+        uploadBoxClassName="border-3 border-dashed p-5"
+        imageClassName="w-20 h-20"
+      />
+      <button type="submit">Upload</button>
+    </form>
+  );
+}
+```
+
+### Update Mode (Edit Existing Images)
+
+```tsx
+function UpdateImage() {
+  const [images, setImages] = useState<File[]>([]);
+  const existingImages = ["https://example.com/image1.jpg"];
+
+  const handleSubmit = async () => {
+    const newImgUrls = await imageUrl(images, "YOUR_IMGBB_API_KEY");
+    // Combine existing and new images
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <ImageUploader
+        images={images}
+        setImages={setImages}
+        mode="update"
+        multiple={true}
+        defaultImages={existingImages}
+        uploadBoxClassName="border-3 border-dashed p-5"
+        imageClassName="w-20 h-20"
+      />
+      <button type="submit">Update</button>
+    </form>
+  );
+}
+```
+
+## Styling
+
+The component uses Tailwind CSS classes by default but can be customized using className props:
+
+```tsx
+<ImageUploader
+  images={images}
+  setImages={setImages}
+  mode="add"
+  containerClassName="max-w-2xl mx-auto"
+  uploadBoxClassName="border-2 border-dashed border-blue-500 rounded-lg"
+  imageClassName="rounded-lg shadow-md"
+/>
+```
+
+## ImgBB Integration
+
+The package includes a utility function `imageUrl` for uploading images to ImgBB:
+
+```typescript
+const uploadImages = async (files: File[]) => {
+  try {
+    const urls = await imageUrl(files, "YOUR_IMGBB_API_KEY");
+    console.log("Uploaded URLs:", urls);
+  } catch (error) {
+    console.error("Upload failed:", error);
+  }
+};
+```
+
+## License
+
+MIT
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.

package/dist/components/ImageUploader.d.ts

@@ -0,0 +1,12 @@
+export interface ImageUploaderProps {
+    images: File[];
+    setImages: (images: File[]) => void;
+    mode: "add" | "update";
+    defaultImages?: string[];
+    multiple?: boolean;
+    inputStyles?: string;
+    containerStyles?: string;
+    uploadText?: string;
+    typeText?: string;
+}
+export declare function ImageUploader({ images, setImages, mode, defaultImages, multiple, inputStyles, containerStyles, uploadText, typeText, }: ImageUploaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ImageUploader.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TrashIcon, UploadCloudIcon } from "lucide-react";
+import { useState } from "react";
+export function ImageUploader({ images, setImages, mode, defaultImages = [], multiple = false, inputStyles = "", containerStyles = "", uploadText = "Browse files or drag & drop", typeText = "PNG, JPG, JPEG, WEBP", }) {
+    const [removedDefaultImages, setRemovedDefaultImages] = useState([]);
+    console.log(removedDefaultImages);
+    const handleImageChange = (e) => {
+        if (e.target.files && e.target.files.length > 0) {
+            const files = Array.from(e.target.files);
+            if (!multiple && files.length > 1) {
+                alert("Only one image can be uploaded at a time.");
+                return;
+            }
+            setImages(multiple ? [...images, ...files] : [files[0]]);
+        }
+    };
+    const removeImage = (index) => {
+        setImages(images.filter((_, i) => i !== index));
+    };
+    // Function to remove a default image
+    const removeDefaultImage = (index) => {
+        setRemovedDefaultImages((prev) => [...prev, index]);
+    };
+    return (_jsx("div", { className: `space-y-4 ${containerStyles}`, children: _jsxs("div", { className: "flex flex-wrap gap-4", children: [_jsxs("div", { className: `${inputStyles} h-40 w-full bg-gray-100 border border-gray-200 cursor-pointer flex justify-center items-center text-white text-center relative rounded-xs duration-300`, children: [_jsxs("div", { className: "flex flex-col items-center text-black", children: [_jsx(UploadCloudIcon, { className: "text-3xl text-gray-900 mb-1" }), _jsx("span", { className: "text-sm text-gray-800 font-semibold", children: uploadText }), _jsx("span", { className: "text-gray-600 text-xs", children: typeText })] }), _jsx("input", { type: "file", accept: "image/*", multiple: multiple, onChange: handleImageChange, className: "absolute inset-0 opacity-0 cursor-pointer rounded-lg" })] }), mode === "update" &&
+                    defaultImages.map((url, index) => !removedDefaultImages.includes(index) && (_jsxs("div", { className: "relative w-fit", children: [_jsx("img", { src: url, alt: `Existing Image ${index + 1}`, width: 100, height: 100, className: "h-32 w-32 object-cover rounded-sm border border-gray-200 cursor-pointer  hover:shadow-lg transition-shadow duration-200" }), _jsx(TrashIcon, { onClick: () => removeDefaultImage(index), className: "absolute -top-2 -right-2 rounded-full bg-red-600 text-2xl text-white cursor-pointer p-1 hover:bg-red-700 transition-colors duration-200" })] }, `default-${index}`))), images.map((image, index) => (_jsxs("div", { className: "relative w-fit", children: [_jsx("img", { src: URL.createObjectURL(image), alt: `Preview ${index + 1}`, width: 100, height: 100, className: "h-32 w-32 object-cover rounded-sm border border-gray-200 cursor-pointer  hover:shadow-lg  duration-200" }), _jsx(TrashIcon, { onClick: () => removeImage(index), className: "absolute -top-2 -right-2 rounded-full bg-red-600 text-2xl text-white cursor-pointer p-1 hover:bg-red-700 transition-colors duration-200" })] }, index)))] }) }));
+}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { ImageUploader } from './components/ImageUploader';
+export type { ImageUploaderProps } from './components/ImageUploader';
+export { uploadImagesToImageBB } from './utils/imageUpload';
+export type { ImageBBUrlResult } from './utils/imageUpload';

package/dist/index.js

@@ -0,0 +1,2 @@
+export { ImageUploader } from './components/ImageUploader';
+export { uploadImagesToImageBB } from './utils/imageUpload';

package/dist/utils/imageUpload.d.ts

@@ -0,0 +1,10 @@
+export interface ImageBBResponse {
+    success: boolean;
+    data: {
+        url: string;
+    };
+}
+export interface ImageBBUrlResult {
+    urls: string[];
+}
+export declare const uploadImagesToImageBB: (images: File[], apiKey: string) => Promise<ImageBBUrlResult>;

package/dist/utils/imageUpload.js

@@ -0,0 +1,31 @@
+const uploadImageToImageBB = async (imageFile, apiKey) => {
+    const formData = new FormData();
+    formData.append("image", imageFile);
+    try {
+        const response = await fetch(`https://api.imgbb.com/1/upload?key=${apiKey}`, {
+            method: "POST",
+            body: formData,
+        });
+        const data = await response.json();
+        if (data.success) {
+            return data.data.url;
+        }
+        else {
+            throw new Error("Image upload failed");
+        }
+    }
+    catch (error) {
+        console.error("Error uploading image:", error);
+        alert("❌ Failed to upload image. Please try again.");
+        return null;
+    }
+};
+export const uploadImagesToImageBB = async (images, apiKey) => {
+    const imageURLs = (await Promise.all(images.map((image) => uploadImageToImageBB(image, apiKey)))).filter((url) => url !== null);
+    if (imageURLs.length === 0) {
+        throw new Error("Failed to upload images");
+    }
+    return {
+        urls: imageURLs,
+    };
+};

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "ultra-image-uploader",
+  "version": "0.0.1",
+  "description": "React component for image uploads with drag-and-drop and ImgBB integration",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "prepare": "npm run build"
+  },
+  "dependencies": {
+    "@types/node": "^22.13.14",
+    "lucide-react": "^0.485.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.1"
+  },
+  "keywords": [
+    "react",
+    "form",
+    "typescript"
+  ],
+  "author": "Digontha Das",
+  "license": "MIT"
+}

package/src/components/ImageUploader.tsx

@@ -0,0 +1,115 @@
+"use client";
+import { TrashIcon, UploadCloudIcon } from "lucide-react";
+import { useState } from "react";
+
+export interface ImageUploaderProps {
+  images: File[];
+  setImages: (images: File[]) => void;
+  mode: "add" | "update";
+  defaultImages?: string[];
+  multiple?: boolean;
+  inputStyles?: string;
+  containerStyles?: string;
+  uploadText?: string;
+  typeText?: string;
+}
+
+export function ImageUploader({
+  images,
+  setImages,
+  mode,
+  defaultImages = [],
+  multiple = false,
+  inputStyles = "",
+  containerStyles = "",
+  uploadText = "Browse files or drag & drop",
+  typeText = "PNG, JPG, JPEG, WEBP",
+}: ImageUploaderProps) {
+  const [removedDefaultImages, setRemovedDefaultImages] = useState<number[]>(
+    []
+  );
+  console.log(removedDefaultImages);
+  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files.length > 0) {
+      const files = Array.from(e.target.files);
+      if (!multiple && files.length > 1) {
+        alert("Only one image can be uploaded at a time.");
+        return;
+      }
+      setImages(multiple ? [...images, ...files] : [files[0]]);
+    }
+  };
+
+  const removeImage = (index: number) => {
+    setImages(images.filter((_, i) => i !== index));
+  };
+
+  // Function to remove a default image
+  const removeDefaultImage = (index: number) => {
+    setRemovedDefaultImages((prev) => [...prev, index]);
+  };
+
+  return (
+    <div className={`space-y-4 ${containerStyles}`}>
+      <div className="flex flex-wrap gap-4">
+        {/* Upload Box */}
+        <div
+          className={`${inputStyles} h-40 w-full bg-gray-100 border border-gray-200 cursor-pointer flex justify-center items-center text-white text-center relative rounded-xs duration-300`}
+        >
+          <div className="flex flex-col items-center text-black">
+            <UploadCloudIcon className="text-3xl text-gray-900 mb-1" />
+            <span className="text-sm text-gray-800 font-semibold">
+              {uploadText}
+            </span>
+            <span className="text-gray-600 text-xs">{typeText}</span>
+          </div>
+          <input
+            type="file"
+            accept="image/*"
+            multiple={multiple}
+            onChange={handleImageChange}
+            className="absolute inset-0 opacity-0 cursor-pointer rounded-lg"
+          />
+        </div>
+
+        {/* Default Images (Update Mode) */}
+        {mode === "update" &&
+          defaultImages.map(
+            (url, index) =>
+              !removedDefaultImages.includes(index) && (
+                <div key={`default-${index}`} className="relative w-fit">
+                  <img
+                    src={url}
+                    alt={`Existing Image ${index + 1}`}
+                    width={100}
+                    height={100}
+                    className="h-32 w-32 object-cover rounded-sm border border-gray-200 cursor-pointer  hover:shadow-lg transition-shadow duration-200"
+                  />
+                  <TrashIcon
+                    onClick={() => removeDefaultImage(index)}
+                    className="absolute -top-2 -right-2 rounded-full bg-red-600 text-2xl text-white cursor-pointer p-1 hover:bg-red-700 transition-colors duration-200"
+                  />
+                </div>
+              )
+          )}
+
+        {/* Uploaded Images */}
+        {images.map((image, index) => (
+          <div key={index} className="relative w-fit">
+            <img
+              src={URL.createObjectURL(image)}
+              alt={`Preview ${index + 1}`}
+              width={100}
+              height={100}
+              className="h-32 w-32 object-cover rounded-sm border border-gray-200 cursor-pointer  hover:shadow-lg  duration-200"
+            />
+            <TrashIcon
+              onClick={() => removeImage(index)}
+              className="absolute -top-2 -right-2 rounded-full bg-red-600 text-2xl text-white cursor-pointer p-1 hover:bg-red-700 transition-colors duration-200"
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export { ImageUploader } from './components/ImageUploader';
+export type { ImageUploaderProps } from './components/ImageUploader';
+export { uploadImagesToImageBB } from './utils/imageUpload';
+export type { ImageBBUrlResult } from './utils/imageUpload';

package/src/utils/imageUpload.ts

@@ -0,0 +1,56 @@
+export interface ImageBBResponse {
+    success: boolean;
+    data: {
+      url: string;
+    };
+
+  }
+  export interface ImageBBUrlResult {
+    urls: string[];
+  }
+  const uploadImageToImageBB = async (
+    imageFile: File, 
+    apiKey: string
+  ): Promise<string | null> => {
+    const formData = new FormData();
+    formData.append("image", imageFile);
+    
+    try {
+      const response = await fetch(
+        `https://api.imgbb.com/1/upload?key=${apiKey}`,
+        {
+          method: "POST",
+          body: formData,
+        }
+      );
+      
+      const data: ImageBBResponse = await response.json();
+      
+      if (data.success) {
+        return data.data.url;
+      } else {
+        throw new Error("Image upload failed");
+      }
+    } catch (error) {
+      console.error("Error uploading image:", error);
+      alert("❌ Failed to upload image. Please try again.");
+      return null;
+    }
+  };
+  
+  export const uploadImagesToImageBB = async (
+    images: File[],
+    apiKey: string
+  ): Promise<ImageBBUrlResult> => {
+    const imageURLs = (
+      await Promise.all(images.map((image) => uploadImageToImageBB(image, apiKey)))
+    ).filter((url): url is string => url !== null);
+    
+    if (imageURLs.length === 0) {
+      throw new Error("Failed to upload images");
+    }
+    
+    return {
+      urls: imageURLs,
+    };
+  };

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "esModuleInterop": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "target": "ESNext",
+    "lib": ["DOM", "ESNext", "DOM.Iterable"],
+    "declaration": true,
+    "declarationDir": "./dist",
+    "jsx": "react-jsx",
+    "strict": true,
+    "resolveJsonModule": true,
+  }
+  
+}