@moontra/moonui-pro 2.11.2 → 2.11.4

package/dist/index.d.ts

@@ -1776,23 +1776,7 @@ interface FileUploadProProps {
     headers?: Record<string, string>;
     serviceConfig?: {
         type: 'aws-s3' | 'cloudinary' | 'firebase' | 'custom';
-        awsConfig?: {
-            region: string;
-            bucket: string;
-            accessKeyId?: string;
-            secretAccessKey?: string;
-            sessionToken?: string;
-        };
-        cloudinaryConfig?: {
-            cloudName: string;
-            uploadPreset: string;
-            apiKey?: string;
-            apiSecret?: string;
-        };
-        firebaseConfig?: {
-            storageBucket: string;
-            folder?: string;
-        };
+        config?: any;
     };
     onUpload?: (files: FileUploadItem[]) => Promise<void>;
     onProgress?: (fileId: string, progress: number) => void;

package/dist/index.mjs

@@ -59071,43 +59071,6 @@ var MoonUIFileUploadPro = t__default.forwardRef(
       }
       return metadata;
     }, [duplicateCheck]);
-    const uploadToService = useCallback(async (fileItem) => {
-      if (!serviceConfig)
-        return null;
-      const { file } = fileItem;
-      switch (serviceConfig.type) {
-        case "aws-s3":
-          if (uploadStrategy === "presigned" && endpoint) {
-            const response = await fetch(endpoint, {
-              method: "PUT",
-              body: file,
-              headers: {
-                "Content-Type": file.type,
-                ...headers
-              }
-            });
-            return response.ok ? { url: response.url } : null;
-          }
-          break;
-        case "cloudinary":
-          if (serviceConfig.cloudinaryConfig) {
-            const { cloudName, uploadPreset } = serviceConfig.cloudinaryConfig;
-            const formData = new FormData();
-            formData.append("file", file);
-            formData.append("upload_preset", uploadPreset);
-            const response = await fetch(
-              `https://api.cloudinary.com/v1_1/${cloudName}/auto/upload`,
-              {
-                method: "POST",
-                body: formData
-              }
-            );
-            return response.json();
-          }
-          break;
-      }
-      return null;
-    }, [serviceConfig, uploadStrategy, endpoint, headers]);
     const resizeImage = useCallback(async (file) => {
       if (!imageResize || !file.type.startsWith("image/"))
         return file;
@@ -59155,6 +59118,166 @@ var MoonUIFileUploadPro = t__default.forwardRef(
         reader.readAsDataURL(file);
       });
     }, [imageResize]);
