@moontra/moonui-pro 2.11.0 → 2.11.2

package/dist/index.d.ts

@@ -1774,6 +1774,26 @@ interface FileUploadProProps {
     uploadStrategy?: 'direct' | 'presigned' | 'multipart';
     endpoint?: string;
     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;
+        };
+    };
     onUpload?: (files: FileUploadItem[]) => Promise<void>;
     onProgress?: (fileId: string, progress: number) => void;
     onComplete?: (fileId: string, result: any) => void;

package/dist/index.mjs

@@ -58771,23 +58771,54 @@ var generateFileHash = async (file) => {
 };
 var createImagePreview = (file) => {
   return new Promise((resolve) => {
-    const img = new Image();
-    const url = URL.createObjectURL(file);
-    img.onload = () => {
-      resolve({
-        type: "image",
-        url,
-        thumbnail: url,
-        dimensions: { width: img.width, height: img.height }
-      });
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const result = e.target?.result;
+      const img = new Image();
+      img.onload = () => {
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
+        const maxThumbSize = 400;
+        let thumbWidth = img.width;
+        let thumbHeight = img.height;
+        if (thumbWidth > maxThumbSize || thumbHeight > maxThumbSize) {
+          const aspectRatio = img.width / img.height;
+          if (aspectRatio > 1) {
+            thumbWidth = maxThumbSize;
+            thumbHeight = maxThumbSize / aspectRatio;
+          } else {
+            thumbHeight = maxThumbSize;
+            thumbWidth = maxThumbSize * aspectRatio;
+          }
+        }
+        canvas.width = thumbWidth;
+        canvas.height = thumbHeight;
+        ctx.drawImage(img, 0, 0, thumbWidth, thumbHeight);
+        const thumbnail = canvas.toDataURL("image/jpeg", 0.9);
+        resolve({
+          type: "image",
+          url: result,
+          thumbnail,
+          dimensions: { width: img.width, height: img.height }
+        });
+      };
+      img.onerror = () => {
+        resolve({
+          type: "image",
+          url: result,
+          thumbnail: result
+        });
+      };
+      img.src = result;
     };
-    img.onerror = () => {
+    reader.onerror = () => {
+      const url = URL.createObjectURL(file);
       resolve({
         type: "image",
         url
       });
     };
-    img.src = url;
+    reader.readAsDataURL(file);
   });
 };
 var createVideoPreview = (file) => {
@@ -58839,16 +58870,16 @@ var BulkActions = ({
       children: [
         /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium", children: [
           selectedIds.length,
-          " dosya se\xE7ildi"
+          " files selected"
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex gap-1 ml-auto", children: [
           /* @__PURE__ */ jsxs(MoonUIButtonPro, { variant: "ghost", size: "sm", onClick: onBulkDownload, children: [
             /* @__PURE__ */ jsx(Download, { className: "h-4 w-4 mr-1" }),
-            "\u0130ndir"
+            "Download"
           ] }),
           /* @__PURE__ */ jsxs(MoonUIButtonPro, { variant: "ghost", size: "sm", onClick: onBulkRemove, children: [
             /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4 mr-1" }),
-            "Sil"
+            "Delete"
           ] }),
           /* @__PURE__ */ jsx(MoonUIButtonPro, { variant: "ghost", size: "sm", onClick: onClearSelection, children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) })
         ] })
@@ -58870,37 +58901,45 @@ var FilePreviewModal = ({
       /* @__PURE__ */ jsx(MoonUIBadgePro, { variant: "secondary", children: formatFileSize(file.file.size) })
     ] }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center p-4 bg-muted/20 rounded-lg", children: [
-      file.preview.type === "image" && /* @__PURE__ */ jsx(
-        "img",
-        {
-          src: file.preview.url,
-          alt: file.file.name,
-          className: "max-w-full max-h-[60vh] object-contain rounded"
-        }
-      ),
-      file.preview.type === "video" && /* @__PURE__ */ jsx(
+      file.preview.type === "image" && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: file.preview.url,
+            alt: file.file.name,
+            className: "max-w-full max-h-[60vh] object-contain rounded shadow-lg",
+            loading: "eager"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-background/80 rounded opacity-0 pointer-events-none transition-opacity duration-300", children: /* @__PURE__ */ jsx(Loader2, { className: "h-8 w-8 animate-spin text-muted-foreground" }) })
+      ] }),
+      file.preview.type === "video" && /* @__PURE__ */ jsx("div", { className: "relative w-full max-w-4xl", children: /* @__PURE__ */ jsx(
         "video",
         {
           src: file.preview.url,
           controls: true,
-          className: "max-w-full max-h-[60vh] rounded"
+          className: "w-full max-h-[60vh] rounded shadow-lg",
+          poster: file.preview.thumbnail
         }
-      ),
-      file.preview.type === "audio" && /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx("audio", { src: file.preview.url, controls: true, className: "w-full" }) }),
+      ) }),
+      file.preview.type === "audio" && /* @__PURE__ */ jsx("div", { className: "w-full max-w-md space-y-4", children: /* @__PURE__ */ jsxs("div", { className: "p-8 bg-gradient-to-br from-primary/10 to-primary/5 rounded-lg", children: [
+        /* @__PURE__ */ jsx(Music, { className: "h-16 w-16 mx-auto text-primary mb-4" }),
+        /* @__PURE__ */ jsx("audio", { src: file.preview.url, controls: true, className: "w-full" })
+      ] }) }),
       !["image", "video", "audio"].includes(file.preview.type) && /* @__PURE__ */ jsxs("div", { className: "text-center py-8", children: [
         getFileIcon(file.file.type, "lg"),
-        /* @__PURE__ */ jsx("p", { className: "mt-2 text-muted-foreground", children: "\xD6nizleme mevcut de\u011Fil" })
+        /* @__PURE__ */ jsx("p", { className: "mt-2 text-muted-foreground", children: "Preview not available" })
       ] })
     ] }),
     file.preview.dimensions && /* @__PURE__ */ jsxs("div", { className: "flex gap-4 text-sm text-muted-foreground", children: [
       /* @__PURE__ */ jsxs("span", { children: [
-        "Boyutlar: ",
+        "Dimensions: ",
         file.preview.dimensions.width,
         " \xD7 ",
         file.preview.dimensions.height
       ] }),
       file.preview.duration && /* @__PURE__ */ jsxs("span", { children: [
-        "S\xFCre: ",
+        "Duration: ",
         formatTime(file.preview.duration)
       ] })
     ] })
