@moontra/moonui-pro 2.11.1 → 2.11.2

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,90 @@ 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;
+      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 uploadFileChunked = useCallback(async (fileItem) => {
       const { file } = fileItem;
       const chunks = [];
@@ -59092,7 +59180,10 @@ var MoonUIFileUploadPro = t__default.forwardRef(
           if (abortController.signal.aborted) {
             throw new Error("Upload cancelled");
           }
-          await new Promise((resolve) => setTimeout(resolve, 100 + Math.random() * 200));
+          const serviceResult = await uploadToService(fileItem);
+          if (!serviceResult) {
+            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;
@@ -59163,14 +59254,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 +59288,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.2",
   "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

@@ -477,6 +477,10 @@ export const MoonUIFileUploadPro = React.forwardRef<HTMLDivElement, FileUploadPr
     onPreview,
     onBulkSelect,
     customValidation,
+    serviceConfig,
+    imageResize,
+    endpoint,
+    headers,
     ...props
   }, ref) => {
     
@@ -610,6 +614,115 @@ 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
+
+      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])
+
     // Chunked upload simülasyonu
     const uploadFileChunked = useCallback(async (fileItem: FileUploadItem) => {
       const { file } = fileItem
@@ -647,8 +760,13 @@ export const MoonUIFileUploadPro = React.forwardRef<HTMLDivElement, FileUploadPr
             throw new Error('Upload cancelled')
           }
           
-          // Chunk upload simülasyonu
-          await new Promise(resolve => setTimeout(resolve, 100 + Math.random() * 200))
+          // 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))
+          }
           
           uploadedBytes += (chunk.end - chunk.start)
           const progress = Math.round((uploadedBytes / file.size) * 100)
@@ -752,15 +870,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 +912,8 @@ export const MoonUIFileUploadPro = React.forwardRef<HTMLDivElement, FileUploadPr
       createPreview, 
       createMetadata, 
       onUpload, 
-      uploadFileChunked
+      uploadFileChunked,
+      resizeImage
     ])
     
     // Drag & Drop handlers