+    const uploadToService = useCallback(async (fileItem) => {
+      if (!serviceConfig)
+        return null;
+      const { file } = fileItem;
+      let processedFile = file;
+      if (imageResize && file.type.startsWith("image/")) {
+        processedFile = await resizeImage(file);
+      }
+      try {
+        switch (serviceConfig.type) {
+          case "aws-s3": {
+            const { config } = serviceConfig;
+            if (!config)
+              throw new Error("AWS S3 config is required");
+            const { bucketUrl, bucketName, region, accessKeyId, policy, signature, algorithm, credential, date, fields } = config;
+            if (!bucketUrl && !bucketName) {
+              throw new Error("AWS S3 requires either bucketUrl or bucketName");
+            }
+            if (bucketUrl && !bucketName) {
+              const formData2 = new FormData();
+              formData2.append("file", processedFile || file);
+              const response2 = await fetch(bucketUrl, {
+                method: "POST",
+                body: formData2,
+                headers: {
+                  ...headers,
+                  ...config.headers || {}
+                }
+              });
+              if (!response2.ok) {
+                throw new Error(`Upload failed: ${response2.statusText}`);
+              }
+              return await response2.json();
+            }
+            const s3Endpoint = bucketUrl || `https://${bucketName}.s3.${region || "us-east-1"}.amazonaws.com/`;
+            const key = fields?.key || `uploads/${Date.now()}_${file.name}`;
+            const formData = new FormData();
+            if (fields) {
+              Object.entries(fields).forEach(([k3, v]) => {
+                if (k3 !== "file") {
+                  formData.append(k3, v);
+                }
+              });
+            } else {
+              formData.append("key", key);
+              if (accessKeyId)
+                formData.append("AWSAccessKeyId", accessKeyId);
+              formData.append("Content-Type", file.type);
+              if (policy)
+                formData.append("policy", policy);
+              if (signature)
+                formData.append("signature", signature);
+              if (algorithm)
+                formData.append("x-amz-algorithm", algorithm);
+              if (credential)
+                formData.append("x-amz-credential", credential);
+              if (date)
+                formData.append("x-amz-date", date);
+            }
+            formData.append("file", processedFile || file);
+            const response = await fetch(s3Endpoint, {
+              method: "POST",
+              body: formData
+            });
+            if (!response.ok && response.status !== 204) {
+              const errorText = await response.text();
+              throw new Error(`S3 upload failed: ${response.status} - ${errorText}`);
+            }
+            return {
+              url: `${s3Endpoint}${key}`,
+              key,
+              bucket: bucketName,
+              etag: response.headers.get("ETag"),
+              location: response.headers.get("Location") || `${s3Endpoint}${key}`
+            };
+          }
+          case "cloudinary": {
+            const { config } = serviceConfig;
+            if (!config)
+              throw new Error("Cloudinary config is required");
+            const { cloudName, uploadPreset, apiKey } = config;
+            const formData = new FormData();
+            formData.append("file", processedFile || file);
+            formData.append("upload_preset", uploadPreset);
+            if (apiKey) {
+              formData.append("api_key", apiKey);
+            }
+            if (imageResize) {
+              formData.append("eager", `w_${imageResize.maxWidth},h_${imageResize.maxHeight},c_limit,q_${Math.round(imageResize.quality * 100)}`);
+            }
+            const response = await fetch(
+              `https://api.cloudinary.com/v1_1/${cloudName}/auto/upload`,
+              {
+                method: "POST",
+                body: formData
+              }
+            );
+            if (!response.ok)
+              throw new Error("Cloudinary upload failed");
+            const result = await response.json();
+            return {
+              url: result.secure_url,
+              publicId: result.public_id,
+              format: result.format,
+              width: result.width,
+              height: result.height,
+              bytes: result.bytes,
+              cloudName
+            };
+          }
+          case "firebase": {
+            const { config } = serviceConfig;
+            if (!config)
+              throw new Error("Firebase config is required");
+            const { storageBucket, folder = "uploads" } = config;
+            const fileName = `${folder}/${Date.now()}-${file.name}`;
+            const uploadUrl = `https://storage.googleapis.com/upload/storage/v1/b/${storageBucket}/o?uploadType=media&name=${encodeURIComponent(fileName)}`;
+            const response = await fetch(uploadUrl, {
+              method: "POST",
+              body: processedFile || file,
+              headers: {
+                "Content-Type": file.type,
+                ...headers
+                // Should include Authorization: Bearer [token]
+              }
+            });
+            if (!response.ok)
+              throw new Error("Firebase upload failed");
+            const result = await response.json();
+            return {
+              url: `https://storage.googleapis.com/${storageBucket}/${fileName}`,
+              name: result.name,
+              bucket: result.bucket,
+              generation: result.generation,
+              contentType: result.contentType,
+              size: result.size
+            };
+          }
+          case "custom": {
+            if (!endpoint)
+              throw new Error("Custom endpoint is required");
+            const formData = new FormData();
+            formData.append("file", file);
+            const response = await fetch(endpoint, {
+              method: "POST",
+              body: formData,
+              headers
+            });
+            if (!response.ok)
+              throw new Error("Custom upload failed");
+            return response.json();
+          }
+          default:
+            throw new Error(`Unsupported service type: ${serviceConfig.type}`);
+        }
+      } catch (error2) {
+        console.error("Upload service error:", error2);
+        throw error2;
+      }
+    }, [serviceConfig, endpoint, headers, imageResize, resizeImage]);
     const uploadFileChunked = useCallback(async (fileItem) => {
       const { file } = fileItem;
       const chunks = [];
@@ -59176,14 +59299,23 @@ var MoonUIFileUploadPro = t__default.forwardRef(
       let uploadedBytes = 0;
       const startTime = Date.now();
       try {
+        let processedFile = file;
+        if (imageResize && file.type.startsWith("image/")) {
+          processedFile = await resizeImage(file);
+        }
+        if (serviceConfig) {
+          const uploadResult = await uploadToService({ ...fileItem, file: processedFile });
+          setFiles((prev) => prev.map(
+            (f) => f.id === fileItem.id ? { ...f, status: "success", progress: 100, result: uploadResult } : f
+          ));
+          onComplete?.(fileItem.id, uploadResult);
+          return;
+        }
         for (const chunk of chunks) {
           if (abortController.signal.aborted) {
             throw new Error("Upload cancelled");
           }
-          const serviceResult = await uploadToService(fileItem);
-          if (!serviceResult) {
-            await new Promise((resolve) => setTimeout(resolve, 100 + Math.random() * 200));
-          }
+          await new Promise((resolve) => setTimeout(resolve, 100 + Math.random() * 200));
           uploadedBytes += chunk.end - chunk.start;
           const progress = Math.round(uploadedBytes / file.size * 100);
           const elapsedTime = (Date.now() - startTime) / 1e3;
@@ -59215,7 +59347,7 @@ var MoonUIFileUploadPro = t__default.forwardRef(
       } finally {
         uploadQueue.current.delete(fileItem.id);
       }
-    }, [chunkSize, onProgress, onComplete, onError]);
+    }, [chunkSize, onProgress, onComplete, onError, serviceConfig, uploadToService, resizeImage, imageResize]);
     const processFiles = useCallback(async (fileList) => {
       const fileArray = Array.from(fileList);
       setError(null);
@@ -59616,7 +59748,9 @@ var FileUploadItem = ({
         ] }),
         /* @__PURE__ */ jsxs("div", { className: cn(
           "flex-1 min-w-0",
-          variant === "grid" && "text-center"
+          variant === "grid" && "text-center",
+          allowBulkOperations && variant !== "grid" && "ml-8"
+          // Add margin when checkbox is present
         ), children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.11.2",
+  "version": "2.11.4",
   "description": "Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components",
   "type": "module",
   "main": "dist/index.mjs",

package/src/components/file-upload/index.tsx

@@ -81,23 +81,7 @@ export interface FileUploadProProps {
   // Service integrations
   serviceConfig?: {
     type: 'aws-s3' | 'cloudinary' | 'firebase' | 'custom'
-    awsConfig?: {
-      region: string
-      bucket: string
-      accessKeyId?: string
-      secretAccessKey?: string
-      sessionToken?: string
-    }
-    cloudinaryConfig?: {
-      cloudName: string
-      uploadPreset: string
-      apiKey?: string
-      apiSecret?: string
-    }
-    firebaseConfig?: {
-      storageBucket: string
-      folder?: string
-    }
+    config?: any
   }
   
   // Callbacks
@@ -614,56 +598,6 @@ export const MoonUIFileUploadPro = React.forwardRef<HTMLDivElement, FileUploadPr
       return metadata
     }, [duplicateCheck])
     
-    // Service specific upload handler
-    const uploadToService = useCallback(async (fileItem: FileUploadItem): Promise<any> => {
-      if (!serviceConfig) return null
-
-      const { file } = fileItem
-
-      switch (serviceConfig.type) {
-        case 'aws-s3':
-          // AWS S3 upload logic
-          if (uploadStrategy === 'presigned' && endpoint) {
-            const response = await fetch(endpoint, {
-              method: 'PUT',
-              body: file,
-              headers: {
-                'Content-Type': file.type,
-                ...headers
-              }
-            })
-            return response.ok ? { url: response.url } : null
-          }
-          break
-
-        case 'cloudinary':
-          // Cloudinary upload logic
-          if (serviceConfig.cloudinaryConfig) {
-            const { cloudName, uploadPreset } = serviceConfig.cloudinaryConfig
-            const formData = new FormData()
-            formData.append('file', file)
-            formData.append('upload_preset', uploadPreset)
-            
-            const response = await fetch(
-              `https://api.cloudinary.com/v1_1/${cloudName}/auto/upload`,
-              {
-                method: 'POST',
-                body: formData
-              }
-            )
-            return response.json()
-          }
-          break
-
-        case 'firebase':
-          // Firebase upload would be handled by the onUpload callback
-          // as it requires Firebase SDK integration
-          break
-      }
-
-      return null
-    }, [serviceConfig, uploadStrategy, endpoint, headers])
-
     // Image resize handler
     const resizeImage = useCallback(async (file: File): Promise<File> => {
       if (!imageResize || !file.type.startsWith('image/')) return file
@@ -722,6 +656,202 @@ export const MoonUIFileUploadPro = React.forwardRef<HTMLDivElement, FileUploadPr
         reader.readAsDataURL(file)
       })
     }, [imageResize])
+    
+    // Service specific upload handler
+    const uploadToService = useCallback(async (fileItem: FileUploadItem): Promise<any> => {
+      if (!serviceConfig) return null
+
+      const { file } = fileItem
+      let processedFile = file
+      
+      // Resize image if needed
+      if (imageResize && file.type.startsWith('image/')) {
+        processedFile = await resizeImage(file)
+      }
+
+      try {
+        switch (serviceConfig.type) {
+          case 'aws-s3': {
+            // AWS S3 Direct Upload
+            const { config } = serviceConfig as any
+            if (!config) throw new Error('AWS S3 config is required')
+            
+            const { bucketUrl, bucketName, region, accessKeyId, policy, signature, algorithm, credential, date, fields } = config
+            
+            if (!bucketUrl && !bucketName) {
+              throw new Error('AWS S3 requires either bucketUrl or bucketName')
+            }
+            
+            // Option 1: Direct upload to custom S3-compatible endpoint
+            if (bucketUrl && !bucketName) {
+              const formData = new FormData()
+              formData.append('file', processedFile || file)
+              
+              const response = await fetch(bucketUrl, {
+                method: 'POST',
+                body: formData,
+                headers: {
+                  ...headers,
+                  ...(config.headers || {})
+                }
+              })
+              
+              if (!response.ok) {
+                throw new Error(`Upload failed: ${response.statusText}`)
+              }
+              
+              return await response.json()
+            }
+            
+            // Option 2: AWS S3 POST upload with policy-based authentication
+            // This requires server-side generation of policy and signature
+            const s3Endpoint = bucketUrl || `https://${bucketName}.s3.${region || 'us-east-1'}.amazonaws.com/`
+            const key = fields?.key || `uploads/${Date.now()}_${file.name}`
+            
+            const formData = new FormData()
+            
+            // AWS S3 POST policy fields must be added in specific order
+            if (fields) {
+              // Add all policy fields first
+              Object.entries(fields).forEach(([k, v]) => {
+                if (k !== 'file') {
+                  formData.append(k, v as string)
+                }
+              })
+            } else {
+              // Basic fields for public bucket upload
+              formData.append('key', key)
+              if (accessKeyId) formData.append('AWSAccessKeyId', accessKeyId)
+              formData.append('Content-Type', file.type)
+              if (policy) formData.append('policy', policy)
+              if (signature) formData.append('signature', signature)
+              if (algorithm) formData.append('x-amz-algorithm', algorithm)
+              if (credential) formData.append('x-amz-credential', credential)
+              if (date) formData.append('x-amz-date', date)
+            }
+            
+            // File must be the last field
+            formData.append('file', processedFile || file)
+            
+            const response = await fetch(s3Endpoint, {
+              method: 'POST',
+              body: formData
+            })
+            
+            // S3 returns 204 No Content on success for POST uploads
+            if (!response.ok && response.status !== 204) {
+              const errorText = await response.text()
+              throw new Error(`S3 upload failed: ${response.status} - ${errorText}`)
+            }
+            
+            return {
+              url: `${s3Endpoint}${key}`,
+              key,
+              bucket: bucketName,
+              etag: response.headers.get('ETag'),
+              location: response.headers.get('Location') || `${s3Endpoint}${key}`
+            }
+          }
+
+          case 'cloudinary': {
+            // Cloudinary upload logic
+            const { config } = serviceConfig as any
+            if (!config) throw new Error('Cloudinary config is required')
+            
+            const { cloudName, uploadPreset, apiKey } = config
+            const formData = new FormData()
+            formData.append('file', processedFile || file)
+            formData.append('upload_preset', uploadPreset)
+            
+            if (apiKey) {
+              formData.append('api_key', apiKey)
+            }
+            
+            // Add optional transformations
+            if (imageResize) {
+              formData.append('eager', `w_${imageResize.maxWidth},h_${imageResize.maxHeight},c_limit,q_${Math.round(imageResize.quality * 100)}`)
+            }
+            
+            const response = await fetch(
+              `https://api.cloudinary.com/v1_1/${cloudName}/auto/upload`,
+              {
+                method: 'POST',
+                body: formData
+              }
+            )
+            
+            if (!response.ok) throw new Error('Cloudinary upload failed')
+            const result = await response.json()
+            
+            return {
+              url: result.secure_url,
+              publicId: result.public_id,
+              format: result.format,
+              width: result.width,
+              height: result.height,
+              bytes: result.bytes,
+              cloudName
+            }
+          }
+
+          case 'firebase': {
+            // Firebase Storage REST API upload (no SDK required)
+            const { config } = serviceConfig as any
+            if (!config) throw new Error('Firebase config is required')
+            
+            const { storageBucket, folder = 'uploads' } = config
+            const fileName = `${folder}/${Date.now()}-${file.name}`
+            
+            // Firebase Storage uses Google Cloud Storage REST API
+            const uploadUrl = `https://storage.googleapis.com/upload/storage/v1/b/${storageBucket}/o?uploadType=media&name=${encodeURIComponent(fileName)}`
+            
+            const response = await fetch(uploadUrl, {
+              method: 'POST',
+              body: processedFile || file,
+              headers: {
+                'Content-Type': file.type,
+                ...headers // Should include Authorization: Bearer [token]
+              }
+            })
+            
+            if (!response.ok) throw new Error('Firebase upload failed')
+            const result = await response.json()
+            
+            return {
+              url: `https://storage.googleapis.com/${storageBucket}/${fileName}`,
+              name: result.name,
+              bucket: result.bucket,
+              generation: result.generation,
+              contentType: result.contentType,
+              size: result.size
+            }
+          }
+
+          case 'custom': {
+            // Custom endpoint upload
+            if (!endpoint) throw new Error('Custom endpoint is required')
+            
+            const formData = new FormData()
+            formData.append('file', file)
+            
+            const response = await fetch(endpoint, {
+              method: 'POST',
+              body: formData,
+              headers: headers
+            })
+            
+            if (!response.ok) throw new Error('Custom upload failed')
+            return response.json()
+          }
+
+          default:
+            throw new Error(`Unsupported service type: ${serviceConfig.type}`)
+        }
+      } catch (error) {
+        console.error('Upload service error:', error)
+        throw error
+      }
+    }, [serviceConfig, endpoint, headers, imageResize, resizeImage])
 
     // Chunked upload simülasyonu
     const uploadFileChunked = useCallback(async (fileItem: FileUploadItem) => {
@@ -754,19 +884,34 @@ export const MoonUIFileUploadPro = React.forwardRef<HTMLDivElement, FileUploadPr
       const startTime = Date.now()
       
       try {
-        // Chunk'ları sırayla yükle
+        // Image resize if needed
+        let processedFile = file
+        if (imageResize && file.type.startsWith('image/')) {
+          processedFile = await resizeImage(file)
+        }
+        
+        // If service config exists, do the actual upload
+        if (serviceConfig) {
+          const uploadResult = await uploadToService({ ...fileItem, file: processedFile })
+          
+          // Update progress to 100% immediately for service uploads
+          setFiles(prev => prev.map(f => 
+            f.id === fileItem.id 
+              ? { ...f, status: 'success', progress: 100, result: uploadResult }
+              : f
+          ))
+          
+          onComplete?.(fileItem.id, uploadResult)
+          return
+        }
+        
+        // Regular chunk upload simulation for non-service uploads
         for (const chunk of chunks) {
           if (abortController.signal.aborted) {
             throw new Error('Upload cancelled')
           }
           
-          // Try service-specific upload first
-          const serviceResult = await uploadToService(fileItem)
-          
-          if (!serviceResult) {
-            // Fallback to chunk upload simulation
-            await new Promise(resolve => setTimeout(resolve, 100 + Math.random() * 200))
-          }
+          await new Promise(resolve => setTimeout(resolve, 100 + Math.random() * 200))
           
           uploadedBytes += (chunk.end - chunk.start)
           const progress = Math.round((uploadedBytes / file.size) * 100)
@@ -815,7 +960,7 @@ export const MoonUIFileUploadPro = React.forwardRef<HTMLDivElement, FileUploadPr
       } finally {
         uploadQueue.current.delete(fileItem.id)
       }
-    }, [chunkSize, onProgress, onComplete, onError])
+    }, [chunkSize, onProgress, onComplete, onError, serviceConfig, uploadToService, resizeImage, imageResize])
     
     // Dosya işleme
     const processFiles = useCallback(async (fileList: FileList | File[]) => {
@@ -1304,7 +1449,8 @@ const FileUploadItem = ({
       {/* File Info */}
       <div className={cn(
         "flex-1 min-w-0",
-        variant === 'grid' && "text-center"
+        variant === 'grid' && "text-center",
+        allowBulkOperations && variant !== 'grid' && "ml-8" // Add margin when checkbox is present
       )}>
         <div className="flex items-start justify-between gap-2">
           <div className="flex-1 min-w-0">