txb-cloudinary-image-uploader 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * CloudinaryResponse interface defines the structure of the successful upload response.
+ */
+export interface CloudinaryResponse {
+    url: string;
+    public_id: string;
+}
+/**
+ * uploadToCloudinary uploads a file to Cloudinary using the Fetch API.
+ * * @param file - The File object to be uploaded.
+ * @param uploadPreset - Your Cloudinary Unsigned Upload Preset.
+ * @param cloudinaryUrl - Your Cloudinary API URL (e.g., https://api.cloudinary.com/v1_1/your_cloud_name).
+ * @returns A promise that resolves to a CloudinaryResponse object.
+ * @throws Error if the upload fails.
+ */
+declare const uploadToCloudinary: (file: File, uploadPreset: string, cloudinaryUrl: string) => Promise<CloudinaryResponse>;
+export default uploadToCloudinary;

package/dist/index.js

@@ -0,0 +1,38 @@
+/**
+ * uploadToCloudinary uploads a file to Cloudinary using the Fetch API.
+ * * @param file - The File object to be uploaded.
+ * @param uploadPreset - Your Cloudinary Unsigned Upload Preset.
+ * @param cloudinaryUrl - Your Cloudinary API URL (e.g., https://api.cloudinary.com/v1_1/your_cloud_name).
+ * @returns A promise that resolves to a CloudinaryResponse object.
+ * @throws Error if the upload fails.
+ */
+const uploadToCloudinary = async (file, uploadPreset, cloudinaryUrl) => {
+    if (!file || !uploadPreset || !cloudinaryUrl) {
+        throw new Error("Missing required parameters: file, uploadPreset, or cloudinaryUrl");
+    }
+    const formData = new FormData();
+    formData.append("file", file);
+    formData.append("upload_preset", uploadPreset);
+    try {
+        const response = await fetch(`${cloudinaryUrl}/image/upload`, {
+            method: "POST",
+            body: formData,
+        });
+        if (!response.ok) {
+            const errorData = await response.json();
+            console.error("Cloudinary Error Detail:", errorData);
+            throw new Error(errorData.error?.message || "Image upload failed");
+        }
+        const data = await response.json();
+        // Returning secure_url as 'url' and public_id as requested
+        return {
+            url: data.secure_url,
+            public_id: data.public_id,
+        };
+    }
+    catch (error) {
+        console.error("Cloudinary Upload Process Error:", error);
+        throw error;
+    }
+};
+export default uploadToCloudinary;

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "txb-cloudinary-image-uploader",
+  "version": "1.0.0",
+  "description": "A lightweight, promise-based utility to handle seamless image uploads to Cloudinary directly from the browser.",
+  "license": "ISC",
+  "author": "Saleh Ahmed Mahin",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "cloudinary",
+    "upload",
+    "image-upload",
+    "react",
+    "javascript",
+    "techxbureau"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "prepare": "npm run build",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "typescript": "^5.x.x"
+  }
+}

package/readme.md

@@ -0,0 +1,63 @@
+# Cloudinary Image Upload Utility
+
+A lightweight TypeScript utility function to handle image uploads directly from the client-side (browser) to Cloudinary using **Unsigned Uploads**. This utility uses the native `fetch` API, eliminating the need for heavy external libraries like Axios.
+
+## Table of Contents
+* [Features](#features)
+* [Prerequisites](#prerequisites)
+* [Installation](#installation)
+* [Usage](#usage)
+* [Response Structure](#response-structure)
+
+## Features
+- **Simple Integration**: Upload images with a single function call.
+- **TypeScript Support**: Fully typed interface for predictable data structures and better DX.
+- **Detailed Error Handling**: Log detailed error data to the console if the upload fails.
+- **Lightweight**: Built with the native Fetch API—no extra dependencies required.
+
+## Prerequisites
+Before using this function, gather the following details from your Cloudinary Dashboard:
+1. **Cloud Name**: Your unique Cloudinary identifier.
+2. **Upload Preset**: Create an **'Unsigned'** upload preset in Cloudinary Settings (Settings > Upload).
+3. **Cloudinary URL**: Typically formatted as: `https://api.cloudinary.com/v1_1/YOUR_CLOUD_NAME`
+
+## Installation
+Create a file named `cloudinary.ts` inside your project's `utils` or `lib` folder and paste the function code there.
+
+```bash
+# No additional packages are required.
+
+### React Example
+```
+import { uploadToCloudinary } from './utils/cloudinary';
+
+const ImageUploadComponent = () => {
+  const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    // Use environment variables for production security
+    const CLOUDINARY_URL = "[https://api.cloudinary.com/v1_1/your_cloud_name](https://api.cloudinary.com/v1_1/your_cloud_name)";
+    const UPLOAD_PRESET = "your_unsigned_preset";
+
+    try {
+      const response = await uploadToCloudinary(file, UPLOAD_PRESET, CLOUDINARY_URL);
+      
+      console.log("Uploaded URL:", response.url);
+      console.log("Public ID:", response.public_id);
+      
+      alert("Upload Successful!");
+    } catch (error) {
+      console.error("Upload failed:", error);
+      alert("Failed to upload image. Please check the console for details.");
+    }
+  };
+
+  return (
+    <div>
+      <label>Choose an image:</label>
+      <input type="file" onChange={handleFileChange} />
+    </div>
+  );
+};
+```