@@ -58937,6 +58976,10 @@ var MoonUIFileUploadPro = t__default.forwardRef(
     onPreview,
     onBulkSelect,
     customValidation,
+    serviceConfig,
+    imageResize,
+    endpoint,
+    headers,
     ...props
   }, ref) => {
     const { hasProAccess, isLoading } = useSubscription();
@@ -58952,21 +58995,21 @@ var MoonUIFileUploadPro = t__default.forwardRef(
       return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn("w-full", className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "py-12 text-center", children: /* @__PURE__ */ jsxs("div", { className: "max-w-md mx-auto space-y-4", children: [
         /* @__PURE__ */ jsx("div", { className: "rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto", children: /* @__PURE__ */ jsx(Lock, { className: "h-6 w-6 text-purple-600 dark:text-purple-400" }) }),
         /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("h3", { className: "font-semibold text-lg mb-2", children: "Pro \xD6zellik" }),
-          /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm mb-4", children: "Geli\u015Fmi\u015F Dosya Y\xFCkleme sadece MoonUI Pro abonelerine \xF6zeldir." }),
+          /* @__PURE__ */ jsx("h3", { className: "font-semibold text-lg mb-2", children: "Pro Feature" }),
+          /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm mb-4", children: "Advanced File Upload is exclusive to MoonUI Pro subscribers." }),
           /* @__PURE__ */ jsx("div", { className: "flex gap-3 justify-center", children: /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(MoonUIButtonPro, { size: "sm", children: [
             /* @__PURE__ */ jsx(Sparkles, { className: "mr-2 h-4 w-4" }),
-            "Pro'ya Y\xFCkseltin"
+            "Upgrade to Pro"
           ] }) }) })
         ] })
       ] }) }) });
     }
     const validateFile = useCallback(async (file) => {
       if (file.size > maxSize) {
-        return `Dosya boyutu ${formatFileSize(maxSize)} limitini a\u015F\u0131yor`;
+        return `File size exceeds ${formatFileSize(maxSize)} limit`;
       }
       if (allowedMimeTypes.length > 0 && !allowedMimeTypes.includes(file.type)) {
-        return `Dosya t\xFCr\xFC ${file.type} desteklenmiyor`;
+        return `File type ${file.type} is not supported`;
       }
       if (accept !== "*") {
         const acceptTypes = accept.split(",").map((t2) => t2.trim());
@@ -58977,7 +59020,7 @@ var MoonUIFileUploadPro = t__default.forwardRef(
           return file.type === acceptType;
         });
         if (!isAccepted) {
-          return `Dosya t\xFCr\xFC kabul edilmiyor`;
+          return `File type not accepted`;
         }
       }
       if (customValidation) {
@@ -59012,7 +59055,7 @@ var MoonUIFileUploadPro = t__default.forwardRef(
           };
         }
       } catch (error2) {
-        console.warn("\xD6nizleme olu\u015Fturulamad\u0131:", error2);
+        console.warn("Failed to create preview:", error2);
       }
       return void 0;
     }, [showPreview, previewTypes]);
