@mgonza02/goal-image-gallery 1.0.8 → 1.1.0

package/CHANGELOG.md

@@ -5,6 +5,32 @@ All notable changes to the GoalImageGallery project will be documented in this f
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.1.0] - 2025-07-14
+
+### 🐛 Bug Fixes
+- **Fixed handleAfterUpload Array Structure**: Resolved issue where `handleAfterUpload` was creating nested arrays instead of flat arrays for `image_code` parameter
+- **Improved Array Handling**: Enhanced logic to properly handle both single image replacement and bulk image addition scenarios
+- **Better Code Organization**: Refactored `handleAfterUpload` method for clearer logic flow and better maintainability
+
+### 🔧 Technical Improvements
+- **Clearer Logic Separation**: Separated replacement logic from addition logic for better code readability
+- **Duplicate Prevention**: Enhanced duplicate checking to prevent adding the same image code multiple times
+- **Array Flattening**: Fixed array structure to ensure `image_code` is always a flat array of strings
+
+## [1.0.9] - 2025-07-14
+
+### ✨ New Features
+- **Enhanced Bulk Upload Support**: The `handleAfterUpload` method now fully supports arrays of images
+- **Comprehensive Bulk Upload Example**: Added detailed bulk upload example with drag-and-drop functionality
+- **Improved Documentation**: Updated examples to demonstrate array-based upload patterns
+- **Better TypeScript Support**: Enhanced type definitions for bulk upload scenarios
+
+### 🔧 Improvements
+- Enhanced examples.js with a complete bulk upload gallery demonstration
+- Added custom bulk upload selector component with drag-and-drop support
+- Improved documentation for array-based `handleAfterUpload` usage
+- Better error handling and progress indication for bulk uploads
+
 ## [1.0.8] - 2025-07-14
 
 ### 🧹 Bug Fixes

package/lib/examples.js

@@ -1,7 +1,7 @@
 // GoalImageGallery Usage Examples
 // This file demonstrates various ways to use the GoalImageGallery component
 
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useRef } from 'react';
 import { Box, Typography, Button, Divider } from '@mui/material';
 import GoalImageGallery from './GoalImageGallery';
 
@@ -646,6 +646,184 @@ export const CustomSelectorExample = () => {
   });
 };
 
