fix: add file size limit validation

packages/nc-gui/components/general/ImageCropper.vue

@@ -15,6 +15,8 @@ interface Props {
   uploadConfig?: {
     path?: string
     scope?: PublicAttachmentScope
+    // filesize in bytes
+    maxFileSize?: number
   }
   showCropper: boolean
 }
@@ -38,12 +40,21 @@ const previewImage = ref({
   src: '',
 })
 
+const fileSize = ref<number>(0)
+
+const isValidFileSize = computed(() => {
+  return !!(fileSize.value && fileSize.value * 1.33 <= (uploadConfig?.maxFileSize || 3 * 1024 * 1024))
+})
+
 const handleCropImage = () => {
   const { canvas } = cropperRef.value.getResult()
   previewImage.value = {
     canvas,
     src: canvas.toDataURL(imageConfig.type),
   }
+  ;(canvas as any).toBlob((blob: Blob) => {
+    fileSize.value = blob.size
+  }, imageConfig.type)
 }
 
 const handleUploadImage = async (fileToUpload: AttachmentReqType[]) => {
@@ -77,18 +88,16 @@ const handleUploadImage = async (fileToUpload: AttachmentReqType[]) => {
 
 const handleSaveImage = async () => {
   if (previewImage.value.canvas) {
-    ;(previewImage.value.canvas as any).toBlob(async (blob: Blob) => {
     await handleUploadImage([
       {
         title: imageConfig.name,
         fileName: imageConfig.name,
         mimetype: imageConfig.type,
-          size: blob.size,
+        size: fileSize.value,
         url: previewImage.value.src,
         data: previewImage.value.src,
       },
     ])
-    }, imageConfig.type)
   }
 }
 
@@ -139,7 +148,13 @@ watch(showCropper, () => {
           <span class="ml-2">Crop</span>
         </NcButton>
 
-        <NcButton size="small" :loading="isLoading" :disabled="!previewImage.src" @click="handleSaveImage"> Save </NcButton>
+        <NcTooltip :disabled="isValidFileSize">
+          <template #title> Cropped file size is greter than max file size </template>
+
+          <NcButton size="small" :loading="isLoading" :disabled="!previewImage.src || !isValidFileSize" @click="handleSaveImage">
+            Save
+          </NcButton>
+        </NcTooltip>
       </div>
     </div>
   </NcModal>

packages/nc-gui/components/general/WorkspaceIconSelector.vue

@@ -106,6 +106,7 @@ const imageCropperData = ref({
   uploadConfig: {
     path: [NOCO, 'workspace', currentWorkspace.value?.id, 'icon'].join('/'),
     scope: PublicAttachmentScope.WORKSPACEPICS,
+    maxFileSize: 2 * 1024 * 1024
   },
 })
 

packages/nocodb/src/services/attachments.service.ts

@@ -289,6 +289,10 @@ export class AttachmentsService {
             size = response.headers['content-length'];
             finalUrl = response.request.res.responseUrl;
           } else {
+            if (urlMeta.size && urlMeta.size * 1.33 > 3 * 1024 * 1024) {
+              NcError.badRequest('Base64 data URL is too large');
+            }
+
             const matches = url.match(/^data:(.+);base64,(.+)$/);
             if (!matches) throw new Error('Invalid data URL format.');