@@ -59028,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 = [];
@@ -59053,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;
@@ -59090,14 +59220,14 @@ var MoonUIFileUploadPro = t__default.forwardRef(
       const fileArray = Array.from(fileList);
       setError(null);
       if (files.length + fileArray.length > maxFiles) {
-        setError(`Maksimum ${maxFiles} dosya y\xFCkleyebilirsiniz`);
+        setError(`Maximum ${maxFiles} files allowed`);
         return;
       }
       if (maxTotalSize) {
         const currentSize = files.reduce((sum, f) => sum + f.file.size, 0);
         const newSize = fileArray.reduce((sum, f) => sum + f.size, 0);
         if (currentSize + newSize > maxTotalSize) {
-          setError(`Toplam dosya boyutu ${formatFileSize(maxTotalSize)} limitini a\u015F\u0131yor`);
+          setError(`Total file size exceeds ${formatFileSize(maxTotalSize)} limit`);
           return;
         }
       }
@@ -59111,7 +59241,7 @@ var MoonUIFileUploadPro = t__default.forwardRef(
         }
         const isDuplicate = await checkDuplicate(file);
         if (isDuplicate) {
-          errors.push(`${file.name}: Dosya zaten mevcut`);
+          errors.push(`${file.name}: File already exists`);
           continue;
         }
         validFiles.push(file);
@@ -59124,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
         });
@@ -59157,7 +59288,8 @@ var MoonUIFileUploadPro = t__default.forwardRef(
       createPreview,
       createMetadata,
       onUpload,
-      uploadFileChunked
+      uploadFileChunked,
+      resizeImage
     ]);
     const handleDrop = useCallback((e) => {
       e.preventDefault();
@@ -59298,28 +59430,28 @@ var MoonUIFileUploadPro = t__default.forwardRef(
                 }
               ),
               /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: isDragOver ? "Dosyalar\u0131 buraya b\u0131rak\u0131n" : "Dosya Y\xFCkleyin" }),
