@tradly/asset 1.0.6 → 1.0.8

package/dist/components/FileUpload.js

@@ -18,20 +18,90 @@ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructur
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-var FileUpload = function FileUpload(_ref) {
-  var loadMedia = _ref.loadMedia,
-    accept = _ref.accept,
-    title = _ref.title,
-    apiService = _ref.apiService,
-    onUploadStart = _ref.onUploadStart,
-    onUploadComplete = _ref.onUploadComplete,
-    onUploadError = _ref.onUploadError,
-    className = _ref.className,
-    buttonClassName = _ref.buttonClassName,
-    iconContainerClassName = _ref.iconContainerClassName,
-    titleClassName = _ref.titleClassName,
-    loadingClassName = _ref.loadingClassName;
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } // Helper: compress image on the client before upload
+// - Downscale to fit within maxWidth/maxHeight.
+// - Convert PNG to JPEG by default so quality applies (PNG ignores quality).
+// - Skip SVG (vector) to avoid degradation.
+var compressImage = function compressImage(file) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref$maxWidth = _ref.maxWidth,
+    maxWidth = _ref$maxWidth === void 0 ? 1300 : _ref$maxWidth,
+    _ref$maxHeight = _ref.maxHeight,
+    maxHeight = _ref$maxHeight === void 0 ? 1300 : _ref$maxHeight,
+    _ref$quality = _ref.quality,
+    quality = _ref$quality === void 0 ? 0.85 : _ref$quality,
+    _ref$convertPngToJpeg = _ref.convertPngToJpeg,
+    convertPngToJpeg = _ref$convertPngToJpeg === void 0 ? false : _ref$convertPngToJpeg;
+  return new Promise(function (resolve) {
+    // Non-image or SVG: skip compression to avoid losing vector quality
+    if (!file.type.startsWith("image/") || file.type === "image/svg+xml") {
+      resolve(file);
+      return;
+    }
+    var img = new Image();
+    img.onload = function () {
+      var width = img.width,
+        height = img.height;
+
+      // If the image is already small, keep it as-is
+      if (width <= maxWidth && height <= maxHeight) {
+        resolve(file);
+        return;
+      }
+      var scale = Math.min(maxWidth / width, maxHeight / height);
+      var targetWidth = Math.round(width * scale);
+      var targetHeight = Math.round(height * scale);
+      var canvas = document.createElement("canvas");
+      canvas.width = targetWidth;
+      canvas.height = targetHeight;
+      var ctx = canvas.getContext("2d");
+      if (!ctx) {
+        resolve(file);
+        return;
+      }
+      ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
+
+      // Use JPEG for PNG to allow lossy compression (optional)
+      var targetType = file.type === "image/png" && convertPngToJpeg ? "image/jpeg" : file.type;
+      canvas.toBlob(function (blob) {
+        if (!blob) {
+          resolve(file);
+          return;
+        }
+        var compressedFile = new File([blob], file.name, {
+          type: targetType,
+          lastModified: Date.now()
+        });
+        resolve(compressedFile);
+      }, targetType, quality);
+    };
+    img.onerror = function () {
+      resolve(file);
+    };
+    var reader = new FileReader();
+    reader.onload = function (event) {
+      var _event$target;
+      img.src = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.result;
+    };
+    reader.onerror = function () {
+      return resolve(file);
+    };
+    reader.readAsDataURL(file);
+  });
+};
+var FileUpload = function FileUpload(_ref2) {
+  var loadMedia = _ref2.loadMedia,
+    accept = _ref2.accept,
+    title = _ref2.title,
+    apiService = _ref2.apiService,
+    onUploadStart = _ref2.onUploadStart,
+    onUploadComplete = _ref2.onUploadComplete,
+    onUploadError = _ref2.onUploadError,
+    className = _ref2.className,
+    buttonClassName = _ref2.buttonClassName,
+    iconContainerClassName = _ref2.iconContainerClassName,
+    titleClassName = _ref2.titleClassName,
+    loadingClassName = _ref2.loadingClassName;
   var _useState = (0, _react.useState)([]),
     _useState2 = _slicedToArray(_useState, 2),
     files = _useState2[0],
@@ -47,8 +117,8 @@ var FileUpload = function FileUpload(_ref) {
 
   // Upload files
   var uploadFiles = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(fileList) {
-      var uploadedUrls, _t;
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(fileList) {
+      var filesToUpload, uploadedUrls, _t;
       return _regenerator().w(function (_context) {
         while (1) switch (_context.p = _context.n) {
           case 0:
@@ -58,9 +128,25 @@ var FileUpload = function FileUpload(_ref) {
             setISLoading(true);
             setLength(fileList.length);
             _context.p = 1;
+            filesToUpload = fileList; // For image uploads, compress on the client before sending
+            if (!(accept && accept.includes("image"))) {
+              _context.n = 3;
+              break;
+            }
             _context.n = 2;
-            return apiService.uploadMedia(fileList, apiService.authKey);
+            return Promise.all(fileList.map(function (file) {
+              return compressImage(file, {
+                maxWidth: 1600,
+                maxHeight: 1600,
+                quality: 0.85
+              });
+            }));
           case 2:
+            filesToUpload = _context.v;
+          case 3:
+            _context.n = 4;
+            return apiService.uploadMedia(filesToUpload, apiService.authKey);
+          case 4:
             uploadedUrls = _context.v;
             if (onUploadComplete) {
               onUploadComplete(uploadedUrls);
@@ -69,35 +155,35 @@ var FileUpload = function FileUpload(_ref) {
             if (loadMedia) {
               loadMedia();
             }
-            _context.n = 4;
+            _context.n = 6;
             break;
-          case 3:
-            _context.p = 3;
+          case 5:
+            _context.p = 5;
             _t = _context.v;
-            console.error('Upload error:', _t);
+            console.error("Upload error:", _t);
             if (onUploadError) {
               onUploadError(_t);
             }
-          case 4:
-            _context.p = 4;
+          case 6:
+            _context.p = 6;
             setISLoading(false);
-            return _context.f(4);
-          case 5:
+            return _context.f(6);
+          case 7:
             return _context.a(2);
         }
-      }, _callee, null, [[1, 3, 4, 5]]);
+      }, _callee, null, [[1, 5, 6, 7]]);
     }));
     return function uploadFiles(_x) {
-      return _ref2.apply(this, arguments);
+      return _ref3.apply(this, arguments);
     };
   }();
 
   // Default classes with customization support
-  var defaultContainerClass = 'min-w-40 h-40';
-  var defaultButtonClass = 'w-full h-full flex flex-col justify-center items-center text-sm border border-primary border-dashed rounded-lg hover:bg-gray-50 transition-colors';
-  var defaultIconContainerClass = 'p-[10px] bg-primary rounded-full';
-  var defaultTitleClass = 'mt-2';
-  var defaultLoadingClass = 'flex items-center justify-center h-40 bg-gray-200 rounded-lg shadow-md animate-pulse';
+  var defaultContainerClass = "min-w-40 h-40";
+  var defaultButtonClass = "w-full h-full flex flex-col justify-center items-center text-sm border border-primary border-dashed rounded-lg hover:bg-gray-50 transition-colors";
+  var defaultIconContainerClass = "p-[10px] bg-primary rounded-full";
+  var defaultTitleClass = "mt-2";
+  var defaultLoadingClass = "flex items-center justify-center h-40 bg-gray-200 rounded-lg shadow-md animate-pulse";
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: className || defaultContainerClass,
@@ -109,13 +195,13 @@ var FileUpload = function FileUpload(_ref) {
         accept: accept,
         placeholder: "",
         onChange: (/*#__PURE__*/function () {
-          var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(e) {
+          var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(e) {
             var all_files;
             return _regenerator().w(function (_context2) {
               while (1) switch (_context2.n) {
                 case 0:
                   e.stopPropagation();
-                  all_files = Array.from(e.target.files);
+                  all_files = Array.from(e.target.files || []);
                   if (!((all_files === null || all_files === void 0 ? void 0 : all_files.length) > 0)) {
                     _context2.n = 1;
                     break;
@@ -124,14 +210,14 @@ var FileUpload = function FileUpload(_ref) {
                   return uploadFiles(all_files);
                 case 1:
                   // Reset input
-                  e.target.value = '';
+                  e.target.value = "";
                 case 2:
                   return _context2.a(2);
               }
             }, _callee2);
           }));
           return function (_x2) {
-            return _ref3.apply(this, arguments);
+            return _ref4.apply(this, arguments);
           };
         }()),
         multiple: true

package/dist/esm/components/FileUpload.js

@@ -8,22 +8,94 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-import React, { useState } from 'react';
-import { CameraIcon } from './Icons';
+import React, { useState } from "react";
+import { CameraIcon } from "./Icons";
+
+// Helper: compress image on the client before upload
+// - Downscale to fit within maxWidth/maxHeight.
+// - Convert PNG to JPEG by default so quality applies (PNG ignores quality).
+// - Skip SVG (vector) to avoid degradation.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-var FileUpload = function FileUpload(_ref) {
-  var loadMedia = _ref.loadMedia,
-    accept = _ref.accept,
-    title = _ref.title,
-    apiService = _ref.apiService,
-    onUploadStart = _ref.onUploadStart,
-    onUploadComplete = _ref.onUploadComplete,
-    onUploadError = _ref.onUploadError,
-    className = _ref.className,
-    buttonClassName = _ref.buttonClassName,
-    iconContainerClassName = _ref.iconContainerClassName,
-    titleClassName = _ref.titleClassName,
-    loadingClassName = _ref.loadingClassName;
+var compressImage = function compressImage(file) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref$maxWidth = _ref.maxWidth,
+    maxWidth = _ref$maxWidth === void 0 ? 1300 : _ref$maxWidth,
+    _ref$maxHeight = _ref.maxHeight,
+    maxHeight = _ref$maxHeight === void 0 ? 1300 : _ref$maxHeight,
+    _ref$quality = _ref.quality,
+    quality = _ref$quality === void 0 ? 0.85 : _ref$quality,
+    _ref$convertPngToJpeg = _ref.convertPngToJpeg,
+    convertPngToJpeg = _ref$convertPngToJpeg === void 0 ? false : _ref$convertPngToJpeg;
+  return new Promise(function (resolve) {
+    // Non-image or SVG: skip compression to avoid losing vector quality
+    if (!file.type.startsWith("image/") || file.type === "image/svg+xml") {
+      resolve(file);
+      return;
+    }
+    var img = new Image();
+    img.onload = function () {
+      var width = img.width,
+        height = img.height;
+
+      // If the image is already small, keep it as-is
+      if (width <= maxWidth && height <= maxHeight) {
+        resolve(file);
+        return;
+      }
+      var scale = Math.min(maxWidth / width, maxHeight / height);
+      var targetWidth = Math.round(width * scale);
+      var targetHeight = Math.round(height * scale);
+      var canvas = document.createElement("canvas");
+      canvas.width = targetWidth;
+      canvas.height = targetHeight;
+      var ctx = canvas.getContext("2d");
+      if (!ctx) {
+        resolve(file);
+        return;
+      }
+      ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
+
+      // Use JPEG for PNG to allow lossy compression (optional)
+      var targetType = file.type === "image/png" && convertPngToJpeg ? "image/jpeg" : file.type;
+      canvas.toBlob(function (blob) {
+        if (!blob) {
+          resolve(file);
+          return;
+        }
+        var compressedFile = new File([blob], file.name, {
+          type: targetType,
+          lastModified: Date.now()
+        });
+        resolve(compressedFile);
+      }, targetType, quality);
+    };
+    img.onerror = function () {
+      resolve(file);
+    };
+    var reader = new FileReader();
+    reader.onload = function (event) {
+      var _event$target;
+      img.src = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.result;
+    };
+    reader.onerror = function () {
+      return resolve(file);
+    };
+    reader.readAsDataURL(file);
+  });
+};
+var FileUpload = function FileUpload(_ref2) {
+  var loadMedia = _ref2.loadMedia,
+    accept = _ref2.accept,
+    title = _ref2.title,
+    apiService = _ref2.apiService,
+    onUploadStart = _ref2.onUploadStart,
+    onUploadComplete = _ref2.onUploadComplete,
+    onUploadError = _ref2.onUploadError,
+    className = _ref2.className,
+    buttonClassName = _ref2.buttonClassName,
+    iconContainerClassName = _ref2.iconContainerClassName,
+    titleClassName = _ref2.titleClassName,
+    loadingClassName = _ref2.loadingClassName;
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     files = _useState2[0],
@@ -39,8 +111,8 @@ var FileUpload = function FileUpload(_ref) {
 
   // Upload files
   var uploadFiles = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(fileList) {
-      var uploadedUrls, _t;
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(fileList) {
+      var filesToUpload, uploadedUrls, _t;
       return _regenerator().w(function (_context) {
         while (1) switch (_context.p = _context.n) {
           case 0:
@@ -50,9 +122,25 @@ var FileUpload = function FileUpload(_ref) {
             setISLoading(true);
             setLength(fileList.length);
             _context.p = 1;
+            filesToUpload = fileList; // For image uploads, compress on the client before sending
+            if (!(accept && accept.includes("image"))) {
+              _context.n = 3;
+              break;
+            }
             _context.n = 2;
-            return apiService.uploadMedia(fileList, apiService.authKey);
+            return Promise.all(fileList.map(function (file) {
+              return compressImage(file, {
+                maxWidth: 1600,
+                maxHeight: 1600,
+                quality: 0.85
+              });
+            }));
           case 2:
+            filesToUpload = _context.v;
+          case 3:
+            _context.n = 4;
+            return apiService.uploadMedia(filesToUpload, apiService.authKey);
+          case 4:
             uploadedUrls = _context.v;
             if (onUploadComplete) {
               onUploadComplete(uploadedUrls);
@@ -61,35 +149,35 @@ var FileUpload = function FileUpload(_ref) {
             if (loadMedia) {
               loadMedia();
             }
-            _context.n = 4;
+            _context.n = 6;
             break;
-          case 3:
-            _context.p = 3;
+          case 5:
+            _context.p = 5;
             _t = _context.v;
-            console.error('Upload error:', _t);
+            console.error("Upload error:", _t);
             if (onUploadError) {
               onUploadError(_t);
             }
-          case 4:
-            _context.p = 4;
+          case 6:
+            _context.p = 6;
             setISLoading(false);
-            return _context.f(4);
-          case 5:
+            return _context.f(6);
+          case 7:
             return _context.a(2);
         }
-      }, _callee, null, [[1, 3, 4, 5]]);
+      }, _callee, null, [[1, 5, 6, 7]]);
     }));
     return function uploadFiles(_x) {
-      return _ref2.apply(this, arguments);
+      return _ref3.apply(this, arguments);
     };
   }();
 
   // Default classes with customization support
-  var defaultContainerClass = 'min-w-40 h-40';
-  var defaultButtonClass = 'w-full h-full flex flex-col justify-center items-center text-sm border border-primary border-dashed rounded-lg hover:bg-gray-50 transition-colors';
-  var defaultIconContainerClass = 'p-[10px] bg-primary rounded-full';
-  var defaultTitleClass = 'mt-2';
-  var defaultLoadingClass = 'flex items-center justify-center h-40 bg-gray-200 rounded-lg shadow-md animate-pulse';
+  var defaultContainerClass = "min-w-40 h-40";
+  var defaultButtonClass = "w-full h-full flex flex-col justify-center items-center text-sm border border-primary border-dashed rounded-lg hover:bg-gray-50 transition-colors";
+  var defaultIconContainerClass = "p-[10px] bg-primary rounded-full";
+  var defaultTitleClass = "mt-2";
+  var defaultLoadingClass = "flex items-center justify-center h-40 bg-gray-200 rounded-lg shadow-md animate-pulse";
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs("div", {
       className: className || defaultContainerClass,
@@ -101,13 +189,13 @@ var FileUpload = function FileUpload(_ref) {
         accept: accept,
         placeholder: "",
         onChange: (/*#__PURE__*/function () {
-          var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(e) {
+          var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(e) {
             var all_files;
             return _regenerator().w(function (_context2) {
               while (1) switch (_context2.n) {
                 case 0:
                   e.stopPropagation();
-                  all_files = Array.from(e.target.files);
+                  all_files = Array.from(e.target.files || []);
                   if (!((all_files === null || all_files === void 0 ? void 0 : all_files.length) > 0)) {
                     _context2.n = 1;
                     break;
@@ -116,14 +204,14 @@ var FileUpload = function FileUpload(_ref) {
                   return uploadFiles(all_files);
                 case 1:
                   // Reset input
-                  e.target.value = '';
+                  e.target.value = "";
                 case 2:
                   return _context2.a(2);
               }
             }, _callee2);
           }));
           return function (_x2) {
-            return _ref3.apply(this, arguments);
+            return _ref4.apply(this, arguments);
           };
         }()),
         multiple: true

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@tradly/asset",
-    "version": "1.0.6",
+    "version": "1.0.8",
     "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",