+// Example 9: Bulk Upload Gallery
+export const BulkUploadExample = () => {
+  const [galleryImages, setGalleryImages] = useState(['bulk1', 'bulk2']);
+  const [uploading, setUploading] = useState(false);
+  const currentCompany = 'bulk-company';
+  const handleBulkUpload = useCallback(async imageData => {
+    setUploading(true);
+    try {
+      // Simulate bulk upload API call
+      const response = await new Promise(resolve => {
+        setTimeout(() => {
+          resolve({
+            success: true,
+            data: {
+              code: `bulk-${Date.now()}`
+            },
+            message: 'Bulk upload completed successfully'
+          });
+        }, 1000);
+      });
+      return response;
+    } catch (error) {
+      return {
+        success: false,
+        message: error.message
+      };
+    } finally {
+      setUploading(false);
+    }
+  }, []);
+  const handleBulkRefresh = useCallback(result => {
+    setGalleryImages(prev => [...prev, result.data.code]);
+  }, []);
+
+  // Custom bulk upload component
+  const BulkUploadSelector = _ref2 => {
+    let {
+      afterUpload,
+      activate,
+      onCancel,
+      multiple
+    } = _ref2;
+    const [dragActive, setDragActive] = useState(false);
+    const [selectedFiles, setSelectedFiles] = useState([]);
+    const fileInputRef = useRef(null);
+    const handleDrag = e => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (e.type === 'dragenter' || e.type === 'dragover') {
+        setDragActive(true);
+      } else if (e.type === 'dragleave') {
+        setDragActive(false);
+      }
+    };
+    const handleDrop = e => {
+      e.preventDefault();
+      e.stopPropagation();
+      setDragActive(false);
+      const files = Array.from(e.dataTransfer.files);
+      handleFiles(files);
+    };
+    const handleFiles = async files => {
+      const imageFiles = files.filter(file => file.type.startsWith('image/'));
+      setSelectedFiles(imageFiles);
+      if (imageFiles.length > 0) {
+        // Simulate uploading multiple files and getting their codes
+        const uploadPromises = imageFiles.map(async (file, index) => {
+          return new Promise(resolve => {
+            setTimeout(() => {
+              resolve({
+                code: `bulk-img-${Date.now()}-${index}`,
+                url: URL.createObjectURL(file),
+                filename: file.name,
+                size: file.size,
+                mimeType: file.type
+              });
+            }, 500 + index * 100);
+          });
+        });
+        const uploadedImages = await Promise.all(uploadPromises);
+
+        // Call afterUpload with array of images
+        await afterUpload(uploadedImages);
+      }
+    };
+    const handleFileSelect = () => {
+      fileInputRef.current?.click();
+    };
+    return /*#__PURE__*/_jsxs(Box, {
+      onDragEnter: handleDrag,
+      onDragLeave: handleDrag,
+      onDragOver: handleDrag,
+      onDrop: handleDrop,
+      sx: {
+        border: `2px dashed ${dragActive ? '#007bff' : '#ccc'}`,
+        borderRadius: '12px',
+        padding: '40px',
+        textAlign: 'center',
+        backgroundColor: dragActive ? '#f8f9fa' : '#fff',
+        cursor: 'pointer',
+        transition: 'all 0.3s ease',
+        '&:hover': {
+          borderColor: '#007bff',
+          backgroundColor: '#f8f9fa'
+        }
+      },
+      onClick: handleFileSelect,
+      children: [/*#__PURE__*/_jsx("input", {
+        ref: fileInputRef,
+        type: "file",
+        multiple: true,
+        accept: "image/*",
+        style: {
+          display: 'none'
+        },
+        onChange: e => handleFiles(Array.from(e.target.files))
+      }), /*#__PURE__*/_jsx(Typography, {
+        variant: "h6",
+        gutterBottom: true,
+        children: "Bulk Upload Images"
+      }), /*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        color: "text.secondary",
+        paragraph: true,
+        children: "Drop multiple images here or click to select"
+      }), selectedFiles.length > 0 && /*#__PURE__*/_jsxs(Typography, {
+        variant: "body2",
+        color: "success.main",
+        children: [selectedFiles.length, " file", selectedFiles.length !== 1 ? 's' : '', " selected"]
+      }), /*#__PURE__*/_jsx(Button, {
+        variant: "contained",
+        sx: {
+          mt: 2,
+          mr: 1
+        },
+        disabled: uploading,
+        children: uploading ? 'Uploading...' : 'Select Files'
+      }), /*#__PURE__*/_jsx(Button, {
+        variant: "outlined",
+        onClick: onCancel,
+        children: "Cancel"
+      })]
+    });
+  };
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      p: 2
+    },
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "h6",
+      gutterBottom: true,
+      children: "Bulk Upload Gallery"
+    }), /*#__PURE__*/_jsx(Typography, {
+      variant: "body2",
+      color: "text.secondary",
+      paragraph: true,
+      children: "This example demonstrates bulk upload functionality where multiple images can be uploaded at once. The handleAfterUpload method now accepts arrays of image objects."
+    }), /*#__PURE__*/_jsx(GoalImageGallery, {
+      imageCodes: galleryImages,
+      canEdit: true,
+      ownerEntity: {
+        id: 'bulk-gallery',
+        type: 'gallery'
+      },
+      imageHandlerApi: handleBulkUpload,
+      afterUpload: handleBulkRefresh,
+      multiple: true,
+      emptyMessage: "Bulk upload gallery - drop multiple images to upload!",
+      showImageInfo: true,
+      allowDownload: true,
+      currentCompany: currentCompany,
+      slot: {
+        selector: BulkUploadSelector
+      }
+    })]
+  });
+};
+
 // Complete Demo Component
 export const GoalImageGalleryExamples = () => {
   return /*#__PURE__*/_jsxs(Box, {
@@ -688,7 +866,11 @@ export const GoalImageGalleryExamples = () => {
       sx: {
         my: 3
       }
-    }), /*#__PURE__*/_jsx(CustomSelectorExample, {})]
+    }), /*#__PURE__*/_jsx(CustomSelectorExample, {}), /*#__PURE__*/_jsx(Divider, {
+      sx: {
+        my: 3
+      }
+    }), /*#__PURE__*/_jsx(BulkUploadExample, {})]
   });
 };
 export default GoalImageGalleryExamples;