-                /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Dosyalar\u0131 s\xFCr\xFCkleyip b\u0131rak\u0131n veya t\u0131klayarak se\xE7in" }),
+                /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: isDragOver ? "Drop files here" : "Upload Files" }),
+                /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Drag and drop files or click to select" }),
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-4 mt-3 text-xs text-muted-foreground", children: [
                   /* @__PURE__ */ jsxs("span", { children: [
-                    "Maks ",
+                    "Max ",
                     maxFiles,
-                    " dosya"
+                    " files"
                   ] }),
                   /* @__PURE__ */ jsx("span", { children: "\u2022" }),
                   /* @__PURE__ */ jsxs("span", { children: [
                     formatFileSize(maxSize),
-                    " her dosya"
+                    " per file"
                   ] }),
                   resumable && /* @__PURE__ */ jsxs(Fragment, { children: [
                     /* @__PURE__ */ jsx("span", { children: "\u2022" }),
-                    /* @__PURE__ */ jsx("span", { children: "Devam ettirilebilir" })
+                    /* @__PURE__ */ jsx("span", { children: "Resumable" })
                   ] })
                 ] })
               ] }),
               /* @__PURE__ */ jsxs(MoonUIButtonPro, { variant: "outline", disabled, type: "button", children: [
                 /* @__PURE__ */ jsx(Upload, { className: "mr-2 h-4 w-4" }),
-                "Dosya Se\xE7"
+                "Select Files"
               ] })
             ] })
           ]
@@ -59358,7 +59490,7 @@ var MoonUIFileUploadPro = t__default.forwardRef(
           children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
               /* @__PURE__ */ jsxs("h4", { className: "text-sm font-medium", children: [
-                "Y\xFCklenen Dosyalar (",
+                "Uploaded Files (",
                 files.length,
                 ")"
               ] }),
@@ -59368,7 +59500,7 @@ var MoonUIFileUploadPro = t__default.forwardRef(
                   variant: "ghost",
                   size: "sm",
                   onClick: selectedIds.length === files.length ? handleClearSelection : handleSelectAll,
-                  children: selectedIds.length === files.length ? "Se\xE7imi Temizle" : "T\xFCm\xFCn\xFC Se\xE7"
+                  children: selectedIds.length === files.length ? "Clear Selection" : "Select All"
                 }
               )
             ] }),
@@ -59522,7 +59654,7 @@ var FileUploadItem = ({
                   file.status === "success" && /* @__PURE__ */ jsx(CheckCircle2, { className: "h-3 w-3 mr-1" }),
                   file.status === "error" && /* @__PURE__ */ jsx(AlertCircle, { className: "h-3 w-3 mr-1" }),
                   file.status === "paused" && /* @__PURE__ */ jsx(Pause, { className: "h-3 w-3 mr-1" }),
-                  file.status === "pending" ? "Bekliyor" : file.status === "uploading" ? "Y\xFCkleniyor" : file.status === "paused" ? "Duraklat\u0131ld\u0131" : file.status === "success" ? "Tamamland\u0131" : file.status === "error" ? "Hata" : "\u0130ptal"
+                  file.status === "pending" ? "Pending" : file.status === "uploading" ? "Uploading" : file.status === "paused" ? "Paused" : file.status === "success" ? "Completed" : file.status === "error" ? "Error" : "Cancelled"
                 ]
               }
             )
@@ -59539,7 +59671,7 @@ var FileUploadItem = ({
               ] }),
               file.estimatedTime && file.estimatedTime > 0 && /* @__PURE__ */ jsxs("span", { children: [
                 formatTime(file.estimatedTime),
-                " kald\u0131"
+                " remaining"
               ] })
             ] }),
             /* @__PURE__ */ jsx(MoonUIProgressPro, { value: file.progress, className: "h-1" })
