sprintify-ui 0.11.27 → 0.11.28

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.11.27",
+  "version": "0.11.28",
   "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 { base64ToBlob, blobToBase64, resizeImageFromURI } 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,137 @@ 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 source = await blobToBase64(file);
+    const dimensions = await getImageDimensions(source);
+
+    const resizeRatio = Math.sqrt(props.maxImageSizeBeforeResize / file.size);
+
+    let targetWidth = Math.max(1, Math.floor(dimensions.width * resizeRatio));
+    let targetHeight = Math.max(1, Math.floor(dimensions.height * resizeRatio));
+
+    let resizedBlob = await createResizedBlob(
+      source,
+      targetHeight,
+      targetWidth,
+      file.type
+    );
+
+    let attempts = 0;
+
+    while (
+      resizedBlob.size > props.maxImageSizeBeforeResize &&
+      attempts < 5 &&
+      targetWidth > 1 &&
+      targetHeight > 1
+    ) {
+      targetWidth = Math.max(1, Math.floor(targetWidth * 0.8));
+      targetHeight = Math.max(1, Math.floor(targetHeight * 0.8));
+      resizedBlob = await createResizedBlob(
+        source,
+        targetHeight,
+        targetWidth,
+        file.type
+      );
+      attempts++;
+    }
+
+    if (resizedBlob.size >= file.size) {
+      return file;
+    }
+
+    return new File(
+      [resizedBlob],
+      getResizedFileName(file.name, resizedBlob.type),
+      {
+        type: resizedBlob.type || file.type,
+        lastModified: file.lastModified,
+      }
+    );
+  } catch (error) {
+    console.error(error);
+    return file;
+  }
+}
+
+async function createResizedBlob(
+  source: string,
+  height: number,
+  width: number,
+  mimeType: string
+): Promise<Blob> {
+  const resizedSource = await resizeImageFromURI(source, height, width);
+  return await base64ToBlob(resizedSource, `data:${mimeType}`);
+}
+
+async function getImageDimensions(
+  source: string
+): Promise<{ width: number; height: number }> {
+  return await new Promise((resolve, reject) => {
+    const image = new Image();
+    image.onload = () => {
+      resolve({
+        width: image.width,
+        height: image.height,
+      });
+    };
+    image.onerror = () => {
+      reject(new Error('Failed to load image dimensions'));
+    };
+    image.src = source;
+  });
+}
+
+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"