package/lib/hooks/use-image-gallery.js

@@ -96,22 +96,64 @@ export const useImageGallery = _ref => {
       setLoading(false);
     }
   }, [ownerEntity, currentCompany, imageList, onRefresh, showError, imageHandlerApi]);
-  const handleAfterUpload = useCallback(async image => {
+
+  /**
+   * Handles the upload completion for single or multiple images
+   * @param {Object|Object[]} uploadedImages - Single image object or array of image objects
+   * @param {string} uploadedImages.code - The image code returned from the upload
+   * @param {string} [uploadedImages.url] - Optional image URL
+   * @param {string} [uploadedImages.filename] - Optional filename
+   */
+  const handleAfterUpload = useCallback(async uploadedImages => {
     const currentImageCode = selectedImage?.image_code || '';
-    const imagesToSave = imageList.reduce((acc, img) => {
-      if (img.image_code !== '+') {
-        acc.push(img.image_code === currentImageCode ? image.code : img.image_code);
+
+    // Handle both single image and array of images
+    const imagesArray = Array.isArray(uploadedImages) ? uploadedImages : [uploadedImages];
+    let imagesToSave = [];
+    if (currentImageCode) {
+      // Replacing an existing image
+      imagesToSave = imageList.reduce((acc, img) => {
+        if (img.image_code !== '+') {
+          if (img.image_code === currentImageCode) {
+            // Replace the selected image with the first uploaded image
+            acc.push(imagesArray[0].code);
+          } else {
+            // Keep existing image codes
+            acc.push(img.image_code);
+          }
+        }
+        return acc;
+      }, []);
+
+      // If multiple images uploaded, add the additional ones
+      if (imagesArray.length > 1) {
+        imagesArray.slice(1).forEach(image => {
+          if (!imagesToSave.includes(image.code)) {
+            imagesToSave.push(image.code);
+          }
+        });
       }
-      return acc;
-    }, []);
-    if (!currentImageCode) {
-      imagesToSave.push(image.code);
+    } else {
+      // Adding new images (no current selection)
+      imagesToSave = imageList.reduce((acc, img) => {
+        if (img.image_code !== '+') {
+          acc.push(img.image_code);
+        }
+        return acc;
+      }, []);
+
+      // Add all new image codes
+      imagesArray.forEach(image => {
+        if (!imagesToSave.includes(image.code)) {
+          imagesToSave.push(image.code);
+        }
+      });
     }
     const result = await imageHandlerApi({
       ...ownerEntity,
       companyId: currentCompany,
-      image_code: imagesToSave,
-      company_id: currentCompany
+      company_id: currentCompany,
+      image_code: imagesToSave
     });
     if (result.success) {
       setSelectingImage(false);

package/lib/index.d.ts

@@ -34,6 +34,15 @@ export interface ImageItem {
   image_code: string;
 }
 
+// Uploaded image interface
+export interface UploadedImage {
+  code: string;
+  url?: string;
+  filename?: string;
+  size?: number;
+  mimeType?: string;
+}
+
 // Hook interfaces
 export interface UseImageGalleryOptions {
   imageCodes?: string | string[];
@@ -62,7 +71,7 @@ export interface UseImageGalleryReturn {
   handleImageSelect: (image: ImageItem | null) => void;
   handleCancel: () => void;
   handleRemoveImage: (image: ImageItem) => Promise<void>;
-  handleAfterUpload: (image: any) => Promise<void>;
+  handleAfterUpload: (images: UploadedImage | UploadedImage[]) => Promise<void>;
 }
 
 export interface UseImageZoomReturn {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mgonza02/goal-image-gallery",
-    "version": "1.0.8",
+    "version": "1.1.0",
     "description": "Advanced, accessible, and highly customizable React image gallery component with multi-method upload, responsive design, and extensive TypeScript support",
     "main": "lib/index.js",
     "module": "lib/index.js",