@@ -59583,19 +59715,19 @@ var FileUploadItem = ({
               /* @__PURE__ */ jsxs(MoonUIDropdownMenuContentPro, { align: "end", children: [
                 canPreview && /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: onPreview, children: [
                   /* @__PURE__ */ jsx(Eye, { className: "mr-2 h-4 w-4" }),
-                  "\xD6nizle"
+                  "Preview"
                 ] }),
                 /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { children: [
                   /* @__PURE__ */ jsx(Copy, { className: "mr-2 h-4 w-4" }),
-                  "Linki Kopyala"
+                  "Copy Link"
                 ] }),
                 /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { children: [
                   /* @__PURE__ */ jsx(Share, { className: "mr-2 h-4 w-4" }),
-                  "Payla\u015F"
+                  "Share"
                 ] }),
                 /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: onRemove, className: "text-destructive", children: [
                   /* @__PURE__ */ jsx(Trash2, { className: "mr-2 h-4 w-4" }),
-                  "Sil"
+                  "Delete"
                 ] })
               ] })
             ] })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.11.0",
+  "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

@@ -78,6 +78,28 @@ export interface FileUploadProProps {
   endpoint?: string
   headers?: Record<string, string>
   
+  // 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
+    }
+  }
+  
   // Callbacks
   onUpload?: (files: FileUploadItem[]) => Promise<void>
   onProgress?: (fileId: string, progress: number) => void
