@tradly/asset 1.0.24 → 1.0.26

package/dist/core/MediaApiService.js

@@ -298,7 +298,13 @@ var MediaApiService = /*#__PURE__*/function () {
                   name: file.name.replace(/\s/g, "-"),
                   type: file.type
                 };
-              }); // Prepare headers
+              });
+              console.log("fileData", {
+                files: files,
+                fileData: fileData
+              });
+
+              // Prepare headers
               headers = {
                 "Content-Type": "application/json",
                 "X-Auth-Key": auth_key // Capital X for Tradly API
@@ -394,15 +400,10 @@ var MediaApiService = /*#__PURE__*/function () {
                 break;
               }
               _context5.p = 3;
-              console.log("upload_full_files", upload_full_files);
-              // Step 1: Get signed URLs from API
               _context5.n = 4;
               return this.getS3SignedUrls(upload_full_files, auth_key);
             case 4:
               responseFiles = _context5.v;
-              console.log("responseFiles", responseFiles);
-
-              // Step 2: Upload each file to S3
               index = 0;
             case 5:
               if (!(index < responseFiles.length)) {

package/dist/esm/core/MediaApiService.js

@@ -292,7 +292,13 @@ var MediaApiService = /*#__PURE__*/function () {
                   name: file.name.replace(/\s/g, "-"),
                   type: file.type
                 };
-              }); // Prepare headers
+              });
+              console.log("fileData", {
+                files: files,
+                fileData: fileData
+              });
+
+              // Prepare headers
               headers = {
                 "Content-Type": "application/json",
                 "X-Auth-Key": auth_key // Capital X for Tradly API
@@ -388,15 +394,10 @@ var MediaApiService = /*#__PURE__*/function () {
                 break;
               }
               _context5.p = 3;
-              console.log("upload_full_files", upload_full_files);
-              // Step 1: Get signed URLs from API
               _context5.n = 4;
               return this.getS3SignedUrls(upload_full_files, auth_key);
             case 4:
               responseFiles = _context5.v;
-              console.log("responseFiles", responseFiles);
-
-              // Step 2: Upload each file to S3
               index = 0;
             case 5:
               if (!(index < responseFiles.length)) {

package/dist/esm/native/FileUpload.native.js

@@ -153,24 +153,109 @@ var FileUpload = function FileUpload(_ref) {
     }
 
     // Extract MIME type (handle different property names)
-    // Use a helper function to determine MIME type from filename if needed
-    var getMimeType = function getMimeType(name, fallbackType) {
+    // Use a comprehensive helper function to determine MIME type from filename
+    var getMimeTypeFromFileName = function getMimeTypeFromFileName(name) {
       var _name$split$pop;
-      if (fallbackType) return fallbackType;
-      var ext = (_name$split$pop = name.split(".").pop()) === null || _name$split$pop === void 0 ? void 0 : _name$split$pop.toLowerCase();
+      if (!name) return "application/octet-stream";
+      var ext = (_name$split$pop = name.split(".").pop()) === null || _name$split$pop === void 0 ? void 0 : _name$split$pop.toLowerCase().trim();
+      if (!ext) return "application/octet-stream";
+
+      // Comprehensive MIME type mapping
       var mimeMap = {
+        // Images
         jpg: "image/jpeg",
         jpeg: "image/jpeg",
         png: "image/png",
         gif: "image/gif",
         webp: "image/webp",
+        svg: "image/svg+xml",
+        bmp: "image/bmp",
+        ico: "image/x-icon",
+        heic: "image/heic",
+        heif: "image/heif",
+        tiff: "image/tiff",
+        tif: "image/tiff",
+        jfif: "image/jpeg",
+        avif: "image/avif",
+        // Videos
         mp4: "video/mp4",
         mov: "video/quicktime",
-        mp3: "audio/mpeg"
+        avi: "video/x-msvideo",
+        wmv: "video/x-ms-wmv",
+        flv: "video/x-flv",
+        mkv: "video/x-matroska",
+        webm: "video/webm",
+        mpeg: "video/mpeg",
+        mpg: "video/mpeg",
+        m4v: "video/x-m4v",
+        "3gp": "video/3gpp",
+        // Audio
+        mp3: "audio/mpeg",
+        wav: "audio/wav",
+        ogg: "audio/ogg",
+        m4a: "audio/mp4",
+        aac: "audio/aac",
+        flac: "audio/flac",
+        // Documents
+        pdf: "application/pdf",
+        doc: "application/msword",
+        docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+        xls: "application/vnd.ms-excel",
+        xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        ppt: "application/vnd.ms-powerpoint",
+        pptx: "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+        // Archives
+        zip: "application/zip",
+        rar: "application/rar",
+        "7z": "application/x-7z-compressed",
+        tar: "application/x-tar",
+        gz: "application/gzip",
+        // Text
+        txt: "text/plain",
+        html: "text/html",
+        htm: "text/html",
+        css: "text/css",
+        js: "text/javascript",
+        json: "application/json",
+        xml: "text/xml",
+        php: "application/x-php"
       };
-      return mimeMap[ext] || "image/jpeg";
+      return mimeMap[ext] || "application/octet-stream";
     };
-    var mimeType = pickerResult.mimeType || pickerResult.type || getMimeType(fileName, null);
+
+    // Get MIME type - prioritize picker result, then filename, then default
+    var mimeType = pickerResult.mimeType || pickerResult.type;
+
+    // Clean up MIME type if it exists but is malformed
+    if (mimeType) {
+      mimeType = mimeType.trim();
+      // If it doesn't have a slash, it's not a valid MIME type format
+      if (!mimeType.includes("/")) {
+        mimeType = null;
+      } else {
+        // Normalize: lowercase the type part but keep structure
+        // e.g., "IMAGE/JPEG" -> "image/jpeg", "Image/Jpeg" -> "image/jpeg"
+        var parts = mimeType.split("/");
+        if (parts.length === 2) {
+          mimeType = "".concat(parts[0].toLowerCase(), "/").concat(parts[1].toLowerCase());
+        }
+      }
+    }
+
+    // If MIME type is missing or invalid, detect from filename
+    if (!mimeType) {
+      mimeType = getMimeTypeFromFileName(fileName);
+    }
+
+    // Final validation - ensure MIME type is properly formatted
+    if (!mimeType || !mimeType.includes("/")) {
+      mimeType = "application/octet-stream";
+    }
+    console.log("mimeType", {
+      uri: uri,
+      name: fileName,
+      type: mimeType
+    });
     return {
       uri: uri,
       name: fileName,

package/dist/esm/native/ImagesSkeleton.native.js

@@ -1,24 +1,32 @@
 import React from "react";
-import { View, StyleSheet, Dimensions, ActivityIndicator } from "react-native";
+import { View, StyleSheet, Dimensions, ActivityIndicator, FlatList } from "react-native";
 import { jsx as _jsx } from "react/jsx-runtime";
 var _Dimensions$get = Dimensions.get("window"),
   SCREEN_WIDTH = _Dimensions$get.width;
 var NUM_COLUMNS = 3;
 var ITEM_MARGIN = 4; // Match MediaGallery margin
-// Calculate item size accounting for:
+// Calculate item size - must match MediaGallery exactly
 // - Container padding (md = 12px on each side = 24px total)
 // - Grid padding (2px on each side = 4px total)
-// - Item margins between items (4px * 2 gaps = 8px total)
-var CONTAINER_PADDING = 20; // paddingHorizontal md (12 * 2)
+// - Item margins: (NUM_COLUMNS - 1) gaps between items
+//   Each gap = 2 * ITEM_MARGIN (left margin of right item + right margin of left item)
+//   Total: (3 - 1) * 2 * 4 = 16px
+var CONTAINER_PADDING = 14; // paddingHorizontal md (12 * 2)
 var GRID_PADDING = 4; // padding 2 on each side (2 * 2)
-var TOTAL_MARGINS = ITEM_MARGIN * (NUM_COLUMNS - 1) * 2; // margins between items (4px * 2 gaps = 8px)
+var TOTAL_MARGINS = ITEM_MARGIN * (NUM_COLUMNS - 1) * 2; // 4 * 2 * 2 = 16px
 var ITEM_SIZE = (SCREEN_WIDTH - CONTAINER_PADDING - GRID_PADDING - TOTAL_MARGINS) / NUM_COLUMNS;
 var ImagesSkeleton = function ImagesSkeleton(_ref) {
   var _ref$per_page = _ref.per_page,
-    per_page = _ref$per_page === void 0 ? 30 : _ref$per_page;
-  var skeletonItems = [];
-  for (var i = 0; i < per_page; i++) {
-    skeletonItems.push(/*#__PURE__*/_jsx(View, {
+    per_page = _ref$per_page === void 0 ? 20 : _ref$per_page;
+  var skeletonData = Array.from({
+    length: per_page
+  }, function (_, i) {
+    return {
+      id: i
+    };
+  });
+  var renderItem = function renderItem() {
+    return /*#__PURE__*/_jsx(View, {
       style: [styles.skeletonItem, {
         width: ITEM_SIZE,
         height: ITEM_SIZE,
@@ -28,17 +36,21 @@ var ImagesSkeleton = function ImagesSkeleton(_ref) {
         size: "small",
         color: "#3B3269"
       })
-    }, i));
-  }
-  return /*#__PURE__*/_jsx(View, {
-    style: styles.container,
-    children: skeletonItems
+    });
+  };
+  return /*#__PURE__*/_jsx(FlatList, {
+    data: skeletonData,
+    renderItem: renderItem,
+    keyExtractor: function keyExtractor(item) {
+      return "skeleton-".concat(item.id);
+    },
+    numColumns: NUM_COLUMNS,
+    contentContainerStyle: styles.grid,
+    showsVerticalScrollIndicator: false
   });
 };
 var styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    flexWrap: "wrap",
+  grid: {
     padding: 2 // Match MediaGallery grid padding
   },
   skeletonItem: {

package/dist/native/FileUpload.native.js

@@ -158,24 +158,109 @@ var FileUpload = function FileUpload(_ref) {
     }
 
     // Extract MIME type (handle different property names)
-    // Use a helper function to determine MIME type from filename if needed
-    var getMimeType = function getMimeType(name, fallbackType) {
+    // Use a comprehensive helper function to determine MIME type from filename
+    var getMimeTypeFromFileName = function getMimeTypeFromFileName(name) {
       var _name$split$pop;
-      if (fallbackType) return fallbackType;
-      var ext = (_name$split$pop = name.split(".").pop()) === null || _name$split$pop === void 0 ? void 0 : _name$split$pop.toLowerCase();
+      if (!name) return "application/octet-stream";
+      var ext = (_name$split$pop = name.split(".").pop()) === null || _name$split$pop === void 0 ? void 0 : _name$split$pop.toLowerCase().trim();
+      if (!ext) return "application/octet-stream";
+
+      // Comprehensive MIME type mapping
       var mimeMap = {
+        // Images
         jpg: "image/jpeg",
         jpeg: "image/jpeg",
         png: "image/png",
         gif: "image/gif",
         webp: "image/webp",
+        svg: "image/svg+xml",
+        bmp: "image/bmp",
+        ico: "image/x-icon",
+        heic: "image/heic",
+        heif: "image/heif",
+        tiff: "image/tiff",
+        tif: "image/tiff",
+        jfif: "image/jpeg",
+        avif: "image/avif",
+        // Videos
         mp4: "video/mp4",
         mov: "video/quicktime",
-        mp3: "audio/mpeg"
+        avi: "video/x-msvideo",
+        wmv: "video/x-ms-wmv",
+        flv: "video/x-flv",
+        mkv: "video/x-matroska",
+        webm: "video/webm",
+        mpeg: "video/mpeg",
+        mpg: "video/mpeg",
+        m4v: "video/x-m4v",
+        "3gp": "video/3gpp",
+        // Audio
+        mp3: "audio/mpeg",
+        wav: "audio/wav",
+        ogg: "audio/ogg",
+        m4a: "audio/mp4",
+        aac: "audio/aac",
+        flac: "audio/flac",
+        // Documents
+        pdf: "application/pdf",
+        doc: "application/msword",
+        docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+        xls: "application/vnd.ms-excel",
+        xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        ppt: "application/vnd.ms-powerpoint",
+        pptx: "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+        // Archives
+        zip: "application/zip",
+        rar: "application/rar",
+        "7z": "application/x-7z-compressed",
+        tar: "application/x-tar",
+        gz: "application/gzip",
+        // Text
+        txt: "text/plain",
+        html: "text/html",
+        htm: "text/html",
+        css: "text/css",
+        js: "text/javascript",
+        json: "application/json",
+        xml: "text/xml",
+        php: "application/x-php"
       };
-      return mimeMap[ext] || "image/jpeg";
+      return mimeMap[ext] || "application/octet-stream";
     };
-    var mimeType = pickerResult.mimeType || pickerResult.type || getMimeType(fileName, null);
+
+    // Get MIME type - prioritize picker result, then filename, then default
+    var mimeType = pickerResult.mimeType || pickerResult.type;
+
+    // Clean up MIME type if it exists but is malformed
+    if (mimeType) {
+      mimeType = mimeType.trim();
+      // If it doesn't have a slash, it's not a valid MIME type format
+      if (!mimeType.includes("/")) {
+        mimeType = null;
+      } else {
+        // Normalize: lowercase the type part but keep structure
+        // e.g., "IMAGE/JPEG" -> "image/jpeg", "Image/Jpeg" -> "image/jpeg"
+        var parts = mimeType.split("/");
+        if (parts.length === 2) {
+          mimeType = "".concat(parts[0].toLowerCase(), "/").concat(parts[1].toLowerCase());
+        }
+      }
+    }
+
+    // If MIME type is missing or invalid, detect from filename
+    if (!mimeType) {
+      mimeType = getMimeTypeFromFileName(fileName);
+    }
+
+    // Final validation - ensure MIME type is properly formatted
+    if (!mimeType || !mimeType.includes("/")) {
+      mimeType = "application/octet-stream";
+    }
+    console.log("mimeType", {
+      uri: uri,
+      name: fileName,
+      type: mimeType
+    });
     return {
       uri: uri,
       name: fileName,

package/dist/native/ImagesSkeleton.native.js

@@ -12,20 +12,28 @@ var _Dimensions$get = _reactNative.Dimensions.get("window"),
   SCREEN_WIDTH = _Dimensions$get.width;
 var NUM_COLUMNS = 3;
 var ITEM_MARGIN = 4; // Match MediaGallery margin
-// Calculate item size accounting for:
+// Calculate item size - must match MediaGallery exactly
 // - Container padding (md = 12px on each side = 24px total)
 // - Grid padding (2px on each side = 4px total)
-// - Item margins between items (4px * 2 gaps = 8px total)
-var CONTAINER_PADDING = 20; // paddingHorizontal md (12 * 2)
+// - Item margins: (NUM_COLUMNS - 1) gaps between items
+//   Each gap = 2 * ITEM_MARGIN (left margin of right item + right margin of left item)
+//   Total: (3 - 1) * 2 * 4 = 16px
+var CONTAINER_PADDING = 14; // paddingHorizontal md (12 * 2)
 var GRID_PADDING = 4; // padding 2 on each side (2 * 2)
-var TOTAL_MARGINS = ITEM_MARGIN * (NUM_COLUMNS - 1) * 2; // margins between items (4px * 2 gaps = 8px)
+var TOTAL_MARGINS = ITEM_MARGIN * (NUM_COLUMNS - 1) * 2; // 4 * 2 * 2 = 16px
 var ITEM_SIZE = (SCREEN_WIDTH - CONTAINER_PADDING - GRID_PADDING - TOTAL_MARGINS) / NUM_COLUMNS;
 var ImagesSkeleton = function ImagesSkeleton(_ref) {
   var _ref$per_page = _ref.per_page,
-    per_page = _ref$per_page === void 0 ? 30 : _ref$per_page;
-  var skeletonItems = [];
-  for (var i = 0; i < per_page; i++) {
-    skeletonItems.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    per_page = _ref$per_page === void 0 ? 20 : _ref$per_page;
+  var skeletonData = Array.from({
+    length: per_page
+  }, function (_, i) {
+    return {
+      id: i
+    };
+  });
+  var renderItem = function renderItem() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [styles.skeletonItem, {
         width: ITEM_SIZE,
         height: ITEM_SIZE,
@@ -35,17 +43,21 @@ var ImagesSkeleton = function ImagesSkeleton(_ref) {
         size: "small",
         color: "#3B3269"
       })
-    }, i));
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: styles.container,
-    children: skeletonItems
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+    data: skeletonData,
+    renderItem: renderItem,
+    keyExtractor: function keyExtractor(item) {
+      return "skeleton-".concat(item.id);
+    },
+    numColumns: NUM_COLUMNS,
+    contentContainerStyle: styles.grid,
+    showsVerticalScrollIndicator: false
   });
 };
 var styles = _reactNative.StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    flexWrap: "wrap",
+  grid: {
     padding: 2 // Match MediaGallery grid padding
   },
   skeletonItem: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@tradly/asset",
-    "version": "1.0.24",
+    "version": "1.0.26",
     "description": "A reusable media gallery component for uploading and selecting images, videos, and files with Tradly authentication",
     "main": "dist/index.js",
     "module": "dist/esm/index.js",