@tradly/asset 1.0.7 → 1.0.9

package/dist/components/FileUpload.js

@@ -19,14 +19,20 @@ 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; } // 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 ? 1600 : _ref$maxWidth,
+    maxWidth = _ref$maxWidth === void 0 ? 1300 : _ref$maxWidth,
     _ref$maxHeight = _ref.maxHeight,
-    maxHeight = _ref$maxHeight === void 0 ? 1600 : _ref$maxHeight,
+    maxHeight = _ref$maxHeight === void 0 ? 1300 : _ref$maxHeight,
     _ref$quality = _ref.quality,
-    quality = _ref$quality === void 0 ? 0.85 : _ref$quality;
+    quality = _ref$quality === void 0 ? 0.85 : _ref$quality,
+    _ref$convertPngToJpeg = _ref.convertPngToJpeg,
+    convertPngToJpeg = _ref$convertPngToJpeg === void 0 ? false : _ref$convertPngToJpeg;
+  console.log("compressImage", file, maxWidth, maxHeight, quality, 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") {
@@ -55,17 +61,20 @@ var compressImage = function compressImage(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: file.type,
+          type: targetType,
           lastModified: Date.now()
         });
         resolve(compressedFile);
-      }, file.type, quality);
+      }, targetType, quality);
     };
     img.onerror = function () {
       resolve(file);
@@ -128,8 +137,8 @@ var FileUpload = function FileUpload(_ref2) {
             _context.n = 2;
             return Promise.all(fileList.map(function (file) {
               return compressImage(file, {
-                maxWidth: 1600,
-                maxHeight: 1600,
+                maxWidth: 1300,
+                maxHeight: 1300,
                 quality: 0.85
               });
             }));

package/dist/esm/components/FileUpload.js

@@ -12,15 +12,21 @@ 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 compressImage = function compressImage(file) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
     _ref$maxWidth = _ref.maxWidth,
-    maxWidth = _ref$maxWidth === void 0 ? 1600 : _ref$maxWidth,
+    maxWidth = _ref$maxWidth === void 0 ? 1300 : _ref$maxWidth,
     _ref$maxHeight = _ref.maxHeight,
-    maxHeight = _ref$maxHeight === void 0 ? 1600 : _ref$maxHeight,
+    maxHeight = _ref$maxHeight === void 0 ? 1300 : _ref$maxHeight,
     _ref$quality = _ref.quality,
-    quality = _ref$quality === void 0 ? 0.85 : _ref$quality;
+    quality = _ref$quality === void 0 ? 0.85 : _ref$quality,
+    _ref$convertPngToJpeg = _ref.convertPngToJpeg,
+    convertPngToJpeg = _ref$convertPngToJpeg === void 0 ? false : _ref$convertPngToJpeg;
+  console.log("compressImage", file, maxWidth, maxHeight, quality, 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") {
@@ -49,17 +55,20 @@ var compressImage = function compressImage(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: file.type,
+          type: targetType,
           lastModified: Date.now()
         });
         resolve(compressedFile);
-      }, file.type, quality);
+      }, targetType, quality);
     };
     img.onerror = function () {
       resolve(file);
@@ -122,8 +131,8 @@ var FileUpload = function FileUpload(_ref2) {
             _context.n = 2;
             return Promise.all(fileList.map(function (file) {
               return compressImage(file, {
-                maxWidth: 1600,
-                maxHeight: 1600,
+                maxWidth: 1300,
+                maxHeight: 1300,
                 quality: 0.85
               });
             }));

package/package.json

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