@@ -200,26 +222,67 @@ const generateFileHash = async (file: File): Promise<string> => {
 
 const createImagePreview = (file: File): Promise<FilePreview> => {
   return new Promise((resolve) => {
-    const img = new Image()
-    const url = URL.createObjectURL(file)
+    const reader = new FileReader()
     
-    img.onload = () => {
-      resolve({
-        type: 'image',
-        url,
-        thumbnail: url,
-        dimensions: { width: img.width, height: img.height }
-      })
+    reader.onload = (e) => {
+      const result = e.target?.result as string
+      const img = new Image()
+      
+      img.onload = () => {
+        // Create high-quality thumbnail
+        const canvas = document.createElement('canvas')
+        const ctx = canvas.getContext('2d')!
+        
+        // Calculate thumbnail dimensions (max 400px)
+        const maxThumbSize = 400
+        let thumbWidth = img.width
+        let thumbHeight = img.height
+        
+        if (thumbWidth > maxThumbSize || thumbHeight > maxThumbSize) {
+          const aspectRatio = img.width / img.height
+          if (aspectRatio > 1) {
+            thumbWidth = maxThumbSize
+            thumbHeight = maxThumbSize / aspectRatio
+          } else {
+            thumbHeight = maxThumbSize
+            thumbWidth = maxThumbSize * aspectRatio
+          }
+        }
+        
+        canvas.width = thumbWidth
+        canvas.height = thumbHeight
+        ctx.drawImage(img, 0, 0, thumbWidth, thumbHeight)
+        
+        const thumbnail = canvas.toDataURL('image/jpeg', 0.9)
+        
+        resolve({
+          type: 'image',
+          url: result,
+          thumbnail,
+          dimensions: { width: img.width, height: img.height }
+        })
+      }
+      
+      img.onerror = () => {
+        resolve({
+          type: 'image',
+          url: result,
+          thumbnail: result
+        })
+      }
+      
+      img.src = result
     }
     
-    img.onerror = () => {
+    reader.onerror = () => {
+      const url = URL.createObjectURL(file)
       resolve({
         type: 'image',
         url
       })
     }
     
-    img.src = url
+    reader.readAsDataURL(file)
   })
 }
 
@@ -284,15 +347,15 @@ const BulkActions = ({
       exit={{ opacity: 0, y: -10 }}
       className="flex items-center gap-2 p-3 bg-primary/5 rounded-lg border"
     >
-      <span className="text-sm font-medium">{selectedIds.length} dosya seçildi</span>
+      <span className="text-sm font-medium">{selectedIds.length} files selected</span>
       <div className="flex gap-1 ml-auto">
         <Button variant="ghost" size="sm" onClick={onBulkDownload}>
           <Download className="h-4 w-4 mr-1" />
-          İndir
+          Download
         </Button>
         <Button variant="ghost" size="sm" onClick={onBulkRemove}>
           <Trash2 className="h-4 w-4 mr-1" />
-          Sil
+          Delete
         </Button>
         <Button variant="ghost" size="sm" onClick={onClearSelection}>
           <X className="h-4 w-4" />
@@ -329,40 +392,53 @@ const FilePreviewModal = ({
         
         <div className="flex items-center justify-center p-4 bg-muted/20 rounded-lg">
           {file.preview.type === 'image' && (
-            <img 
-              src={file.preview.url} 
-              alt={file.file.name}
-              className="max-w-full max-h-[60vh] object-contain rounded"
-            />
+            <div className="relative">
+              <img 
+                src={file.preview.url} 
+                alt={file.file.name}
+                className="max-w-full max-h-[60vh] object-contain rounded shadow-lg"
+                loading="eager"
+              />
+              {/* Image loading indicator */}
+              <div className="absolute inset-0 flex items-center justify-center bg-background/80 rounded opacity-0 pointer-events-none transition-opacity duration-300">
+                <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+              </div>
+            </div>
           )}
           
           {file.preview.type === 'video' && (
-            <video 
-              src={file.preview.url} 
-              controls 
-              className="max-w-full max-h-[60vh] rounded"
-            />
+            <div className="relative w-full max-w-4xl">
+              <video 
+                src={file.preview.url} 
+                controls 
+                className="w-full max-h-[60vh] rounded shadow-lg"
+                poster={file.preview.thumbnail}
+              />
+            </div>
           )}
           
           {file.preview.type === 'audio' && (
-            <div className="w-full max-w-md">
-              <audio src={file.preview.url} controls className="w-full" />
+            <div className="w-full max-w-md space-y-4">
+              <div className="p-8 bg-gradient-to-br from-primary/10 to-primary/5 rounded-lg">
+                <Music className="h-16 w-16 mx-auto text-primary mb-4" />
+                <audio src={file.preview.url} controls className="w-full" />
+              </div>
             </div>
           )}
           
           {!['image', 'video', 'audio'].includes(file.preview.type) && (
             <div className="text-center py-8">
               {getFileIcon(file.file.type, 'lg')}
-              <p className="mt-2 text-muted-foreground">Önizleme mevcut değil</p>
+              <p className="mt-2 text-muted-foreground">Preview not available</p>
             </div>
           )}
         </div>
         
         {file.preview.dimensions && (
           <div className="flex gap-4 text-sm text-muted-foreground">
-            <span>Boyutlar: {file.preview.dimensions.width} × {file.preview.dimensions.height}</span>
+            <span>Dimensions: {file.preview.dimensions.width} × {file.preview.dimensions.height}</span>
             {file.preview.duration && (
-              <span>Süre: {formatTime(file.preview.duration)}</span>
+              <span>Duration: {formatTime(file.preview.duration)}</span>
             )}
           </div>
         )}
@@ -401,6 +477,10 @@ export const MoonUIFileUploadPro = React.forwardRef<HTMLDivElement, FileUploadPr
     onPreview,
     onBulkSelect,
     customValidation,
+    serviceConfig,
+    imageResize,
+    endpoint,
+    headers,
     ...props
   }, ref) => {
     
@@ -428,15 +508,15 @@ export const MoonUIFileUploadPro = React.forwardRef<HTMLDivElement, FileUploadPr
                 <Lock className="h-6 w-6 text-purple-600 dark:text-purple-400" />
               </div>
               <div>
-                <h3 className="font-semibold text-lg mb-2">Pro Özellik</h3>
+                <h3 className="font-semibold text-lg mb-2">Pro Feature</h3>
                 <p className="text-muted-foreground text-sm mb-4">
-                  Gelişmiş Dosya Yükleme sadece MoonUI Pro abonelerine özeldir.
+                  Advanced File Upload is exclusive to MoonUI Pro subscribers.
                 </p>
                 <div className="flex gap-3 justify-center">
                   <a href="/pricing">
                     <Button size="sm">
                       <Sparkles className="mr-2 h-4 w-4" />
-                      Pro'ya Yükseltin
+                      Upgrade to Pro
                     </Button>
                   </a>
                 </div>
@@ -451,12 +531,12 @@ export const MoonUIFileUploadPro = React.forwardRef<HTMLDivElement, FileUploadPr
     const validateFile = useCallback(async (file: File): Promise<string | null> => {
       // Boyut kontrolü
       if (file.size > maxSize) {
-        return `Dosya boyutu ${formatFileSize(maxSize)} limitini aşıyor`
+        return `File size exceeds ${formatFileSize(maxSize)} limit`
       }
       
       // MIME type kontrolü
       if (allowedMimeTypes.length > 0 && !allowedMimeTypes.includes(file.type)) {
-        return `Dosya türü ${file.type} desteklenmiyor`
+        return `File type ${file.type} is not supported`
       }
       
       // Accept kontrolü
@@ -470,7 +550,7 @@ export const MoonUIFileUploadPro = React.forwardRef<HTMLDivElement, FileUploadPr
         })
         
         if (!isAccepted) {
-          return `Dosya türü kabul edilmiyor`
+          return `File type not accepted`
         }
       }
       
@@ -512,7 +592,7 @@ export const MoonUIFileUploadPro = React.forwardRef<HTMLDivElement, FileUploadPr
           }
         }
       } catch (error) {
-        console.warn('Önizleme oluşturulamadı:', error)
+        console.warn('Failed to create preview:', error)
       }
       
       return undefined
@@ -534,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
@@ -571,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)
@@ -630,7 +824,7 @@ export const MoonUIFileUploadPro = React.forwardRef<HTMLDivElement, FileUploadPr
       
       // Toplam dosya sayısı kontrolü
       if (files.length + fileArray.length > maxFiles) {
-        setError(`Maksimum ${maxFiles} dosya yükleyebilirsiniz`)
+        setError(`Maximum ${maxFiles} files allowed`)
         return
       }
       
@@ -640,7 +834,7 @@ export const MoonUIFileUploadPro = React.forwardRef<HTMLDivElement, FileUploadPr
         const newSize = fileArray.reduce((sum, f) => sum + f.size, 0)
         
         if (currentSize + newSize > maxTotalSize) {
-          setError(`Toplam dosya boyutu ${formatFileSize(maxTotalSize)} limitini aşıyor`)
+          setError(`Total file size exceeds ${formatFileSize(maxTotalSize)} limit`)
           return
         }
       }
