sprintify-ui 0.11.27 → 0.11.29

package/dist/types/components/BaseFileUploader.vue.d.ts

@@ -7,6 +7,7 @@ type __VLS_Props = {
     beforeUpload?: () => boolean;
     twButton?: string;
     maxSize?: number;
+    maxImageSizeBeforeResize?: number;
     accept?: string;
     acceptedExtensions?: string[];
     cropper?: BaseCropperConfig | Record<string, any> | boolean | null;
@@ -64,6 +65,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     accept: string;
     acceptedExtensions: string[];
     beforeUpload: () => boolean;
+    maxImageSizeBeforeResize: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/types/components/BaseMediaLibrary.vue.d.ts

@@ -52,6 +52,10 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         default: number;
         type: NumberConstructor;
     };
+    maxImageSizeBeforeResize: {
+        default: undefined;
+        type: NumberConstructor;
+    };
     accept: {
         default: undefined;
         type: StringConstructor;
@@ -127,6 +131,10 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         default: number;
         type: NumberConstructor;
     };
+    maxImageSizeBeforeResize: {
+        default: undefined;
+        type: NumberConstructor;
+    };
     accept: {
         default: undefined;
         type: StringConstructor;
@@ -195,6 +203,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     maxSize: number;
     accept: string;
     acceptedExtensions: string[];
+    maxImageSizeBeforeResize: number;
     currentMedia: Media[];
     uploadUrl: string;
     pickerComponent: "BaseFilePicker" | "BaseFilePickerCrop";

package/dist/types/utils/index.d.ts

@@ -1,8 +1,9 @@
 import toHumanList from './toHumanList';
 import fileSizeFormat from './fileSizeFormat';
 import resizeImageFromURI from './resizeImageFromURI';
+import resizeImageForUpload from './resizeImageForUpload';
 import { disableScroll, enableScroll } from './scrollPreventer';
 import { blobToBase64, validateBase64, base64ToBlob } from './blob';
 import { getColorConfig } from './colors';
 import { getInitials, getAvatarColor } from './avatar';
-export { toHumanList, fileSizeFormat, disableScroll, enableScroll, resizeImageFromURI, blobToBase64, validateBase64, base64ToBlob, getColorConfig, getInitials, getAvatarColor, };
+export { toHumanList, fileSizeFormat, disableScroll, enableScroll, resizeImageFromURI, resizeImageForUpload, blobToBase64, validateBase64, base64ToBlob, getColorConfig, getInitials, getAvatarColor, };

package/dist/types/utils/resizeImageForUpload.d.ts

@@ -0,0 +1,7 @@
+type ResizeImageForUploadOptions = {
+    maxBytes: number;
+    outputMimeType?: string;
+    quality?: number;
+};
+export default function resizeImageForUpload(file: Blob, options: ResizeImageForUploadOptions): Promise<Blob>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.11.27",
+  "version": "0.11.29",
   "type": "module",
   "scripts": {
     "generate-llm-txt": "node scripts/generate-llm-txt.js",

package/src/components/BaseFileUploader.vue

@@ -35,6 +35,7 @@ import { UploadedFile } from '@/types/UploadedFile';
 import { useSnackbarsStore } from '@/stores/snackbars';
 import BaseLoadingCover from '@/components/BaseLoadingCover.vue';
 import { BaseCropperConfig } from '@/types';
+import { resizeImageForUpload } from '@/utils';
 import BaseFilePicker from './BaseFilePicker.vue';
 import BaseFilePickerCrop from './BaseFilePickerCrop.vue';
 import { t } from '@/i18n';
@@ -51,6 +52,7 @@ const props = withDefaults(
     beforeUpload?: () => boolean;
     twButton?: string;
     maxSize?: number;
+    maxImageSizeBeforeResize?: number;
     accept?: string;
     acceptedExtensions?: string[];
     cropper?: BaseCropperConfig | Record<string, any> | boolean | null;
@@ -66,6 +68,7 @@ const props = withDefaults(
     },
     twButton: '',
     maxSize: undefined,
+    maxImageSizeBeforeResize: undefined,
     accept: undefined,
     acceptedExtensions: undefined,
     cropper: true,
@@ -149,15 +152,16 @@ async function onFileSelect(files: File | File[]) {
 }
 
 async function processFileUpload(file: File): Promise<UploadedFile> {
+  const preparedFile = await processFileBeforeUpload(file);
 
   const formData = new FormData();
 
-  formData.append('file', file);
+  formData.append('file', preparedFile);
 
   const response = await http.post(props.url ?? config.upload_url, formData);
 
   const payload = response.data as UploadedFile;
-  payload.original_file = file;
+  payload.original_file = preparedFile;
 
   // Read file if image, add add data_url to payload
 
@@ -175,11 +179,81 @@ async function processFileUpload(file: File): Promise<UploadedFile> {
     };
 
     if (payload.mime_type.includes('image')) {
-      reader.readAsDataURL(file);
+      reader.readAsDataURL(preparedFile);
     } else {
       resolve(payload);
     }
   });
 }
 
+async function processFileBeforeUpload(file: File): Promise<File> {
+  if (!shouldAutoResize(file)) {
+    return file;
+  }
+
+  return await autoResizeImage(file);
+}
+
+function shouldAutoResize(file: File): boolean {
+  if (!props.maxImageSizeBeforeResize || props.maxImageSizeBeforeResize <= 0) {
+    return false;
+  }
+
+  if (!file.type.includes('image')) {
+    return false;
+  }
+
+  if (['image/gif', 'image/svg+xml'].includes(file.type)) {
+    return false;
+  }
+
+  if (file.size <= props.maxImageSizeBeforeResize) {
+    return false;
+  }
+
+  return true;
+}
+
+async function autoResizeImage(file: File): Promise<File> {
+  if (!props.maxImageSizeBeforeResize) {
+    return file;
+  }
+
+  try {
+    const resizedBlob = await resizeImageForUpload(file, {
+      maxBytes: props.maxImageSizeBeforeResize,
+    });
+
+    if (resizedBlob.size >= file.size) {
+      return file;
+    }
+
+    const mimeType = resizedBlob.type || file.type;
+
+    return new File(
+      [resizedBlob],
+      getResizedFileName(file.name, mimeType),
+      {
+        type: mimeType,
+        lastModified: file.lastModified,
+      }
+    );
+  } catch (error) {
+    console.error(error);
+    return file;
+  }
+}
+
+function getResizedFileName(filename: string, mimeType: string): string {
+  if (mimeType != 'image/jpeg') {
+    return filename;
+  }
+
+  if (filename.includes('.')) {
+    return filename.replace(/\.[^.]+$/, '.jpg');
+  }
+
+  return `${filename}.jpg`;
+}
+
 </script>

package/src/components/BaseMediaLibrary.vue

@@ -3,6 +3,7 @@
     <BaseFileUploader
       :component="pickerComponent"
       :max-size="maxSize"
+      :max-image-size-before-resize="maxImageSizeBeforeResize"
       :disabled="disabledInternal"
       class="w-full"
       tw-button="w-full"
@@ -142,6 +143,10 @@ const props = defineProps({
     default: 20 * 1024 * 1024,
     type: Number,
   },
+  maxImageSizeBeforeResize: {
+    default: undefined,
+    type: Number,
+  },
   accept: {
     default: undefined,
     type: String,

package/src/components/BaseModalSide.vue

@@ -11,7 +11,7 @@
           class="fixed inset-0 z-modal w-full overflow-y-auto overflow-x-hidden"
         >
           <div class="flex min-h-full w-full pt-20 sm:pt-0">
-            <div class="min-h-full grow">
+            <div class="min-h-full overflow-hidden grow">
               <transition
                 appear
                 enter-active-class="duration-200 ease-out"

package/src/utils/index.ts

@@ -1,6 +1,7 @@
 import toHumanList from './toHumanList';
 import fileSizeFormat from './fileSizeFormat';
 import resizeImageFromURI from './resizeImageFromURI';
+import resizeImageForUpload from './resizeImageForUpload';
 import { disableScroll, enableScroll } from './scrollPreventer';
 import { blobToBase64, validateBase64, base64ToBlob } from './blob';
 import { getColorConfig } from './colors';
@@ -12,6 +13,7 @@ export {
   disableScroll,
   enableScroll,
   resizeImageFromURI,
+  resizeImageForUpload,
   blobToBase64,
   validateBase64,
   base64ToBlob,

package/src/utils/resizeImageForUpload.ts

@@ -0,0 +1,181 @@
+type ResizeImageForUploadOptions = {
+  maxBytes: number;
+  outputMimeType?: string;
+  quality?: number;
+};
+
+type DecodedImage = {
+  source: CanvasImageSource;
+  width: number;
+  height: number;
+  cleanup: () => void;
+};
+
+const DEFAULT_OUTPUT_QUALITY = 0.9;
+
+export default async function resizeImageForUpload(
+  file: Blob,
+  options: ResizeImageForUploadOptions
+): Promise<Blob> {
+  if (options.maxBytes <= 0 || file.size <= options.maxBytes) {
+    return file;
+  }
+
+  const decodedImage = await decodeImage(file);
+  const outputMimeType =
+    options.outputMimeType ?? getOutputMimeType((file as File).type);
+  const quality = clamp(options.quality ?? DEFAULT_OUTPUT_QUALITY, 0.1, 1);
+
+  let canvas: HTMLCanvasElement | null = null;
+
+  try {
+    const resizeRatio = Math.min(1, Math.sqrt(options.maxBytes / file.size));
+    const targetWidth = Math.max(1, Math.floor(decodedImage.width * resizeRatio));
+    const targetHeight = Math.max(
+      1,
+      Math.floor(decodedImage.height * resizeRatio)
+    );
+
+    canvas = createScaledCanvas(
+      decodedImage.source,
+      decodedImage.width,
+      decodedImage.height,
+      targetWidth,
+      targetHeight
+    );
+
+    if (!supportsQualityEncoding(outputMimeType)) {
+      return await canvasToBlob(canvas, outputMimeType);
+    }
+
+    return await canvasToBlob(canvas, outputMimeType, quality);
+  } finally {
+    decodedImage.cleanup();
+
+    if (canvas) {
+      releaseCanvas(canvas);
+    }
+  }
+}
+
+function getOutputMimeType(inputMimeType: string): string {
+  if (inputMimeType === 'image/webp') {
+    return 'image/webp';
+  }
+
+  return 'image/jpeg';
+}
+
+async function decodeImage(file: Blob): Promise<DecodedImage> {
+  if (typeof createImageBitmap === 'function') {
+    try {
+      const bitmap = await createImageBitmap(file);
+
+      return {
+        source: bitmap,
+        width: bitmap.width,
+        height: bitmap.height,
+        cleanup: () => bitmap.close(),
+      };
+    } catch {
+      // Fallback to Image decode when createImageBitmap is not supported.
+    }
+  }
+
+  const objectUrl = URL.createObjectURL(file);
+
+  try {
+    const image = await loadImage(objectUrl);
+
+    return {
+      source: image,
+      width: image.naturalWidth || image.width,
+      height: image.naturalHeight || image.height,
+      cleanup: () => URL.revokeObjectURL(objectUrl),
+    };
+  } catch (error) {
+    URL.revokeObjectURL(objectUrl);
+    throw error;
+  }
+}
+
+async function loadImage(src: string): Promise<HTMLImageElement> {
+  const image = new Image();
+  image.decoding = 'async';
+  image.src = src;
+
+  if (typeof image.decode === 'function') {
+    try {
+      await image.decode();
+      return image;
+    } catch {
+      // decode() may reject if called before enough data is available.
+    }
+  }
+
+  return await new Promise((resolve, reject) => {
+    image.onload = () => resolve(image);
+    image.onerror = () => reject(new Error('Failed to decode image'));
+  });
+}
+
+function createScaledCanvas(
+  source: CanvasImageSource,
+  sourceWidth: number,
+  sourceHeight: number,
+  width: number,
+  height: number
+): HTMLCanvasElement {
+  const canvas = document.createElement('canvas');
+  canvas.width = width;
+  canvas.height = height;
+
+  const context = canvas.getContext('2d', {
+    alpha: false,
+    desynchronized: true,
+  });
+
+  if (!context) {
+    throw new Error('Could not acquire context 2d');
+  }
+
+  context.imageSmoothingEnabled = true;
+  context.imageSmoothingQuality = 'high';
+  context.drawImage(source, 0, 0, sourceWidth, sourceHeight, 0, 0, width, height);
+
+  return canvas;
+}
+
+function supportsQualityEncoding(mimeType: string): boolean {
+  return mimeType === 'image/jpeg' || mimeType === 'image/webp';
+}
+
+async function canvasToBlob(
+  canvas: HTMLCanvasElement,
+  mimeType: string,
+  quality?: number
+): Promise<Blob> {
+  return await new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => {
+        if (blob) {
+          resolve(blob);
+          return;
+        }
+
+        reject(new Error('Could not create resized image blob'));
+      },
+      mimeType,
+      quality
+    );
+  });
+}
+
+function releaseCanvas(canvas: HTMLCanvasElement) {
+  canvas.width = 0;
+  canvas.height = 0;
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}