@moontra/moonui-pro 2.11.1 → 2.11.3

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

@@ -58976,6 +58976,10 @@ var MoonUIFileUploadPro = t__default.forwardRef(
     onPreview,
     onBulkSelect,
     customValidation,
+    serviceConfig,
+    imageResize,
+    endpoint,
+    headers,
     ...props
   }, ref) => {
     const { hasProAccess, isLoading } = useSubscription();
@@ -59067,6 +59071,213 @@ var MoonUIFileUploadPro = t__default.forwardRef(
       }
       return metadata;
     }, [duplicateCheck]);
+    const resizeImage = useCallback(async (file) => {
+      if (!imageResize || !file.type.startsWith("image/"))
+        return file;
+      const { maxWidth, maxHeight, quality } = imageResize;
+      return new Promise((resolve) => {
+        const img = new Image();
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          img.src = e.target?.result;
+          img.onload = () => {
+            const canvas = document.createElement("canvas");
+            const ctx = canvas.getContext("2d");
+            let width = img.width;
+            let height = img.height;
+            if (width > maxWidth || height > maxHeight) {
+              const aspectRatio = width / height;
+              if (width > height) {
+                width = maxWidth;
+                height = maxWidth / aspectRatio;
+              } else {
+                height = maxHeight;
+                width = maxHeight * aspectRatio;
+              }
+            }
+            canvas.width = width;
+            canvas.height = height;
+            ctx.drawImage(img, 0, 0, width, height);
+            canvas.toBlob(
+              (blob) => {
+                if (blob) {
+                  const resizedFile = new window.File([blob], file.name, {
+                    type: file.type,
+                    lastModified: Date.now()
+                  });
+                  resolve(resizedFile);
+                } else {
+                  resolve(file);
+                }
+              },
+              file.type,
+              quality
+            );
+          };
+        };
+        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 = [];
@@ -59088,6 +59299,18 @@ 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");
@@ -59124,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);
@@ -59163,14 +59386,15 @@ var MoonUIFileUploadPro = t__default.forwardRef(
       const newFileItems = [];
       for (const file of validFiles) {
         const id = `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;
-        const preview = await createPreview(file);
-        const metadata = await createMetadata(file);
+        const processedFile = await resizeImage(file);
+        const preview = await createPreview(processedFile);
+        const metadata = await createMetadata(processedFile);
         newFileItems.push({
           id,
-          file,
+          file: processedFile,
           status: "pending",
           progress: 0,
-          totalBytes: file.size,
+          totalBytes: processedFile.size,
           preview,
           metadata
         });
@@ -59196,7 +59420,8 @@ var MoonUIFileUploadPro = t__default.forwardRef(
       createPreview,
       createMetadata,
       onUpload,
-      uploadFileChunked
+      uploadFileChunked,
+      resizeImage
     ]);
     const handleDrop = useCallback((e) => {
       e.preventDefault();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.11.1",
+  "version": "2.11.3",
   "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
@@ -477,6 +461,10 @@ export const MoonUIFileUploadPro = React.forwardRef<HTMLDivElement, FileUploadPr
     onPreview,
     onBulkSelect,
     customValidation,
+    serviceConfig,
+    imageResize,
+    endpoint,
+    headers,
     ...props
   }, ref) => {
     
@@ -610,6 +598,261 @@ export const MoonUIFileUploadPro = React.forwardRef<HTMLDivElement, FileUploadPr
       return metadata
     }, [duplicateCheck])
     
+    // Image resize handler
+    const resizeImage = useCallback(async (file: File): Promise<File> => {
+      if (!imageResize || !file.type.startsWith('image/')) return file
+
+      const { maxWidth, maxHeight, quality } = imageResize
+
+      return new Promise((resolve) => {
+        const img = new Image()
+        const reader = new FileReader()
+
+        reader.onload = (e) => {
+          img.src = e.target?.result as string
+
+          img.onload = () => {
+            const canvas = document.createElement('canvas')
+            const ctx = canvas.getContext('2d')!
+
+            let width = img.width
+            let height = img.height
+
+            // Calculate new dimensions
+            if (width > maxWidth || height > maxHeight) {
+              const aspectRatio = width / height
+              if (width > height) {
+                width = maxWidth
+                height = maxWidth / aspectRatio
+              } else {
+                height = maxHeight
+                width = maxHeight * aspectRatio
+              }
+            }
+
+            canvas.width = width
+            canvas.height = height
+            ctx.drawImage(img, 0, 0, width, height)
+
+            canvas.toBlob(
+              (blob) => {
+                if (blob) {
+                  // Create a resized file
+                  const resizedFile = new window.File([blob], file.name, {
+                    type: file.type,
+                    lastModified: Date.now()
+                  })
+                  resolve(resizedFile)
+                } else {
+                  resolve(file)
+                }
+              },
+              file.type,
+              quality
+            )
+          }
+        }
+
+        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) => {
       const { file } = fileItem
@@ -641,13 +884,33 @@ 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')
           }
           
-          // Chunk upload simülasyonu
           await new Promise(resolve => setTimeout(resolve, 100 + Math.random() * 200))
           
           uploadedBytes += (chunk.end - chunk.start)
@@ -697,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[]) => {
@@ -752,15 +1015,19 @@ export const MoonUIFileUploadPro = React.forwardRef<HTMLDivElement, FileUploadPr
       
       for (const file of validFiles) {
         const id = `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`
-        const preview = await createPreview(file)
-        const metadata = await createMetadata(file)
+        
+        // Resize image if needed
+        const processedFile = await resizeImage(file)
+        
+        const preview = await createPreview(processedFile)
+        const metadata = await createMetadata(processedFile)
         
         newFileItems.push({
           id,
-          file,
+          file: processedFile,
           status: 'pending',
           progress: 0,
-          totalBytes: file.size,
+          totalBytes: processedFile.size,
           preview,
           metadata
         })
@@ -790,7 +1057,8 @@ export const MoonUIFileUploadPro = React.forwardRef<HTMLDivElement, FileUploadPr
       createPreview, 
       createMetadata, 
       onUpload, 
-      uploadFileChunked
+      uploadFileChunked,
+      resizeImage
     ])
     
     // Drag & Drop handlers