@@ -658,7 +852,7 @@ export const MoonUIFileUploadPro = React.forwardRef<HTMLDivElement, FileUploadPr
         
         const isDuplicate = await checkDuplicate(file)
         if (isDuplicate) {
-          errors.push(`${file.name}: Dosya zaten mevcut`)
+          errors.push(`${file.name}: File already exists`)
           continue
         }
         
@@ -676,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
         })
@@ -714,7 +912,8 @@ export const MoonUIFileUploadPro = React.forwardRef<HTMLDivElement, FileUploadPr
       createPreview, 
       createMetadata, 
       onUpload, 
-      uploadFileChunked
+      uploadFileChunked,
+      resizeImage
     ])
     
     // Drag & Drop handlers
@@ -886,19 +1085,19 @@ export const MoonUIFileUploadPro = React.forwardRef<HTMLDivElement, FileUploadPr
             
             <div>
               <h3 className="text-lg font-semibold">
-                {isDragOver ? 'Dosyaları buraya bırakın' : 'Dosya Yükleyin'}
+                {isDragOver ? 'Drop files here' : 'Upload Files'}
               </h3>
               <p className="text-sm text-muted-foreground mt-1">
-                Dosyaları sürükleyip bırakın veya tıklayarak seçin
+                Drag and drop files or click to select
               </p>
               <div className="flex items-center justify-center gap-4 mt-3 text-xs text-muted-foreground">
-                <span>Maks {maxFiles} dosya</span>
+                <span>Max {maxFiles} files</span>
                 <span>•</span>
-                <span>{formatFileSize(maxSize)} her dosya</span>
+                <span>{formatFileSize(maxSize)} per file</span>
                 {resumable && (
                   <>
                     <span>•</span>
-                    <span>Devam ettirilebilir</span>
+                    <span>Resumable</span>
                   </>
                 )}
               </div>
@@ -906,7 +1105,7 @@ export const MoonUIFileUploadPro = React.forwardRef<HTMLDivElement, FileUploadPr
             
             <Button variant="outline" disabled={disabled} type="button">
               <Upload className="mr-2 h-4 w-4" />
-              Dosya Seç
+              Select Files
             </Button>
           </div>
         </motion.div>
@@ -946,7 +1145,7 @@ export const MoonUIFileUploadPro = React.forwardRef<HTMLDivElement, FileUploadPr
               {/* List Header */}
               <div className="flex items-center justify-between">
                 <h4 className="text-sm font-medium">
-                  Yüklenen Dosyalar ({files.length})
+                  Uploaded Files ({files.length})
                 </h4>
                 {allowBulkOperations && files.length > 1 && (
                   <Button 
@@ -954,7 +1153,7 @@ export const MoonUIFileUploadPro = React.forwardRef<HTMLDivElement, FileUploadPr
                     size="sm"
                     onClick={selectedIds.length === files.length ? handleClearSelection : handleSelectAll}
                   >
-                    {selectedIds.length === files.length ? 'Seçimi Temizle' : 'Tümünü Seç'}
+                    {selectedIds.length === files.length ? 'Clear Selection' : 'Select All'}
                   </Button>
                 )}
               </div>
@@ -1152,11 +1351,11 @@ const FileUploadItem = ({
             {file.status === 'success' && <CheckCircle2 className="h-3 w-3 mr-1" />}
             {file.status === 'error' && <AlertCircle className="h-3 w-3 mr-1" />}
             {file.status === 'paused' && <Pause className="h-3 w-3 mr-1" />}
-            {file.status === 'pending' ? 'Bekliyor' :
-             file.status === 'uploading' ? 'Yükleniyor' :
-             file.status === 'paused' ? 'Duraklatıldı' :
-             file.status === 'success' ? 'Tamamlandı' :
-             file.status === 'error' ? 'Hata' : 'İptal'}
+            {file.status === 'pending' ? 'Pending' :
+             file.status === 'uploading' ? 'Uploading' :
+             file.status === 'paused' ? 'Paused' :
+             file.status === 'success' ? 'Completed' :
+             file.status === 'error' ? 'Error' : 'Cancelled'}
           </Badge>
         </div>
         
@@ -1169,7 +1368,7 @@ const FileUploadItem = ({
                 <span>{formatFileSize(file.speed)}/s</span>
               )}
               {file.estimatedTime && file.estimatedTime > 0 && (
-                <span>{formatTime(file.estimatedTime)} kaldı</span>
+                <span>{formatTime(file.estimatedTime)} remaining</span>
               )}
             </div>
             <Progress value={file.progress} className="h-1" />
@@ -1232,20 +1431,20 @@ const FileUploadItem = ({
               {canPreview && (
                 <DropdownMenuItem onClick={onPreview}>
                   <Eye className="mr-2 h-4 w-4" />
-                  Önizle
+                  Preview
                 </DropdownMenuItem>
               )}
               <DropdownMenuItem>
                 <Copy className="mr-2 h-4 w-4" />
-                Linki Kopyala
+                Copy Link
               </DropdownMenuItem>
               <DropdownMenuItem>
                 <Share className="mr-2 h-4 w-4" />
-                Paylaş
+                Share
               </DropdownMenuItem>
               <DropdownMenuItem onClick={onRemove} className="text-destructive">
                 <Trash2 className="mr-2 h-4 w-4" />
-                Sil
+                Delete
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>