From 96dbfda75164af5be1cdf8138c4de421f74e626a Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 20 Nov 2024 17:11:11 +0000
Subject: [PATCH 01/31] feat(nc-gui): workspace icon selector setup

---
 packages/nc-gui/components/general/WorkspaceIcon.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/general/WorkspaceIcon.vue b/packages/nc-gui/components/general/WorkspaceIcon.vue
index 963078eb3f..59ca01998c 100644
--- a/packages/nc-gui/components/general/WorkspaceIcon.vue
+++ b/packages/nc-gui/components/general/WorkspaceIcon.vue
@@ -5,7 +5,7 @@ import { isColorDark, stringToColor } from '~/utils/colorsUtils'
 const props = defineProps<{
   workspace: WorkspaceType | undefined
   hideLabel?: boolean
-  size?: 'small' | 'medium' | 'large'
+  size?: 'small' | 'medium' | 'large' | 'xlarge'
   isRounded?: boolean
 }>()
 
@@ -25,6 +25,7 @@ const size = computed(() => props.size || 'medium')
       'min-w-4 w-4 h-4 rounded': size === 'small',
       'min-w-6 w-6 h-6 rounded-md': size === 'medium',
       'min-w-10 w-10 h-10 rounded-lg !text-base': size === 'large',
+      'min-w-16 w-16 h-16 rounded-lg !text-2xl': size === 'xlarge',
       '!rounded-[50%]': props.isRounded,
     }"
     :style="{ backgroundColor: workspaceColor }"

From 1318aa1309e82db34dba9c2d4e7ba414ba57b3a7 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 20 Nov 2024 17:11:11 +0000
Subject: [PATCH 02/31] feat(nc-gui): workspace image logo support

---
 packages/nc-gui/components/general/ImageCropper.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/general/ImageCropper.vue b/packages/nc-gui/components/general/ImageCropper.vue
index 81de6d1368..ded4cbdf04 100644
--- a/packages/nc-gui/components/general/ImageCropper.vue
+++ b/packages/nc-gui/components/general/ImageCropper.vue
@@ -95,7 +95,7 @@ watch(showCropper, () => {
 </script>
 
 <template>
-  <NcModal v-model:visible="showCropper" :mask-closable="false">
+  <NcModal v-model:visible="showCropper" :mask-closable="false" wrap-class-name="!z-1050">
     <div class="nc-image-cropper-wrapper relative">
       <Cropper
         ref="cropperRef"

From 4e3f0a90cfab2043f9101075384905a3fb682013 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 20 Nov 2024 17:11:12 +0000
Subject: [PATCH 03/31] feat(nc-gui): emoji support for workspace icon

---
 packages/nc-gui/components/general/EmojiPicker.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/general/EmojiPicker.vue b/packages/nc-gui/components/general/EmojiPicker.vue
index fb006c21d5..e99ba070cd 100644
--- a/packages/nc-gui/components/general/EmojiPicker.vue
+++ b/packages/nc-gui/components/general/EmojiPicker.vue
@@ -117,6 +117,7 @@ const showClearButton = computed(() => {
           :show-preview="false"
           color="#40444D"
           :auto-focus="true"
+          class="nc-emoji-picker"
           @select="selectEmoji"
           @click.stop="() => {}"
         >
@@ -141,7 +142,7 @@ const showClearButton = computed(() => {
     @apply pr-22;
   }
 }
-.emoji-mart {
+.nc-emoji-picker.emoji-mart {
   @apply !w-90;
 
   span.emoji-type-native {

From e245992bb586b7877fa394b11d2e783cd7cbf52a Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 20 Nov 2024 17:11:12 +0000
Subject: [PATCH 04/31] fix(nc-gui): show workspace icon in select workspace
 dropdown

---
 .../components/general/WorkspaceIcon.vue      | 101 +++-
 .../general/WorkspaceIconSelector.vue         | 509 ++++++++++++++++++
 2 files changed, 606 insertions(+), 4 deletions(-)
 create mode 100644 packages/nc-gui/components/general/WorkspaceIconSelector.vue

diff --git a/packages/nc-gui/components/general/WorkspaceIcon.vue b/packages/nc-gui/components/general/WorkspaceIcon.vue
index 59ca01998c..282d38623f 100644
--- a/packages/nc-gui/components/general/WorkspaceIcon.vue
+++ b/packages/nc-gui/components/general/WorkspaceIcon.vue
@@ -1,16 +1,68 @@
 <script lang="ts" setup>
 import type { WorkspaceType } from 'nocodb-sdk'
 import { isColorDark, stringToColor } from '~/utils/colorsUtils'
+import { WorkspaceIconType } from '#imports'
+import 'emoji-mart-vue-fast/css/emoji-mart.css'
+import { Icon } from '@iconify/vue'
 
 const props = defineProps<{
   workspace: WorkspaceType | undefined
+  workspaceIcon?: {
+    icon: string | Record<string, any>
+    iconType: WorkspaceIconType | string
+  }
   hideLabel?: boolean
   size?: 'small' | 'medium' | 'large' | 'xlarge'
   isRounded?: boolean
 }>()
 
+const { workspace } = toRefs(props)
+
+const { getPossibleAttachmentSrc } = useAttachment()
+
+const workspaceIcon = computed(() => {
+  if (!workspace.value) {
+    return {
+      icon: '',
+      iconType: '',
+    }
+  }
+
+  let icon = workspace.value.meta?.icon || ''
+  let iconType = workspace.value.meta?.iconType || ''
+
+  if (props.workspaceIcon) {
+    icon = props.workspaceIcon?.icon || ''
+    iconType = props.workspaceIcon?.iconType || ''
+  }
+
+  return {
+    icon: iconType === WorkspaceIconType.IMAGE && ncIsObject(icon) ? getPossibleAttachmentSrc(icon) || '' : icon,
+    iconType: iconType,
+    isUnicodeEmoji: iconType === WorkspaceIconType.EMOJI && icon ? icon?.match(/\p{Extended_Pictographic}/gu) : false,
+  }
+})
+
 const workspaceColor = computed(() => {
-  const color = props.workspace ? props.workspace.meta?.color || stringToColor(props.workspace.id!) : undefined
+  const color = workspace.value ? workspace.value.meta?.color || stringToColor(workspace.value.id!) : undefined
+
+  if (!props.hideLabel && workspaceIcon.value.icon) {
+    switch (workspaceIcon.value.iconType) {
+      case WorkspaceIconType.IMAGE: {
+        return ''
+      }
+      case WorkspaceIconType.EMOJI: {
+        return '#F4F4F5'
+      }
+      case WorkspaceIconType.ICON: {
+        return '#F4F4F5'
+      }
+
+      default: {
+        return color || '#0A1433'
+      }
+    }
+  }
 
   return color || '#0A1433'
 })
@@ -20,18 +72,59 @@ const size = computed(() => props.size || 'medium')
 
 <template>
   <div
-    class="flex nc-workspace-avatar"
+    class="flex nc-workspace-avatar overflow-hidden"
     :class="{
       'min-w-4 w-4 h-4 rounded': size === 'small',
       'min-w-6 w-6 h-6 rounded-md': size === 'medium',
       'min-w-10 w-10 h-10 rounded-lg !text-base': size === 'large',
-      'min-w-16 w-16 h-16 rounded-lg !text-2xl': size === 'xlarge',
+      'min-w-16 w-16 h-16 rounded-lg !text-4xl': size === 'xlarge',
       '!rounded-[50%]': props.isRounded,
     }"
-    :style="{ backgroundColor: workspaceColor }"
+    :style="{
+      backgroundColor:
+        !props.hideLabel && workspaceIcon.icon && workspaceIcon.iconType === WorkspaceIconType.IMAGE ? undefined : workspaceColor,
+    }"
   >
     <template v-if="!props.hideLabel">
+      <CellAttachmentPreviewImage
+        v-if="workspaceIcon.icon && workspaceIcon.iconType === WorkspaceIconType.IMAGE"
+        :srcs="workspaceIcon.icon"
+        class="flex-none !object-contain max-h-full max-w-full !m-0"
+      />
+      <div
+        v-else-if="workspaceIcon.icon && workspaceIcon.iconType === WorkspaceIconType.EMOJI"
+        class="flex items-center justify-center"
+        :class="{
+          'text-white': isColorDark(workspaceColor),
+          'text-black opacity-80': !isColorDark(workspaceColor),
+          'text-sm': size === 'small',
+          'text-base': size === 'medium',
+          'text-2xl': size === 'large',
+          'text-4xl': size === 'xlarge',
+        }"
+      >
+        <template v-if="workspaceIcon.isUnicodeEmoji">
+          {{ workspaceIcon.icon }}
+        </template>
+        <template v-else>
+          <Icon :data-testid="`nc-icon-${workspaceIcon.icon}`" class="!text-inherit flex-none" :icon="workspaceIcon.icon"></Icon>
+        </template>
+      </div>
+      <GeneralIcon
+        v-else-if="workspaceIcon.icon && workspaceIcon.iconType === WorkspaceIconType.ICON"
+        :icon="workspaceIcon.icon"
+        class="flex-none"
+        :class="{
+          'text-white': isColorDark(workspaceColor),
+          'text-black opacity-80': !isColorDark(workspaceColor),
+          'w-3 h-3': size === 'small',
+          'w-4 h-4': size === 'medium',
+          'w-6 h-6': size === 'large',
+          'w-10 h-10': size === 'xlarge',
+        }"
+      />
       <div
+        v-else
         class="font-semibold"
         :class="{
           'text-white': isColorDark(workspaceColor),
diff --git a/packages/nc-gui/components/general/WorkspaceIconSelector.vue b/packages/nc-gui/components/general/WorkspaceIconSelector.vue
new file mode 100644
index 0000000000..071b20ac17
--- /dev/null
+++ b/packages/nc-gui/components/general/WorkspaceIconSelector.vue
@@ -0,0 +1,509 @@
+<script lang="ts" setup>
+import type { UploadChangeParam, UploadFile } from 'ant-design-vue'
+import { Upload } from 'ant-design-vue'
+import { WorkspaceIconType } from '#imports'
+import data from 'emoji-mart-vue-fast/data/apple.json'
+import { EmojiIndex, Picker } from 'emoji-mart-vue-fast/src'
+import 'emoji-mart-vue-fast/css/emoji-mart.css'
+
+interface Props {
+  icon: string | Record<string, any>
+  iconType: WorkspaceIconType | string
+  currentWorkspace: any
+}
+
+const props = withDefaults(defineProps<Props>(), {})
+
+const emits = defineEmits(['update:icon', 'update:iconType'])
+
+const { currentWorkspace } = toRefs(props)
+
+const vIcon = useVModel(props, 'icon', emits)
+
+const vIconType = useVModel(props, 'iconType', emits)
+
+const { t } = useI18n()
+
+const { getPossibleAttachmentSrc } = useAttachment()
+
+const isOpen = ref<boolean>(false)
+
+const isLoading = ref<boolean>(false)
+
+const inputRef = ref<HTMLInputElement>()
+
+const searchQuery = ref<string>('')
+
+const activeTabLocal = ref<WorkspaceIconType>(WorkspaceIconType.ICON)
+
+const activeTab = computed({
+  get: () => activeTabLocal.value,
+  set: (value: WorkspaceIconType) => {
+    searchQuery.value = ''
+
+    activeTabLocal.value = value
+
+    nextTick(() => {
+      focusInput()
+    })
+  },
+})
+
+const icons = computed(() => {
+  return searchIcons(searchQuery.value)
+})
+
+const selectIcon = (icon: string) => {
+  vIcon.value = icon
+  vIconType.value = WorkspaceIconType.ICON
+
+  isOpen.value = false
+}
+
+const handleRemoveIcon = (closeDropdown = true) => {
+  vIcon.value = ''
+  vIconType.value = ''
+
+  if (closeDropdown) {
+    isOpen.value = false
+  }
+}
+
+const emojiIndex = new EmojiIndex(data, {
+  emojisToShowFilter: (emoji: any) => {
+    if (Number(emoji.added_in) >= 14) {
+      return false
+    }
+
+    return true
+  },
+})
+
+function selectEmoji(_emoji: any) {
+  vIcon.value = _emoji.native
+  vIconType.value = WorkspaceIconType.EMOJI
+
+  isOpen.value = false
+}
+
+const fileList = ref<UploadFile[]>([])
+
+const imageCropperData = ref({
+  cropperConfig: {
+    stencilProps: {
+      aspectRatio: 1,
+    },
+    minHeight: 150,
+    minWidth: 150,
+  },
+  imageConfig: {
+    src: '',
+    type: 'image',
+    name: 'icon',
+  },
+  uploadConfig: {
+    path: [NOCO, 'workspace', currentWorkspace.value?.id, 'icon'].join('/'),
+  },
+})
+
+const handleOnUploadImage = async (data: any) => {
+  vIcon.value = data
+  vIconType.value = WorkspaceIconType.IMAGE
+
+  isOpen.value = false
+}
+
+const showImageCropperLocal = ref(false)
+
+const showImageCropper = ref(false)
+
+const getWorkspaceLogoSrc = computed(() => {
+  if (vIcon.value && vIconType.value === WorkspaceIconType.IMAGE) {
+    return getPossibleAttachmentSrc(vIcon.value)
+  }
+
+  return []
+})
+
+const isUploadingImage = ref(false)
+
+function rejectDrop(fileList: UploadFile[]) {
+  fileList.map((file) => {
+    return message.error(`${t('msg.error.fileUploadFailed')} ${file.name}`)
+  })
+}
+
+const handleChange = (info: UploadChangeParam) => {
+  const status = info.file.status
+
+  if (status === 'uploading') {
+    isUploadingImage.value = true
+    return
+  }
+
+  if (status && status !== 'removed' && status === 'done' && info.file.originFileObj instanceof File) {
+    // 1. Revoke the object URL, to allow the garbage collector to destroy the uploaded before file
+    if (imageCropperData.value.imageConfig.src) {
+      URL.revokeObjectURL(imageCropperData.value.imageConfig.src)
+    }
+    // 2. Create the blob link to the file to optimize performance:
+    const blob = URL.createObjectURL(info.file.originFileObj)
+
+    // 3. Update the image. The type will be derived from the extension
+    imageCropperData.value.imageConfig = {
+      src: blob,
+      type: info.file.originFileObj.type,
+      name: info.file.originFileObj.name,
+    }
+
+    isUploadingImage.value = false
+    showImageCropper.value = true
+    return
+  }
+
+  if (status === 'error') {
+    isUploadingImage.value = false
+    message.error(`${t('msg.error.fileUploadFailed')} ${info.file.name}`)
+  }
+}
+
+/** a workaround to override default antd upload api call */
+const customReqCbk = (customReqArgs: { file: any; onSuccess: () => void }) => {
+  fileList.value.forEach((f) => {
+    if (f.uid === customReqArgs.file.uid) {
+      f.status = 'done'
+      handleChange({ file: f, fileList: fileList.value })
+    }
+  })
+
+  customReqArgs.onSuccess()
+}
+
+/** check if the file size exceeds the limit */
+const beforeUpload = (file: UploadFile) => {
+  const exceedLimit = file.size! / 1024 / 1024 > 2
+  if (exceedLimit) {
+    message.error(`File ${file.name} is too big. The accepted file size is less than 2MB.`)
+  }
+  return !exceedLimit || Upload.LIST_IGNORE
+}
+
+const onVisibilityChange = (value: boolean) => {
+  if (!value && showImageCropperLocal.value) {
+    isOpen.value = true
+  }
+}
+
+function focusInput() {
+  if (activeTab.value === WorkspaceIconType.EMOJI) {
+    setTimeout(() => {
+      const emojiInput = document.querySelector('.emoji-mart-search input') as HTMLInputElement
+
+      if (!emojiInput) return
+
+      emojiInput.focus()
+      emojiInput.select()
+    })
+  } else if (activeTab.value === WorkspaceIconType.ICON) {
+    setTimeout(() => {
+      inputRef.value?.focus()
+      inputRef.value?.select()
+    }, 250)
+  }
+}
+
+watch(showImageCropper, (newValue) => {
+  if (newValue) {
+    showImageCropperLocal.value = true
+  } else {
+    setTimeout(() => {
+      showImageCropperLocal.value = false
+    }, 500)
+  }
+})
+
+watch(isOpen, (newValue) => {
+  if (newValue) {
+    nextTick(() => {
+      focusInput()
+    })
+  }
+})
+</script>
+
+<template>
+  <div>
+    <NcDropdown v-model:visible="isOpen" overlay-class-name="w-[432px]" @visible-change="onVisibilityChange">
+      <div
+        class="rounded-lg border-1 flex-none w-17 h-17 overflow-hidden transition-all duration-300 cursor-pointer"
+        :class="{
+          'border-transparent': !isOpen && vIconType === WorkspaceIconType.IMAGE,
+          'border-nc-gray-medium': !isOpen && vIconType !== WorkspaceIconType.IMAGE,
+          'border-primary shadow-selected': isOpen,
+        }"
+      >
+        <GeneralWorkspaceIcon
+          :workspace="currentWorkspace"
+          :workspace-icon="{
+            icon: vIcon,
+            iconType: vIconType,
+          }"
+          size="xlarge"
+          class="!w-full !h-full !min-w-full rounded-none select-none"
+        />
+      </div>
+      <template #overlay>
+        <div class="pt-2 h-[320px]">
+          <NcTabs v-model:activeKey="activeTab" theme="ai" class="nc-workspace-icon-dropdown-tabs h-full">
+            <template #leftExtra>
+              <div class="w-0"></div>
+            </template>
+            <template #rightExtra>
+              <div>
+                <NcButton size="xs" type="text" :disabled="!vIcon" @click.stop="handleRemoveIcon"> Remove </NcButton>
+              </div>
+            </template>
+            <a-tab-pane :key="WorkspaceIconType.ICON" class="w-full" :disabled="isLoading">
+              <template #tab>
+                <div class="tab-title">
+                  <GeneralIcon icon="ncPlaceholderIcon" class="flex-none" />
+                  Icon
+                </div>
+              </template>
+
+              <div class="h-full overflow-auto nc-scrollbar-thin flex flex-col">
+                <div class="!sticky top-0 flex gap-2 bg-white px-2 py-2">
+                  <a-input
+                    ref="inputRef"
+                    v-model:value="searchQuery"
+                    :placeholder="$t('placeholder.searchIcons')"
+                    class="nc-dropdown-search-unified-input z-10"
+                  >
+                  </a-input>
+                </div>
+
+                <div v-if="icons.length" class="grid px-3 auto-rows-max pb-2 gap-3 grid-cols-10">
+                  <component
+                    :is="i"
+                    v-for="({ icon: i, name }, idx) in icons"
+                    :key="idx"
+                    :icon="i"
+                    class="w-6 hover:bg-gray-100 cursor-pointer rounded p-1 text-gray-700 h-6"
+                    @click="selectIcon(name)"
+                  />
+                </div>
+                <div v-else class="flex-1 grid place-items-center">
+                  <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" class="!my-0" />
+                </div>
+              </div>
+            </a-tab-pane>
+            <a-tab-pane :key="WorkspaceIconType.IMAGE" class="w-full" :disabled="isLoading">
+              <template #tab>
+                <div
+                  class="tab-title"
+                  :class="{
+                    '!cursor-wait': isLoading,
+                  }"
+                >
+                  <GeneralIcon icon="ncUpload" class="flex-none" />
+                  Upload
+                </div>
+              </template>
+              <div class="p-2 flex flex-col gap-2.5 h-full">
+                <div v-if="getWorkspaceLogoSrc.length" class="flex items-center gap-4">
+                  <div class="h-12 w-12 p-2">
+                    <CellAttachmentPreviewImage
+                      :srcs="getWorkspaceLogoSrc"
+                      class="flex-none !object-contain max-h-full max-w-full !m-0 rounded-lg"
+                    />
+                  </div>
+                  <div class="flex-1 w-[calc(100%_-_108px)]">
+                    <NcTooltip class="truncate flex-1" show-on-truncate-only>
+                      <template #title> {{ vIcon?.title || 'Workspace logo' }}</template>
+                      {{ vIcon?.title || 'Workspace logo' }}
+                    </NcTooltip>
+                    <div class="text-nc-content-gray-muted text-sm">
+                      {{ vIcon?.size ? `${(vIcon?.size / 1048576).toFixed(2)} MB` : '0 MB' }}
+                    </div>
+                  </div>
+
+                  <div>
+                    <NcButton icon-only type="text" size="xs" class="!px-1" @click="handleRemoveIcon(false)">
+                      <template #icon>
+                        <GeneralIcon icon="deleteListItem" />
+                      </template>
+                    </NcButton>
+                  </div>
+                </div>
+                <div class="flex-1">
+                  <a-upload-dragger
+                    v-model:fileList="fileList"
+                    name="file"
+                    accept="image/*"
+                    :disabled="isUploadingImage"
+                    :multiple="false"
+                    :show-upload-list="false"
+                    class="nc-workspace-image-uploader"
+                    :custom-request="customReqCbk"
+                    :before-upload="beforeUpload"
+                    @change="handleChange"
+                    @reject="rejectDrop"
+                  >
+                    <div class="ant-upload-drag-icon !text-nc-content-gray-muted !mb-2 text-center">
+                      <div v-if="isUploadingImage" class="h-6 grid place-items-center">
+                        <GeneralLoader size="regular" />
+                      </div>
+                      <GeneralIcon v-else icon="upload" class="h-6 w-6" />
+                    </div>
+
+                    <div class="ant-upload-text !text-nc-content-gray-muted !text-sm">
+                      Drop your icon here or <span class="text-nc-content-brand hover:underline">browse file</span>
+                      <div class="mt-1">Supported: image/*</div>
+                    </div>
+                  </a-upload-dragger>
+                </div>
+              </div>
+            </a-tab-pane>
+            <a-tab-pane :key="WorkspaceIconType.EMOJI" class="w-full" :disabled="isLoading">
+              <template #tab>
+                <div class="tab-title">
+                  <GeneralIcon icon="ncSmile" class="flex-none" />
+                  Emoji
+                </div>
+              </template>
+              <div class="h-full">
+                <Picker
+                  :data="emojiIndex"
+                  :native="true"
+                  :show-preview="false"
+                  color="#40444D"
+                  :auto-focus="true"
+                  :show-categories="false"
+                  :i18n="{
+                    search: 'Search emoji',
+                  }"
+                  class="nc-workspace-emoji-picker"
+                  @select="selectEmoji"
+                  @click.stop="() => {}"
+                ></Picker>
+              </div>
+            </a-tab-pane>
+          </NcTabs>
+        </div>
+      </template>
+    </NcDropdown>
+
+    <GeneralImageCropper
+      v-model:show-cropper="showImageCropper"
+      :cropper-config="imageCropperData.cropperConfig"
+      :image-config="imageCropperData.imageConfig"
+      :upload-config="imageCropperData.uploadConfig"
+      @submit="handleOnUploadImage"
+    ></GeneralImageCropper>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.nc-workspace-icon-dropdown-tabs {
+  :deep(.ant-tabs-nav) {
+    @apply px-3;
+
+    .ant-tabs-extra-content {
+      @apply self-start;
+    }
+
+    .ant-tabs-tab {
+      @apply px-0 pt-1 pb-2;
+
+      &.ant-tabs-tab-active {
+        @apply font-medium;
+      }
+
+      & + .ant-tabs-tab {
+        @apply ml-4;
+      }
+
+      .tab-title {
+        @apply text-xs leading-[24px] px-2 rounded hover:bg-gray-100 transition-colors flex items-center gap-2;
+      }
+    }
+  }
+
+  :deep(.ant-tabs-content) {
+    @apply h-full;
+  }
+
+  &.nc-ai-loading {
+    :deep(.ant-tabs-tab) {
+      @apply !cursor-wait;
+    }
+  }
+
+  :deep(.ant-tabs-tab-disabled) {
+    .tab-title {
+      @apply text-nc-content-gray-muted hover:bg-transparent;
+    }
+  }
+}
+
+:deep(.ant-input::placeholder) {
+  @apply text-gray-500;
+}
+</style>
+
+<style>
+.nc-workspace-image-uploader {
+  &.ant-upload.ant-upload-drag {
+    @apply !rounded-lg !bg-white !hover:bg-nc-bg-gray-light !transition-colors duration-300;
+  }
+  .ant-upload-btn {
+    @apply !flex flex-col items-center justify-center !min-h-[176px];
+  }
+}
+
+.nc-workspace-emoji-picker.emoji-mart {
+  @apply !w-108 !h-full !border-none bg-transparent rounded-t-none rounded-b-lg;
+
+  span.emoji-type-native {
+    @apply cursor-pointer;
+  }
+
+  .emoji-mart-anchor {
+    @apply h-8 py-1.5;
+    svg {
+      @apply h-3.5 !important;
+    }
+  }
+
+  .emoji-mart-search {
+    @apply px-2 mt-2;
+    input {
+      @apply text-sm pl-[11px] rounded-lg !h-8 transition-all duration-300 !outline-none ring-0;
+
+      &:focus {
+        @apply !outline-none ring-0 !h-8 shadow-selected border-primary;
+      }
+    }
+  }
+
+  .emoji-mart-scroll {
+    @apply mt-1 px-1 overflow-x-hidden;
+
+    h3.emoji-mart-category-label {
+      @apply text-xs text-gray-500 mb-0;
+    }
+  }
+
+  .emoji-mart-scroll {
+    @apply nc-scrollbar-thin;
+    overflow-y: overlay;
+  }
+
+  .emoji-mart-emoji {
+    @apply !px-1 !py-0.75 !m-0.5;
+  }
+  .emoji-mart-emoji:hover:before {
+    @apply !rounded-md;
+  }
+}
+</style>

From 3c2b7a7245898078b4ef3df646085f2d3f3c9311 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 20 Nov 2024 17:11:12 +0000
Subject: [PATCH 05/31] fix(nc-gui): show workspace icon in command palette

---
 packages/nc-gui/components/cmd-k/index.vue    | 16 ++++++--
 .../composables/useCommandPalette/index.ts    | 37 +++++++++++--------
 2 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/packages/nc-gui/components/cmd-k/index.vue b/packages/nc-gui/components/cmd-k/index.vue
index 032c5069aa..abdfda0aab 100644
--- a/packages/nc-gui/components/cmd-k/index.vue
+++ b/packages/nc-gui/components/cmd-k/index.vue
@@ -2,6 +2,7 @@
 import { useMagicKeys, whenever } from '@vueuse/core'
 import { commandScore } from './command-score'
 import type { CommandPaletteType } from '~/lib/types'
+import LinkedItems from '../virtual-cell/components/LinkedItems.vue'
 
 interface CmdAction {
   id: string
@@ -10,7 +11,8 @@ interface CmdAction {
   parent?: string
   handler?: Function
   scopePayload?: any
-  icon?: VNode | string
+  icon?: VNode | string | Record<string, any>
+  iconType?: string
   keywords?: string[]
   section?: string
   is_default?: number | null
@@ -85,6 +87,7 @@ const nestedScope = computed(() => {
       id: parent,
       label: parentEl?.title,
       icon: parentEl?.icon,
+      iconType: parentEl?.iconType,
       iconColor: parent.startsWith('ws-') ? parentEl?.iconColor : null,
     })
     parent = parentEl?.parent || 'root'
@@ -414,13 +417,15 @@ defineExpose({
                 <GeneralWorkspaceIcon
                   v-if="el.icon && el.id.startsWith('ws')"
                   :workspace="{
+                    title: el.label,
                     id: el.id.split('-')[1],
                     meta: {
                       color: el.iconColor,
+                      icon: el.icon,
+                      iconType: el.iconType,
                     },
                   }"
-                  hide-label
-                  size="small"
+                  size="medium"
                 />
 
                 <component
@@ -501,13 +506,16 @@ defineExpose({
                           <GeneralWorkspaceIcon
                             v-if="item.data.icon && item.data.id.startsWith('ws')"
                             :workspace="{
+                              title: item.data.title,
                               id: item.data.id.split('-')[2],
                               meta: {
                                 color: item.data?.iconColor,
+                                icon: item.data?.icon,
+                                iconType: item.data?.iconType,
                               },
                             }"
                             class="mr-2"
-                            size="small"
+                            size="medium"
                           />
                           <template v-else-if="item.data.section === 'Bases' || item.data.icon === 'project'">
                             <GeneralBaseIconColorPicker
diff --git a/packages/nc-gui/composables/useCommandPalette/index.ts b/packages/nc-gui/composables/useCommandPalette/index.ts
index d760f666a7..e816b8248b 100644
--- a/packages/nc-gui/composables/useCommandPalette/index.ts
+++ b/packages/nc-gui/composables/useCommandPalette/index.ts
@@ -37,23 +37,30 @@ export const useCommandPalette = createSharedComposable(() => {
   const { workspacesList } = storeToRefs(useWorkspace())
 
   const workspacesCmd = computed(() =>
-    (workspacesList.value || []).map((workspace: { id: string; title: string; meta?: { color: string } }) => ({
-      id: `ws-nav-${workspace.id}`,
-      title: workspace.title,
-      icon: 'workspace',
-      iconColor: workspace.meta?.color,
-      section: 'Workspaces',
-      scopePayload: {
-        scope: `ws-${workspace.id}`,
-        data: {
-          workspace_id: workspace.id,
+    (workspacesList?.value || []).map(
+      (workspace: {
+        id: string
+        title: string
+        meta?: { color: string; icon: string | Record<string, any>; iconType: string }
+      }) => ({
+        id: `ws-nav-${workspace.id}`,
+        title: workspace.title,
+        icon: workspace.meta?.icon || 'workspace',
+        iconType: workspace.meta?.iconType,
+        iconColor: workspace.meta?.color,
+        section: 'Workspaces',
+        scopePayload: {
+          scope: `ws-${workspace.id}`,
+          data: {
+            workspace_id: workspace.id,
+          },
         },
-      },
-      handler: processHandler({
-        type: 'navigate',
-        payload: `/${workspace.id}/settings`,
+        handler: processHandler({
+          type: 'navigate',
+          payload: `/${workspace.id}/settings`,
+        }),
       }),
-    })),
+    ),
   )
 
   const commands = ref({

From 98bfc9c8f36e1b47921765eea8cd8bcf8d50d33a Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 20 Nov 2024 17:11:12 +0000
Subject: [PATCH 06/31] fix(nc-gui): update workspace icon issue from admin
 panel

---
 packages/nc-gui/components/dlg/InviteDlg.vue      |  6 +++---
 .../nc-gui/components/general/EmojiPicker.vue     |  6 +-----
 .../nc-gui/components/general/WorkspaceIcon.vue   | 15 ++++++++++++---
 packages/nc-gui/components/workspace/View.vue     |  7 +------
 packages/nc-gui/utils/commonUtils.ts              |  4 ++++
 5 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/packages/nc-gui/components/dlg/InviteDlg.vue b/packages/nc-gui/components/dlg/InviteDlg.vue
index 325dd32a36..9edce22026 100644
--- a/packages/nc-gui/components/dlg/InviteDlg.vue
+++ b/packages/nc-gui/components/dlg/InviteDlg.vue
@@ -417,15 +417,15 @@ const onRoleChange = (role: keyof typeof RoleLabels) => (inviteData.roles = role
                   </a-input>
                 </div>
 
-                <div class="flex flex-col max-h-64 overflow-y-auto nc-scrollbar-md mt-2">
+                <div class="flex flex-col max-h-64 overflow-y-auto nc-scrollbar-md mt-2 px-2">
                   <div
                     v-for="ws in workSpaceSelectList"
                     :key="ws.id"
-                    class="px-4 cursor-pointer hover:bg-gray-100 rounded-lg h-9.5 py-2 w-full flex gap-2"
+                    class="px-2 cursor-pointer hover:bg-gray-100 rounded-lg h-9.5 py-2 w-full flex gap-2"
                     @click="checked[ws.id!] = !checked[ws.id!]"
                   >
                     <div class="flex gap-2 capitalize items-center">
-                      <GeneralWorkspaceIcon :hide-label="true" :workspace="ws" size="small" />
+                      <GeneralWorkspaceIcon :workspace="ws" size="medium" />
                       {{ ws.title }}
                     </div>
                     <div class="flex-1" />
diff --git a/packages/nc-gui/components/general/EmojiPicker.vue b/packages/nc-gui/components/general/EmojiPicker.vue
index e99ba070cd..3c61bf3cef 100644
--- a/packages/nc-gui/components/general/EmojiPicker.vue
+++ b/packages/nc-gui/components/general/EmojiPicker.vue
@@ -39,10 +39,6 @@ function selectEmoji(_emoji: any) {
   isOpen.value = false
 }
 
-const isUnicodeEmoji = computed(() => {
-  return emojiRef.value?.match(/\p{Extended_Pictographic}/gu)
-})
-
 const onClick = (e: Event) => {
   if (readonly) return
 
@@ -95,7 +91,7 @@ const showClearButton = computed(() => {
       <template v-if="!emojiRef">
         <slot name="default" />
       </template>
-      <template v-else-if="isUnicodeEmoji">
+      <template v-else-if="isUnicodeEmoji(emojiRef)">
         {{ emojiRef }}
       </template>
       <template v-else>
diff --git a/packages/nc-gui/components/general/WorkspaceIcon.vue b/packages/nc-gui/components/general/WorkspaceIcon.vue
index 282d38623f..01a8f5bfd0 100644
--- a/packages/nc-gui/components/general/WorkspaceIcon.vue
+++ b/packages/nc-gui/components/general/WorkspaceIcon.vue
@@ -39,7 +39,6 @@ const workspaceIcon = computed(() => {
   return {
     icon: iconType === WorkspaceIconType.IMAGE && ncIsObject(icon) ? getPossibleAttachmentSrc(icon) || '' : icon,
     iconType: iconType,
-    isUnicodeEmoji: iconType === WorkspaceIconType.EMOJI && icon ? icon?.match(/\p{Extended_Pictographic}/gu) : false,
   }
 })
 
@@ -103,11 +102,21 @@ const size = computed(() => props.size || 'medium')
           'text-4xl': size === 'xlarge',
         }"
       >
-        <template v-if="workspaceIcon.isUnicodeEmoji">
+        <template v-if="isUnicodeEmoji(workspaceIcon.icon)">
           {{ workspaceIcon.icon }}
         </template>
         <template v-else>
-          <Icon :data-testid="`nc-icon-${workspaceIcon.icon}`" class="!text-inherit flex-none" :icon="workspaceIcon.icon"></Icon>
+          <Icon
+            :data-testid="`nc-icon-${workspaceIcon.icon}`"
+            class="!text-inherit flex-none"
+            :class="{
+              'w-3 h-3': size === 'small',
+              'w-4 h-4': size === 'medium',
+              'w-6 h-6': size === 'large',
+              'w-10 h-10': size === 'xlarge',
+            }"
+            :icon="workspaceIcon.icon"
+          ></Icon>
         </template>
       </div>
       <GeneralIcon
diff --git a/packages/nc-gui/components/workspace/View.vue b/packages/nc-gui/components/workspace/View.vue
index c086eb569e..d6ab102eb3 100644
--- a/packages/nc-gui/components/workspace/View.vue
+++ b/packages/nc-gui/components/workspace/View.vue
@@ -109,7 +109,7 @@ onMounted(() => {
       <NcPageHeader>
         <template #icon>
           <div class="flex justify-center items-center h-6 w-6">
-            <GeneralWorkspaceIcon :workspace="currentWorkspace" hide-label size="small" />
+            <GeneralWorkspaceIcon :workspace="currentWorkspace" size="medium" />
           </div>
         </template>
         <template #title>
@@ -166,11 +166,6 @@ onMounted(() => {
 </template>
 
 <style lang="scss" scoped>
-.nc-workspace-avatar {
-  @apply min-w-5 h-5 w-5 rounded-[6px] flex items-center justify-center text-white font-weight-bold uppercase;
-  font-size: 0.7rem;
-}
-
 .tab {
   @apply flex flex-row items-center gap-x-2;
 }
diff --git a/packages/nc-gui/utils/commonUtils.ts b/packages/nc-gui/utils/commonUtils.ts
index 222b45bfce..563e7199ab 100644
--- a/packages/nc-gui/utils/commonUtils.ts
+++ b/packages/nc-gui/utils/commonUtils.ts
@@ -55,3 +55,7 @@ export const ncArrayFrom = <T>(
 ): T[] => {
   return Array.from({ length }, (_, i) => contentCallback(i))
 }
+
+export const isUnicodeEmoji = (emoji: string) => {
+  return !!emoji?.match(/(\p{Emoji}|\p{Extended_Pictographic})/gu)
+}

From d4a04ba4edd6b620230bb773887dbdb3be377f53 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 20 Nov 2024 17:11:13 +0000
Subject: [PATCH 07/31] fix(nc-gui): fill image cropper by default

---
 .../nc-gui/components/general/ImageCropper.vue   | 16 ++++++++++++++--
 .../components/general/WorkspaceIconSelector.vue |  1 +
 packages/nc-gui/components/smartsheet/Form.vue   |  2 +-
 packages/nc-gui/lib/types.ts                     |  5 +++++
 4 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/general/ImageCropper.vue b/packages/nc-gui/components/general/ImageCropper.vue
index ded4cbdf04..751f96aaae 100644
--- a/packages/nc-gui/components/general/ImageCropper.vue
+++ b/packages/nc-gui/components/general/ImageCropper.vue
@@ -3,7 +3,7 @@ import { Cropper } from 'vue-advanced-cropper'
 import 'vue-advanced-cropper/dist/style.css'
 import 'vue-advanced-cropper/dist/theme.classic.css'
 import type { AttachmentReqType } from 'nocodb-sdk'
-import type { ImageCropperConfig } from '~/lib/types'
+import type { ImageCropperConfig } from '#imports'
 
 interface Props {
   imageConfig: {
@@ -17,11 +17,13 @@ interface Props {
   }
   showCropper: boolean
 }
-const { imageConfig, cropperConfig, uploadConfig, ...props } = defineProps<Props>()
+const { imageConfig, uploadConfig, ...props } = defineProps<Props>()
 const emit = defineEmits(['update:showCropper', 'submit'])
 
 const showCropper = useVModel(props, 'showCropper', emit)
 
+const { cropperConfig } = toRefs(props)
+
 const { api, isLoading } = useApi()
 
 const cropperRef = ref()
@@ -84,6 +86,13 @@ const handleSaveImage = async () => {
   }
 }
 
+const defaultSize = ({ imageSize, visibleArea }: { imageSize: Record<string, any>; visibleArea: Record<string, any> }) => {
+  return {
+    width: (visibleArea || imageSize).width,
+    height: (visibleArea || imageSize).height,
+  }
+}
+
 watch(showCropper, () => {
   if (!showCropper.value) {
     previewImage.value = {
@@ -106,6 +115,9 @@ watch(showCropper, () => {
         :min-height="cropperConfig?.minHeight"
         :min-width="cropperConfig?.minWidth"
         :image-restriction="cropperConfig?.imageRestriction"
+        v-bind="
+          cropperConfig.stencilProps?.fillDefault || cropperConfig.stencilProps?.fillDefault === undefined ? { defaultSize } : {}
+        "
       />
       <div v-if="previewImage.src" class="result_preview">
         <img :src="previewImage.src" alt="Preview Image" />
diff --git a/packages/nc-gui/components/general/WorkspaceIconSelector.vue b/packages/nc-gui/components/general/WorkspaceIconSelector.vue
index 071b20ac17..66f6b10bdf 100644
--- a/packages/nc-gui/components/general/WorkspaceIconSelector.vue
+++ b/packages/nc-gui/components/general/WorkspaceIconSelector.vue
@@ -92,6 +92,7 @@ const imageCropperData = ref({
   cropperConfig: {
     stencilProps: {
       aspectRatio: 1,
+      fillDefault: true,
     },
     minHeight: 150,
     minWidth: 150,
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 104cb53914..96b9b6cd8c 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -17,7 +17,7 @@ import {
   isVirtualCol,
 } from 'nocodb-sdk'
 import type { ValidateInfo } from 'ant-design-vue/es/form/useForm'
-import type { ImageCropperConfig } from '~/lib/types'
+import type { ImageCropperConfig } from '#imports'
 
 provide(IsFormInj, ref(true))
 provide(IsGalleryInj, ref(false))
diff --git a/packages/nc-gui/lib/types.ts b/packages/nc-gui/lib/types.ts
index 9b57ad054e..5d68727f25 100644
--- a/packages/nc-gui/lib/types.ts
+++ b/packages/nc-gui/lib/types.ts
@@ -245,6 +245,11 @@ interface FormFieldsLimitOptionsType {
 interface ImageCropperConfig {
   stencilProps?: {
     aspectRatio?: number
+    /**
+     * It can be used to force the cropper fills all visible area by default:
+     * @default true
+     */
+    fillDefault?: boolean
   }
   minHeight?: number
   minWidth?: number

From 0ad5019d0f55f8527c7559f4dcd1cafab4fa4c65 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 20 Nov 2024 17:11:13 +0000
Subject: [PATCH 08/31] chore(nc-gui): lint

---
 packages/nc-gui/components/cmd-k/index.vue                  | 3 +--
 packages/nc-gui/components/general/UserIcon.vue             | 2 +-
 packages/nc-gui/components/general/WorkspaceIcon.vue        | 5 ++---
 .../nc-gui/components/general/WorkspaceIconSelector.vue     | 6 +++---
 4 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui/components/cmd-k/index.vue b/packages/nc-gui/components/cmd-k/index.vue
index abdfda0aab..bd61034116 100644
--- a/packages/nc-gui/components/cmd-k/index.vue
+++ b/packages/nc-gui/components/cmd-k/index.vue
@@ -1,8 +1,7 @@
 <script lang="ts" setup>
 import { useMagicKeys, whenever } from '@vueuse/core'
 import { commandScore } from './command-score'
-import type { CommandPaletteType } from '~/lib/types'
-import LinkedItems from '../virtual-cell/components/LinkedItems.vue'
+import type { CommandPaletteType } from '#imports'
 
 interface CmdAction {
   id: string
diff --git a/packages/nc-gui/components/general/UserIcon.vue b/packages/nc-gui/components/general/UserIcon.vue
index 8ce6118caa..ffead704bf 100644
--- a/packages/nc-gui/components/general/UserIcon.vue
+++ b/packages/nc-gui/components/general/UserIcon.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { isColorDark, stringToColor } from '~/utils/colorsUtils'
+import { isColorDark, stringToColor } from '#imports'
 
 const props = withDefaults(
   defineProps<{
diff --git a/packages/nc-gui/components/general/WorkspaceIcon.vue b/packages/nc-gui/components/general/WorkspaceIcon.vue
index 01a8f5bfd0..af7f6f8483 100644
--- a/packages/nc-gui/components/general/WorkspaceIcon.vue
+++ b/packages/nc-gui/components/general/WorkspaceIcon.vue
@@ -1,9 +1,8 @@
 <script lang="ts" setup>
 import type { WorkspaceType } from 'nocodb-sdk'
-import { isColorDark, stringToColor } from '~/utils/colorsUtils'
-import { WorkspaceIconType } from '#imports'
 import 'emoji-mart-vue-fast/css/emoji-mart.css'
 import { Icon } from '@iconify/vue'
+import { WorkspaceIconType, isColorDark, stringToColor } from '#imports'
 
 const props = defineProps<{
   workspace: WorkspaceType | undefined
@@ -38,7 +37,7 @@ const workspaceIcon = computed(() => {
 
   return {
     icon: iconType === WorkspaceIconType.IMAGE && ncIsObject(icon) ? getPossibleAttachmentSrc(icon) || '' : icon,
-    iconType: iconType,
+    iconType,
   }
 })
 
diff --git a/packages/nc-gui/components/general/WorkspaceIconSelector.vue b/packages/nc-gui/components/general/WorkspaceIconSelector.vue
index 66f6b10bdf..2e49194d41 100644
--- a/packages/nc-gui/components/general/WorkspaceIconSelector.vue
+++ b/packages/nc-gui/components/general/WorkspaceIconSelector.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { UploadChangeParam, UploadFile } from 'ant-design-vue'
 import { Upload } from 'ant-design-vue'
-import { WorkspaceIconType } from '#imports'
 import data from 'emoji-mart-vue-fast/data/apple.json'
 import { EmojiIndex, Picker } from 'emoji-mart-vue-fast/src'
+import { WorkspaceIconType } from '#imports'
 import 'emoji-mart-vue-fast/css/emoji-mart.css'
 
 interface Props {
@@ -479,10 +479,10 @@ watch(isOpen, (newValue) => {
   .emoji-mart-search {
     @apply px-2 mt-2;
     input {
-      @apply text-sm pl-[11px] rounded-lg !h-8 transition-all duration-300 !outline-none ring-0;
+      @apply text-sm pl-[11px] rounded-lg !py-5px transition-all duration-300 !outline-none ring-0;
 
       &:focus {
-        @apply !outline-none ring-0 !h-8 shadow-selected border-primary;
+        @apply !outline-none ring-0 shadow-selected border-primary;
       }
     }
   }

From e86968291c48f8800b998e3777400a3f8f3994f5 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 20 Nov 2024 17:11:13 +0000
Subject: [PATCH 09/31] chore(nc-gui): add typedocs for function isUnicodeEmoji

---
 packages/nc-gui/utils/commonUtils.ts | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/nc-gui/utils/commonUtils.ts b/packages/nc-gui/utils/commonUtils.ts
index 563e7199ab..9db2e51068 100644
--- a/packages/nc-gui/utils/commonUtils.ts
+++ b/packages/nc-gui/utils/commonUtils.ts
@@ -56,6 +56,18 @@ export const ncArrayFrom = <T>(
   return Array.from({ length }, (_, i) => contentCallback(i))
 }
 
+/**
+ * Checks if a string contains Unicode emojis.
+ *
+ * @param emoji - The string to check.
+ * @returns A boolean indicating if the string contains Unicode emojis.
+ *
+ * @example
+ * ```ts
+ * const hasEmoji = isUnicodeEmoji('Hello World 😊');
+ * console.log(hasEmoji); // Output: true
+ * ```
+ */
 export const isUnicodeEmoji = (emoji: string) => {
   return !!emoji?.match(/(\p{Emoji}|\p{Extended_Pictographic})/gu)
 }

From f8520b8a4753f5ef2b82850924a4fe70732ddefc Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 20 Nov 2024 17:11:13 +0000
Subject: [PATCH 10/31] fix(nocodb): attachment related backend review changes

---
 packages/nocodb-sdk/src/lib/enums.ts          |  6 ++
 .../attachments-secure.controller.ts          | 10 ++-
 .../src/controllers/attachments.controller.ts | 15 ++++-
 packages/nocodb/src/schema/swagger-v2.json    | 28 +++++++++
 packages/nocodb/src/schema/swagger.json       | 28 +++++++++
 .../src/services/attachments.service.ts       | 61 ++++++++++++++-----
 6 files changed, 131 insertions(+), 17 deletions(-)

diff --git a/packages/nocodb-sdk/src/lib/enums.ts b/packages/nocodb-sdk/src/lib/enums.ts
index c02830a779..ef6ce37fa2 100644
--- a/packages/nocodb-sdk/src/lib/enums.ts
+++ b/packages/nocodb-sdk/src/lib/enums.ts
@@ -440,3 +440,9 @@ export enum ViewLockType {
   Locked = 'locked',
   Collaborative = 'collaborative',
 }
+
+export enum PublicAttachmentScope {
+  WORKSPACEPICS = 'workspacePics',
+  PROFILEPICS = 'profilePics',
+  ORGANIZATIONPICS = 'organizationPics',
+}
diff --git a/packages/nocodb/src/controllers/attachments-secure.controller.ts b/packages/nocodb/src/controllers/attachments-secure.controller.ts
index 22bd1601d6..1aec7f2803 100644
--- a/packages/nocodb/src/controllers/attachments-secure.controller.ts
+++ b/packages/nocodb/src/controllers/attachments-secure.controller.ts
@@ -15,7 +15,11 @@ import {
 } from '@nestjs/common';
 import { AnyFilesInterceptor } from '@nestjs/platform-express';
 import { Response } from 'express';
-import type { AttachmentReqType, FileType } from 'nocodb-sdk';
+import type {
+  AttachmentReqType,
+  FileType,
+  PublicAttachmentScope,
+} from 'nocodb-sdk';
 import type { NcRequest } from '~/interface/config';
 import { NcContext } from '~/interface/config';
 import { GlobalGuard } from '~/guards/global/global.guard';
@@ -43,11 +47,13 @@ export class AttachmentsSecureController {
   @UseInterceptors(UploadAllowedInterceptor, AnyFilesInterceptor())
   async upload(
     @UploadedFiles() files: Array<FileType>,
+    @Query('scope') scope?: PublicAttachmentScope,
     @Req() req: NcRequest & { user: { id: string } },
   ) {
     const attachments = await this.attachmentsService.upload({
       files: files,
       req,
+      scope,
     });
 
     return attachments;
@@ -59,11 +65,13 @@ export class AttachmentsSecureController {
   @UseGuards(MetaApiLimiterGuard, GlobalGuard)
   async uploadViaURL(
     @Body() body: Array<AttachmentReqType>,
+    @Query('scope') scope?: PublicAttachmentScope,
     @Req() req: NcRequest & { user: { id: string } },
   ) {
     const attachments = await this.attachmentsService.uploadViaURL({
       urls: body,
       req,
+      scope,
     });
 
     return attachments;
diff --git a/packages/nocodb/src/controllers/attachments.controller.ts b/packages/nocodb/src/controllers/attachments.controller.ts
index 087bff0b55..96aefe533d 100644
--- a/packages/nocodb/src/controllers/attachments.controller.ts
+++ b/packages/nocodb/src/controllers/attachments.controller.ts
@@ -16,7 +16,11 @@ import {
 import { AnyFilesInterceptor } from '@nestjs/platform-express';
 import { Response } from 'express';
 import contentDisposition from 'content-disposition';
-import type { AttachmentReqType, FileType } from 'nocodb-sdk';
+import type {
+  AttachmentReqType,
+  FileType,
+  PublicAttachmentScope,
+} from 'nocodb-sdk';
 import { UploadAllowedInterceptor } from '~/interceptors/is-upload-allowed/is-upload-allowed.interceptor';
 import { GlobalGuard } from '~/guards/global/global.guard';
 import { AttachmentsService } from '~/services/attachments.service';
@@ -42,11 +46,16 @@ export class AttachmentsController {
   @Post(['/api/v1/db/storage/upload', '/api/v2/storage/upload'])
   @HttpCode(200)
   @UseInterceptors(UploadAllowedInterceptor, AnyFilesInterceptor())
-  async upload(@UploadedFiles() files: Array<FileType>, @Req() req: NcRequest) {
+  async upload(
+    @UploadedFiles() files: Array<FileType>,
+    @Query('scope') scope?: PublicAttachmentScope,
+    @Req() req: NcRequest,
+  ) {
     const attachments = await this.attachmentsService.upload({
       files: files,
       path: req.query?.path?.toString(),
       req,
+      scope,
     });
 
     return attachments;
@@ -59,12 +68,14 @@ export class AttachmentsController {
   async uploadViaURL(
     @Body() body: Array<AttachmentReqType>,
     @Query('path') path: string,
+    @Query('scope') scope?: PublicAttachmentScope,
     @Req() req: NcRequest,
   ) {
     const attachments = await this.attachmentsService.uploadViaURL({
       urls: body,
       path,
       req,
+      scope,
     });
 
     return attachments;
diff --git a/packages/nocodb/src/schema/swagger-v2.json b/packages/nocodb/src/schema/swagger-v2.json
index 10361023e0..6f3cefe642 100644
--- a/packages/nocodb/src/schema/swagger-v2.json
+++ b/packages/nocodb/src/schema/swagger-v2.json
@@ -11649,6 +11649,20 @@
           },
           {
             "$ref": "#/components/parameters/xc-token"
+          },
+          {
+            "schema": {
+              "enum": [
+                "workspacePics",
+                "profilePics",
+                "organizationPics"
+              ],
+              "type": "string",
+              "example": "workspacePics"
+            },
+            "name": "scope",
+            "in": "query",
+            "description": "The scope of the attachment"
           }
         ],
         "description": "Upload attachment"
@@ -11688,6 +11702,20 @@
           },
           {
             "$ref": "#/components/parameters/xc-token"
+          },
+          {
+            "schema": {
+              "enum": [
+                "workspacePics",
+                "profilePics",
+                "organizationPics"
+              ],
+              "type": "string",
+              "example": "workspacePics"
+            },
+            "name": "scope",
+            "in": "query",
+            "description": "The scope of the attachment"
           }
         ],
         "description": "Upload attachment by URL. Used in Airtable Migration."
diff --git a/packages/nocodb/src/schema/swagger.json b/packages/nocodb/src/schema/swagger.json
index 9ffb311355..967186d1b1 100644
--- a/packages/nocodb/src/schema/swagger.json
+++ b/packages/nocodb/src/schema/swagger.json
@@ -16417,6 +16417,20 @@
           },
           {
             "$ref": "#/components/parameters/xc-auth"
+          },
+          {
+            "schema": {
+              "enum": [
+                "workspacePics",
+                "profilePics",
+                "organizationPics"
+              ],
+              "type": "string",
+              "example": "workspacePics"
+            },
+            "name": "scope",
+            "in": "query",
+            "description": "The scope of the attachment"
           }
         ],
         "description": "Upload attachment"
@@ -16454,6 +16468,20 @@
           },
           {
             "$ref": "#/components/parameters/xc-auth"
+          },
+          {
+            "schema": {
+              "enum": [
+                "workspacePics",
+                "profilePics",
+                "organizationPics"
+              ],
+              "type": "string",
+              "example": "workspacePics"
+            },
+            "name": "scope",
+            "in": "query",
+            "description": "The scope of the attachment"
           }
         ],
         "description": "Upload attachment by URL. Used in Airtable Migration."
diff --git a/packages/nocodb/src/services/attachments.service.ts b/packages/nocodb/src/services/attachments.service.ts
index 3d999c287a..ec303366a9 100644
--- a/packages/nocodb/src/services/attachments.service.ts
+++ b/packages/nocodb/src/services/attachments.service.ts
@@ -1,6 +1,6 @@
 import path from 'path';
 import Url from 'url';
-import { AppEvents } from 'nocodb-sdk';
+import { AppEvents, PublicAttachmentScope } from 'nocodb-sdk';
 import { forwardRef, Inject, Injectable, Logger } from '@nestjs/common';
 import { nanoid } from 'nanoid';
 import mime from 'mime/lite';
@@ -52,17 +52,27 @@ export class AttachmentsService {
     private readonly jobsService: IJobsService,
   ) {}
 
-  async upload(param: { files: FileType[]; req?: NcRequest; path?: string }) {
+  async upload(param: {
+    files: FileType[];
+    req?: NcRequest;
+    path?: string;
+    scope?: PublicAttachmentScope;
+  }) {
     const userId = param.req?.user.id || 'anonymous';
 
-    param.path =
-      param.path || `${moment().format('YYYY/MM/DD')}/${hash(userId)}`;
+    param.path = param.scope
+      ? `${hash(userId)}`
+      : param.path || `${moment().format('YYYY/MM/DD')}/${hash(userId)}`;
 
     // TODO: add getAjvValidatorMw
     const filePath = this.sanitizeUrlPath(
       param.path?.toString()?.split('/') || [''],
     );
-    const destPath = path.join('nc', 'uploads', ...filePath);
+    const _destPath = path.join(
+      'nc',
+      param.scope ? param.scope : 'uploads',
+      ...filePath,
+    );
 
     const storageAdapter = await NcPluginMgrv2.storageAdapter();
 
@@ -79,10 +89,18 @@ export class AttachmentsService {
     queue.addAll(
       param.files?.map((file) => async () => {
         try {
+          const destPath = param.scope
+            ? path.join(_destPath, `${nanoid(5)}`)
+            : _destPath;
+
           const originalName = utf8ify(file.originalname);
-          const fileName = `${normalizeFilename(
-            path.parse(originalName).name,
-          )}_${nanoid(5)}${path.extname(originalName)}`;
+          const fileName = param.scope
+            ? `${normalizeFilename(
+                path.parse(originalName).name,
+              )}${path.extname(originalName)}`
+            : `${normalizeFilename(path.parse(originalName).name)}_${nanoid(
+                5,
+              )}${path.extname(originalName)}`;
 
           const tempMetadata: {
             width?: number;
@@ -186,16 +204,23 @@ export class AttachmentsService {
     urls: AttachmentReqType[];
     req?: NcRequest;
     path?: string;
+    scope?: PublicAttachmentScope;
   }) {
     const userId = param.req?.user.id || 'anonymous';
 
-    param.path =
-      param.path || `${moment().format('YYYY/MM/DD')}/${hash(userId)}`;
+    param.path = param.scope
+      ? `${hash(userId)}`
+      : param.path || `${moment().format('YYYY/MM/DD')}/${hash(userId)}`;
 
     const filePath = this.sanitizeUrlPath(
       param?.path?.toString()?.split('/') || [''],
     );
-    const destPath = path.join('nc', 'uploads', ...filePath);
+
+    const _destPath = path.join(
+      'nc',
+      param.scope ? param.scope : 'uploads',
+      ...filePath,
+    );
 
     const storageAdapter = await NcPluginMgrv2.storageAdapter();
 
@@ -214,6 +239,10 @@ export class AttachmentsService {
         try {
           const { url, fileName: _fileName } = urlMeta;
 
+          const destPath = param.scope
+            ? path.join(_destPath, `${nanoid(5)}`)
+            : _destPath;
+
           let mimeType,
             response,
             size,
@@ -230,9 +259,13 @@ export class AttachmentsService {
           const decodedPath = decodeURIComponent(parsedUrl.pathname);
           const fileNameWithExt = _fileName || path.basename(decodedPath);
 
-          const fileName = `${normalizeFilename(
-            path.parse(fileNameWithExt).name,
-          )}_${nanoid(5)}${path.extname(fileNameWithExt)}`;
+          const fileName = param.scope
+            ? `${normalizeFilename(
+                path.parse(fileNameWithExt).name,
+              )}${path.extname(fileNameWithExt)}`
+            : `${normalizeFilename(path.parse(fileNameWithExt).name)}_${nanoid(
+                5,
+              )}${path.extname(fileNameWithExt)}`;
 
           if (!mimeType) {
             mimeType = mime.getType(path.extname(fileNameWithExt).slice(1));

From b9afd0ba509901043d8ba22961a67f6ca80780a7 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 20 Nov 2024 17:11:14 +0000
Subject: [PATCH 11/31] fix(nocodb): validate attachment upload scope

---
 packages/nocodb-sdk/src/lib/globals.ts           |  1 +
 packages/nocodb/src/helpers/catchError.ts        |  8 ++++++++
 .../nocodb/src/services/attachments.service.ts   | 16 ++++++++++++++++
 3 files changed, 25 insertions(+)

diff --git a/packages/nocodb-sdk/src/lib/globals.ts b/packages/nocodb-sdk/src/lib/globals.ts
index eac60a9f6c..19551e4d19 100644
--- a/packages/nocodb-sdk/src/lib/globals.ts
+++ b/packages/nocodb-sdk/src/lib/globals.ts
@@ -218,6 +218,7 @@ export enum NcErrorType {
   INTEGRATION_LINKED_WITH_BASES = 'INTEGRATION_LINKED_WITH_BASES',
   FORMULA_ERROR = 'FORMULA_ERROR',
   PERMISSION_DENIED = 'PERMISSION_DENIED',
+  INVALID_ATTACHMENT_UPLOAD_SCOPE = 'INVALID_ATTACHMENT_UPLOAD_SCOPE',
 }
 
 type Roles = OrgUserRoles | ProjectRoles | WorkspaceUserRoles;
diff --git a/packages/nocodb/src/helpers/catchError.ts b/packages/nocodb/src/helpers/catchError.ts
index 09dd16d02f..e2e652969e 100644
--- a/packages/nocodb/src/helpers/catchError.ts
+++ b/packages/nocodb/src/helpers/catchError.ts
@@ -661,6 +661,10 @@ const errorHelpers: {
     message: 'Permission denied',
     code: 403,
   },
+  [NcErrorType.INVALID_ATTACHMENT_UPLOAD_SCOPE]: {
+    message: 'Invalid attachment upload scope',
+    code: 400,
+  },
 };
 
 function generateError(
@@ -1019,4 +1023,8 @@ export class NcError {
       ...(args || {}),
     });
   }
+
+  static invalidAttachmentUploadScope(args?: NcErrorArgs) {
+    throw new NcBaseErrorv2(NcErrorType.INVALID_ATTACHMENT_UPLOAD_SCOPE, args);
+  }
 }
diff --git a/packages/nocodb/src/services/attachments.service.ts b/packages/nocodb/src/services/attachments.service.ts
index ec303366a9..0dfe1db816 100644
--- a/packages/nocodb/src/services/attachments.service.ts
+++ b/packages/nocodb/src/services/attachments.service.ts
@@ -58,6 +58,14 @@ export class AttachmentsService {
     path?: string;
     scope?: PublicAttachmentScope;
   }) {
+    // Validate scope if exist
+    if (
+      param.scope &&
+      !Object.values(PublicAttachmentScope).includes(param.scope)
+    ) {
+      NcError.invalidAttachmentUploadScope();
+    }
+
     const userId = param.req?.user.id || 'anonymous';
 
     param.path = param.scope
@@ -206,6 +214,14 @@ export class AttachmentsService {
     path?: string;
     scope?: PublicAttachmentScope;
   }) {
+    // Validate scope if exist
+    if (
+      param.scope &&
+      !Object.values(PublicAttachmentScope).includes(param.scope)
+    ) {
+      NcError.invalidAttachmentUploadScope();
+    }
+
     const userId = param.req?.user.id || 'anonymous';
 
     param.path = param.scope

From 7429b3819cc472547d4dd44dced72696e26463c7 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 20 Nov 2024 17:11:14 +0000
Subject: [PATCH 12/31] fix(nocodb): build issue

---
 .../nocodb/src/controllers/attachments-secure.controller.ts   | 4 ++--
 packages/nocodb/src/controllers/attachments.controller.ts     | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/nocodb/src/controllers/attachments-secure.controller.ts b/packages/nocodb/src/controllers/attachments-secure.controller.ts
index 1aec7f2803..997e775663 100644
--- a/packages/nocodb/src/controllers/attachments-secure.controller.ts
+++ b/packages/nocodb/src/controllers/attachments-secure.controller.ts
@@ -47,7 +47,7 @@ export class AttachmentsSecureController {
   @UseInterceptors(UploadAllowedInterceptor, AnyFilesInterceptor())
   async upload(
     @UploadedFiles() files: Array<FileType>,
-    @Query('scope') scope?: PublicAttachmentScope,
+    @Query('scope') scope: PublicAttachmentScope,
     @Req() req: NcRequest & { user: { id: string } },
   ) {
     const attachments = await this.attachmentsService.upload({
@@ -65,7 +65,7 @@ export class AttachmentsSecureController {
   @UseGuards(MetaApiLimiterGuard, GlobalGuard)
   async uploadViaURL(
     @Body() body: Array<AttachmentReqType>,
-    @Query('scope') scope?: PublicAttachmentScope,
+    @Query('scope') scope: PublicAttachmentScope,
     @Req() req: NcRequest & { user: { id: string } },
   ) {
     const attachments = await this.attachmentsService.uploadViaURL({
diff --git a/packages/nocodb/src/controllers/attachments.controller.ts b/packages/nocodb/src/controllers/attachments.controller.ts
index 96aefe533d..6ddc67e1cb 100644
--- a/packages/nocodb/src/controllers/attachments.controller.ts
+++ b/packages/nocodb/src/controllers/attachments.controller.ts
@@ -48,7 +48,7 @@ export class AttachmentsController {
   @UseInterceptors(UploadAllowedInterceptor, AnyFilesInterceptor())
   async upload(
     @UploadedFiles() files: Array<FileType>,
-    @Query('scope') scope?: PublicAttachmentScope,
+    @Query('scope') scope: PublicAttachmentScope,
     @Req() req: NcRequest,
   ) {
     const attachments = await this.attachmentsService.upload({
@@ -68,7 +68,7 @@ export class AttachmentsController {
   async uploadViaURL(
     @Body() body: Array<AttachmentReqType>,
     @Query('path') path: string,
-    @Query('scope') scope?: PublicAttachmentScope,
+    @Query('scope') scope: PublicAttachmentScope,
     @Req() req: NcRequest,
   ) {
     const attachments = await this.attachmentsService.uploadViaURL({

From 08cbfd5c727412ca21c5664f48eaf878b29bde1d Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 20 Nov 2024 17:11:14 +0000
Subject: [PATCH 13/31] fix(nocodb): thumbnail generate issue on new public
 path scope

---
 packages/nc-gui/components/general/ImageCropper.vue   |  4 +++-
 .../components/general/WorkspaceIconSelector.vue      |  2 ++
 packages/nocodb/src/interface/Jobs.ts                 |  3 ++-
 .../thumbnail-generator.processor.ts                  | 11 +++++++----
 packages/nocodb/src/services/attachments.service.ts   |  2 ++
 5 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/components/general/ImageCropper.vue b/packages/nc-gui/components/general/ImageCropper.vue
index 751f96aaae..2c62d9263b 100644
--- a/packages/nc-gui/components/general/ImageCropper.vue
+++ b/packages/nc-gui/components/general/ImageCropper.vue
@@ -2,7 +2,7 @@
 import { Cropper } from 'vue-advanced-cropper'
 import 'vue-advanced-cropper/dist/style.css'
 import 'vue-advanced-cropper/dist/theme.classic.css'
-import type { AttachmentReqType } from 'nocodb-sdk'
+import type { AttachmentReqType, PublicAttachmentScope } from 'nocodb-sdk'
 import type { ImageCropperConfig } from '#imports'
 
 interface Props {
@@ -14,6 +14,7 @@ interface Props {
   cropperConfig: ImageCropperConfig
   uploadConfig?: {
     path?: string
+    scope?: PublicAttachmentScope
   }
   showCropper: boolean
 }
@@ -47,6 +48,7 @@ const handleUploadImage = async (fileToUpload: AttachmentReqType[]) => {
       const uploadResult = await api.storage.uploadByUrl(
         {
           path: uploadConfig?.path as string,
+          scope: uploadConfig?.scope,
         },
         fileToUpload,
       )
diff --git a/packages/nc-gui/components/general/WorkspaceIconSelector.vue b/packages/nc-gui/components/general/WorkspaceIconSelector.vue
index 2e49194d41..589dcca27e 100644
--- a/packages/nc-gui/components/general/WorkspaceIconSelector.vue
+++ b/packages/nc-gui/components/general/WorkspaceIconSelector.vue
@@ -5,6 +5,7 @@ import data from 'emoji-mart-vue-fast/data/apple.json'
 import { EmojiIndex, Picker } from 'emoji-mart-vue-fast/src'
 import { WorkspaceIconType } from '#imports'
 import 'emoji-mart-vue-fast/css/emoji-mart.css'
+import { PublicAttachmentScope } from 'nocodb-sdk'
 
 interface Props {
   icon: string | Record<string, any>
@@ -104,6 +105,7 @@ const imageCropperData = ref({
   },
   uploadConfig: {
     path: [NOCO, 'workspace', currentWorkspace.value?.id, 'icon'].join('/'),
+    scope: PublicAttachmentScope.WORKSPACEPICS,
   },
 })
 
diff --git a/packages/nocodb/src/interface/Jobs.ts b/packages/nocodb/src/interface/Jobs.ts
index 5d11905b8c..f258ab4985 100644
--- a/packages/nocodb/src/interface/Jobs.ts
+++ b/packages/nocodb/src/interface/Jobs.ts
@@ -1,4 +1,4 @@
-import type { AttachmentResType, UserType } from 'nocodb-sdk';
+import type { AttachmentResType, PublicAttachmentScope, UserType } from 'nocodb-sdk';
 import type { NcContext, NcRequest } from '~/interface/config';
 export const JOBS_QUEUE = 'jobs';
 
@@ -161,4 +161,5 @@ export interface DataExportJobData extends JobData {
 
 export interface ThumbnailGeneratorJobData extends JobData {
   attachments: AttachmentResType[];
+  scope?: PublicAttachmentScope;
 }
diff --git a/packages/nocodb/src/modules/jobs/jobs/thumbnail-generator/thumbnail-generator.processor.ts b/packages/nocodb/src/modules/jobs/jobs/thumbnail-generator/thumbnail-generator.processor.ts
index 1f1232815d..5206837850 100644
--- a/packages/nocodb/src/modules/jobs/jobs/thumbnail-generator/thumbnail-generator.processor.ts
+++ b/packages/nocodb/src/modules/jobs/jobs/thumbnail-generator/thumbnail-generator.processor.ts
@@ -4,7 +4,7 @@ import { Logger } from '@nestjs/common';
 import slash from 'slash';
 import type { IStorageAdapterV2 } from '~/types/nc-plugin';
 import type { Job } from 'bull';
-import type { AttachmentResType } from 'nocodb-sdk';
+import type { AttachmentResType, PublicAttachmentScope } from 'nocodb-sdk';
 import type { ThumbnailGeneratorJobData } from '~/interface/Jobs';
 import NcPluginMgrv2 from '~/helpers/NcPluginMgrv2';
 import { getPathFromUrl } from '~/helpers/attachmentHelpers';
@@ -14,12 +14,12 @@ export class ThumbnailGeneratorProcessor {
   private logger = new Logger(ThumbnailGeneratorProcessor.name);
 
   async job(job: Job<ThumbnailGeneratorJobData>) {
-    const { attachments } = job.data;
+    const { attachments, scope } = job.data;
 
     const results = [];
 
     for (const attachment of attachments) {
-      const thumbnail = await this.generateThumbnail(attachment);
+      const thumbnail = await this.generateThumbnail(attachment, scope);
 
       if (!thumbnail) {
         continue;
@@ -38,6 +38,7 @@ export class ThumbnailGeneratorProcessor {
 
   private async generateThumbnail(
     attachment: AttachmentResType,
+    scope?: PublicAttachmentScope,
   ): Promise<{ [key: string]: string }> {
     const sharp = Noco.sharp;
 
@@ -53,6 +54,7 @@ export class ThumbnailGeneratorProcessor {
       const { file, relativePath } = await this.getFileData(
         attachment,
         storageAdapter,
+        scope,
       );
 
       const thumbnailPaths = {
@@ -119,13 +121,14 @@ export class ThumbnailGeneratorProcessor {
   private async getFileData(
     attachment: AttachmentResType,
     storageAdapter: IStorageAdapterV2,
+    scope?: PublicAttachmentScope,
   ): Promise<{ file: Buffer; relativePath: string }> {
     let relativePath;
 
     if (attachment.path) {
       relativePath = path.join(
         'nc',
-        'uploads',
+        scope ? scope : 'uploads',
         attachment.path.replace(/^download[/\\]/i, ''),
       );
     } else if (attachment.url) {
diff --git a/packages/nocodb/src/services/attachments.service.ts b/packages/nocodb/src/services/attachments.service.ts
index 0dfe1db816..48dbcc1f53 100644
--- a/packages/nocodb/src/services/attachments.service.ts
+++ b/packages/nocodb/src/services/attachments.service.ts
@@ -196,6 +196,7 @@ export class AttachmentsService {
           workspace_id: RootScopes.ROOT,
         },
         attachments: generateThumbnail,
+        scope: param.scope,
       });
     }
 
@@ -380,6 +381,7 @@ export class AttachmentsService {
           workspace_id: RootScopes.ROOT,
         },
         attachments: generateThumbnail,
+        scope: param.scope,
       });
     }
 

From c7f68fd187fbb0e51fe3768ee61aeaa7fdd3ca84 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 20 Nov 2024 17:11:14 +0000
Subject: [PATCH 14/31] fix(nocodb): update filepath

---
 .../src/services/attachments.service.ts       | 26 ++++++++++++++-----
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/packages/nocodb/src/services/attachments.service.ts b/packages/nocodb/src/services/attachments.service.ts
index 48dbcc1f53..967944e6f4 100644
--- a/packages/nocodb/src/services/attachments.service.ts
+++ b/packages/nocodb/src/services/attachments.service.ts
@@ -73,13 +73,13 @@ export class AttachmentsService {
       : param.path || `${moment().format('YYYY/MM/DD')}/${hash(userId)}`;
 
     // TODO: add getAjvValidatorMw
-    const filePath = this.sanitizeUrlPath(
+    const _filePath = this.sanitizeUrlPath(
       param.path?.toString()?.split('/') || [''],
     );
     const _destPath = path.join(
       'nc',
       param.scope ? param.scope : 'uploads',
-      ...filePath,
+      ..._filePath,
     );
 
     const storageAdapter = await NcPluginMgrv2.storageAdapter();
@@ -97,8 +97,15 @@ export class AttachmentsService {
     queue.addAll(
       param.files?.map((file) => async () => {
         try {
+          const nanoId = nanoid(5);
+
+          const filePath = this.sanitizeUrlPath([
+            ...(param?.path?.toString()?.split('/') || ['']),
+            ...(param.scope ? [nanoId] : []),
+          ]);
+
           const destPath = param.scope
-            ? path.join(_destPath, `${nanoid(5)}`)
+            ? path.join(_destPath, `${nanoId}`)
             : _destPath;
 
           const originalName = utf8ify(file.originalname);
@@ -229,14 +236,14 @@ export class AttachmentsService {
       ? `${hash(userId)}`
       : param.path || `${moment().format('YYYY/MM/DD')}/${hash(userId)}`;
 
-    const filePath = this.sanitizeUrlPath(
+    const _filePath = this.sanitizeUrlPath(
       param?.path?.toString()?.split('/') || [''],
     );
 
     const _destPath = path.join(
       'nc',
       param.scope ? param.scope : 'uploads',
-      ...filePath,
+      ..._filePath,
     );
 
     const storageAdapter = await NcPluginMgrv2.storageAdapter();
@@ -256,8 +263,15 @@ export class AttachmentsService {
         try {
           const { url, fileName: _fileName } = urlMeta;
 
+          const nanoId = nanoid(5);
+
+          const filePath = this.sanitizeUrlPath([
+            ...(param?.path?.toString()?.split('/') || ['']),
+            ...(param.scope ? [nanoId] : []),
+          ]);
+
           const destPath = param.scope
-            ? path.join(_destPath, `${nanoid(5)}`)
+            ? path.join(_destPath, `${nanoId}`)
             : _destPath;
 
           let mimeType,

From f43692ec25ba914fb18af8d4ddfbee4e6f6e098c Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 20 Nov 2024 17:11:14 +0000
Subject: [PATCH 15/31] fix(nc-gui): keep same image type after cropping it

---
 packages/nc-gui/components/general/ImageCropper.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/general/ImageCropper.vue b/packages/nc-gui/components/general/ImageCropper.vue
index 2c62d9263b..4eacd21852 100644
--- a/packages/nc-gui/components/general/ImageCropper.vue
+++ b/packages/nc-gui/components/general/ImageCropper.vue
@@ -25,6 +25,10 @@ const showCropper = useVModel(props, 'showCropper', emit)
 
 const { cropperConfig } = toRefs(props)
 
+const imageRestriction = computed(() => {
+  return cropperConfig.value.imageRestriction || 'fit-area'
+})
+
 const { api, isLoading } = useApi()
 
 const cropperRef = ref()
@@ -38,7 +42,7 @@ const handleCropImage = () => {
   const { canvas } = cropperRef.value.getResult()
   previewImage.value = {
     canvas,
-    src: canvas.toDataURL(),
+    src: canvas.toDataURL(imageConfig.type),
   }
 }
 
@@ -116,7 +120,7 @@ watch(showCropper, () => {
         :stencil-props="cropperConfig?.stencilProps || {}"
         :min-height="cropperConfig?.minHeight"
         :min-width="cropperConfig?.minWidth"
-        :image-restriction="cropperConfig?.imageRestriction"
+        :image-restriction="imageRestriction"
         v-bind="
           cropperConfig.stencilProps?.fillDefault || cropperConfig.stencilProps?.fillDefault === undefined ? { defaultSize } : {}
         "

From d6def567c921bb6d4a0307a17e6e0ae3a1a58630 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Wed, 20 Nov 2024 17:11:14 +0000
Subject: [PATCH 16/31] fix: public image handling

---
 .../attachments-secure.controller.ts          | 17 +++++++--------
 .../src/controllers/attachments.controller.ts | 21 +++++++++++--------
 .../nocodb/src/helpers/attachmentHelpers.ts   |  8 +++++++
 .../thumbnail-generator.processor.ts          |  2 +-
 .../src/services/attachments.service.ts       | 15 ++++++-------
 5 files changed, 37 insertions(+), 26 deletions(-)

diff --git a/packages/nocodb/src/controllers/attachments-secure.controller.ts b/packages/nocodb/src/controllers/attachments-secure.controller.ts
index 997e775663..b9a4e10ff9 100644
--- a/packages/nocodb/src/controllers/attachments-secure.controller.ts
+++ b/packages/nocodb/src/controllers/attachments-secure.controller.ts
@@ -15,11 +15,8 @@ import {
 } from '@nestjs/common';
 import { AnyFilesInterceptor } from '@nestjs/platform-express';
 import { Response } from 'express';
-import type {
-  AttachmentReqType,
-  FileType,
-  PublicAttachmentScope,
-} from 'nocodb-sdk';
+import { PublicAttachmentScope } from 'nocodb-sdk';
+import type { AttachmentReqType, FileType } from 'nocodb-sdk';
 import type { NcRequest } from '~/interface/config';
 import { NcContext } from '~/interface/config';
 import { GlobalGuard } from '~/guards/global/global.guard';
@@ -32,7 +29,7 @@ import { DataApiLimiterGuard } from '~/guards/data-api-limiter.guard';
 import { TenantContext } from '~/decorators/tenant-context.decorator';
 import { Acl } from '~/middlewares/extract-ids/extract-ids.middleware';
 import { NcError } from '~/helpers/catchError';
-import { localFileExists } from '~/helpers/attachmentHelpers';
+import { ATTACHMENT_ROOTS, localFileExists } from '~/helpers/attachmentHelpers';
 
 @Controller()
 export class AttachmentsSecureController {
@@ -47,8 +44,8 @@ export class AttachmentsSecureController {
   @UseInterceptors(UploadAllowedInterceptor, AnyFilesInterceptor())
   async upload(
     @UploadedFiles() files: Array<FileType>,
-    @Query('scope') scope: PublicAttachmentScope,
     @Req() req: NcRequest & { user: { id: string } },
+    @Query('scope') scope?: PublicAttachmentScope,
   ) {
     const attachments = await this.attachmentsService.upload({
       files: files,
@@ -65,8 +62,8 @@ export class AttachmentsSecureController {
   @UseGuards(MetaApiLimiterGuard, GlobalGuard)
   async uploadViaURL(
     @Body() body: Array<AttachmentReqType>,
-    @Query('scope') scope: PublicAttachmentScope,
     @Req() req: NcRequest & { user: { id: string } },
+    @Query('scope') scope?: PublicAttachmentScope,
   ) {
     const attachments = await this.attachmentsService.uploadViaURL({
       urls: body,
@@ -97,7 +94,9 @@ export class AttachmentsSecureController {
         );
       }
 
-      const filePath = param.split('/')[2] === 'thumbnails' ? '' : 'uploads';
+      const targetParam = param.split('/')[2];
+
+      const filePath = ATTACHMENT_ROOTS.includes(targetParam) ? '' : 'uploads';
 
       const file = await this.attachmentsService.getFile({
         path: path.join('nc', filePath, fpath),
diff --git a/packages/nocodb/src/controllers/attachments.controller.ts b/packages/nocodb/src/controllers/attachments.controller.ts
index 6ddc67e1cb..efbb55ead9 100644
--- a/packages/nocodb/src/controllers/attachments.controller.ts
+++ b/packages/nocodb/src/controllers/attachments.controller.ts
@@ -16,18 +16,19 @@ import {
 import { AnyFilesInterceptor } from '@nestjs/platform-express';
 import { Response } from 'express';
 import contentDisposition from 'content-disposition';
-import type {
-  AttachmentReqType,
-  FileType,
-  PublicAttachmentScope,
-} from 'nocodb-sdk';
+import { PublicAttachmentScope } from 'nocodb-sdk';
+import type { AttachmentReqType, FileType } from 'nocodb-sdk';
 import { UploadAllowedInterceptor } from '~/interceptors/is-upload-allowed/is-upload-allowed.interceptor';
 import { GlobalGuard } from '~/guards/global/global.guard';
 import { AttachmentsService } from '~/services/attachments.service';
 import { PresignedUrl } from '~/models';
 import { MetaApiLimiterGuard } from '~/guards/meta-api-limiter.guard';
 import { NcContext, NcRequest } from '~/interface/config';
-import { isPreviewAllowed, localFileExists } from '~/helpers/attachmentHelpers';
+import {
+  ATTACHMENT_ROOTS,
+  isPreviewAllowed,
+  localFileExists,
+} from '~/helpers/attachmentHelpers';
 import { DataTableService } from '~/services/data-table.service';
 import { TenantContext } from '~/decorators/tenant-context.decorator';
 import { DataApiLimiterGuard } from '~/guards/data-api-limiter.guard';
@@ -48,8 +49,8 @@ export class AttachmentsController {
   @UseInterceptors(UploadAllowedInterceptor, AnyFilesInterceptor())
   async upload(
     @UploadedFiles() files: Array<FileType>,
-    @Query('scope') scope: PublicAttachmentScope,
     @Req() req: NcRequest,
+    @Query('scope') scope?: PublicAttachmentScope,
   ) {
     const attachments = await this.attachmentsService.upload({
       files: files,
@@ -68,8 +69,8 @@ export class AttachmentsController {
   async uploadViaURL(
     @Body() body: Array<AttachmentReqType>,
     @Query('path') path: string,
-    @Query('scope') scope: PublicAttachmentScope,
     @Req() req: NcRequest,
+    @Query('scope') scope?: PublicAttachmentScope,
   ) {
     const attachments = await this.attachmentsService.uploadViaURL({
       urls: body,
@@ -176,7 +177,9 @@ export class AttachmentsController {
         );
       }
 
-      const filePath = param.split('/')[2] === 'thumbnails' ? '' : 'uploads';
+      const targetParam = param.split('/')[2];
+
+      const filePath = ATTACHMENT_ROOTS.includes(targetParam) ? '' : 'uploads';
 
       const file = await this.attachmentsService.getFile({
         path: path.join('nc', filePath, fpath),
diff --git a/packages/nocodb/src/helpers/attachmentHelpers.ts b/packages/nocodb/src/helpers/attachmentHelpers.ts
index 3f5c3d5496..c6773c13c6 100644
--- a/packages/nocodb/src/helpers/attachmentHelpers.ts
+++ b/packages/nocodb/src/helpers/attachmentHelpers.ts
@@ -2,6 +2,7 @@ import path from 'path';
 import fs from 'fs';
 import mime from 'mime/lite';
 import slash from 'slash';
+import { PublicAttachmentScope } from 'nocodb-sdk';
 import { getToolDir } from '~/utils/nc-config';
 import { NcError } from '~/helpers/catchError';
 
@@ -72,3 +73,10 @@ export const localFileExists = (path: string) => {
     .then(() => true)
     .catch(() => false);
 };
+
+export const ATTACHMENT_ROOTS = [
+  'thumbnails',
+  PublicAttachmentScope.WORKSPACEPICS,
+  PublicAttachmentScope.PROFILEPICS,
+  PublicAttachmentScope.ORGANIZATIONPICS,
+];
diff --git a/packages/nocodb/src/modules/jobs/jobs/thumbnail-generator/thumbnail-generator.processor.ts b/packages/nocodb/src/modules/jobs/jobs/thumbnail-generator/thumbnail-generator.processor.ts
index 5206837850..89d64da9e6 100644
--- a/packages/nocodb/src/modules/jobs/jobs/thumbnail-generator/thumbnail-generator.processor.ts
+++ b/packages/nocodb/src/modules/jobs/jobs/thumbnail-generator/thumbnail-generator.processor.ts
@@ -128,7 +128,7 @@ export class ThumbnailGeneratorProcessor {
     if (attachment.path) {
       relativePath = path.join(
         'nc',
-        scope ? scope : 'uploads',
+        scope ? '' : 'uploads',
         attachment.path.replace(/^download[/\\]/i, ''),
       );
     } else if (attachment.url) {
diff --git a/packages/nocodb/src/services/attachments.service.ts b/packages/nocodb/src/services/attachments.service.ts
index 967944e6f4..0d38d915a1 100644
--- a/packages/nocodb/src/services/attachments.service.ts
+++ b/packages/nocodb/src/services/attachments.service.ts
@@ -236,14 +236,14 @@ export class AttachmentsService {
       ? `${hash(userId)}`
       : param.path || `${moment().format('YYYY/MM/DD')}/${hash(userId)}`;
 
-    const _filePath = this.sanitizeUrlPath(
+    const filePath = this.sanitizeUrlPath(
       param?.path?.toString()?.split('/') || [''],
     );
 
-    const _destPath = path.join(
+    const destPath = path.join(
       'nc',
       param.scope ? param.scope : 'uploads',
-      ..._filePath,
+      ...filePath,
     );
 
     const storageAdapter = await NcPluginMgrv2.storageAdapter();
@@ -266,13 +266,14 @@ export class AttachmentsService {
           const nanoId = nanoid(5);
 
           const filePath = this.sanitizeUrlPath([
+            ...(param.scope ? [param.scope] : []),
             ...(param?.path?.toString()?.split('/') || ['']),
             ...(param.scope ? [nanoId] : []),
           ]);
 
-          const destPath = param.scope
-            ? path.join(_destPath, `${nanoId}`)
-            : _destPath;
+          const fileDestPath = param.scope
+            ? path.join(destPath, `${nanoId}`)
+            : destPath;
 
           let mimeType,
             response,
@@ -304,7 +305,7 @@ export class AttachmentsService {
 
           const { url: attachmentUrl, data: file } =
             await storageAdapter.fileCreateByUrl(
-              slash(path.join(destPath, fileName)),
+              slash(path.join(fileDestPath, fileName)),
               finalUrl,
               {
                 fetchOptions: {

From e75556c30d59b5fb5b012da0602016412402d611 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Wed, 20 Nov 2024 17:11:14 +0000
Subject: [PATCH 17/31] fix: handle data url using stream

---
 .../nocodb/src/plugins/GenericS3/GenericS3.ts |  5 +-
 packages/nocodb/src/plugins/storage/Local.ts  | 18 ++++++-
 .../src/services/attachments.service.ts       | 49 +++++++++++++++----
 .../types/nc-plugin/lib/IStorageAdapterV2.ts  |  8 ++-
 4 files changed, 66 insertions(+), 14 deletions(-)

diff --git a/packages/nocodb/src/plugins/GenericS3/GenericS3.ts b/packages/nocodb/src/plugins/GenericS3/GenericS3.ts
index 104f2d012f..42b0a914cc 100644
--- a/packages/nocodb/src/plugins/GenericS3/GenericS3.ts
+++ b/packages/nocodb/src/plugins/GenericS3/GenericS3.ts
@@ -104,7 +104,10 @@ export default class GenericS3 implements IStorageAdapterV2 {
     options?: {
       mimetype?: string;
     },
-  ): Promise<void> {
+  ): Promise<{
+    url: string | null;
+    data: any;
+  }> {
     try {
       const streamError = new Promise<void>((_, reject) => {
         stream.on('error', (err) => {
diff --git a/packages/nocodb/src/plugins/storage/Local.ts b/packages/nocodb/src/plugins/storage/Local.ts
index 8a874a2f08..b241fca390 100644
--- a/packages/nocodb/src/plugins/storage/Local.ts
+++ b/packages/nocodb/src/plugins/storage/Local.ts
@@ -70,13 +70,27 @@ export default class Local implements IStorageAdapterV2 {
   public async fileCreateByStream(
     key: string,
     stream: Readable,
-  ): Promise<void> {
+  ): Promise<{
+    url: string | null;
+    data: any;
+  }> {
     return new Promise((resolve, reject) => {
       const destPath = validateAndNormaliseLocalPath(key);
       try {
         mkdirp(path.dirname(destPath)).then(() => {
           const writableStream = fs.createWriteStream(destPath);
-          writableStream.on('finish', () => resolve());
+          writableStream.on('finish', () => {
+            this.fileRead(destPath)
+              .then((data) => {
+                resolve({
+                  url: null,
+                  data,
+                });
+              })
+              .catch((e) => {
+                reject(e);
+              });
+          });
           writableStream.on('error', (err) => reject(err));
           stream.pipe(writableStream);
         });
diff --git a/packages/nocodb/src/services/attachments.service.ts b/packages/nocodb/src/services/attachments.service.ts
index 0d38d915a1..69048969a4 100644
--- a/packages/nocodb/src/services/attachments.service.ts
+++ b/packages/nocodb/src/services/attachments.service.ts
@@ -1,5 +1,6 @@
 import path from 'path';
 import Url from 'url';
+import { Readable } from 'stream';
 import { AppEvents, PublicAttachmentScope } from 'nocodb-sdk';
 import { forwardRef, Inject, Injectable, Logger } from '@nestjs/common';
 import { nanoid } from 'nanoid';
@@ -280,11 +281,23 @@ export class AttachmentsService {
             size,
             finalUrl = url;
 
+          let base64TempStream: Readable;
+
           if (!url.startsWith('data:')) {
             response = await axios.head(url, { maxRedirects: 5 });
             mimeType = response.headers['content-type']?.split(';')[0];
             size = response.headers['content-length'];
             finalUrl = response.request.res.responseUrl;
+          } else {
+            const matches = url.match(/^data:(.+);base64,(.+)$/);
+            if (!matches) throw new Error('Invalid data URL format.');
+
+            // Extract MIME type and base64 data
+            const [, _mimeType, base64Data] = matches;
+
+            mimeType = _mimeType;
+            size = Buffer.byteLength(base64Data, 'base64');
+            base64TempStream = Readable.from(Buffer.from(base64Data, 'base64'));
           }
 
           const parsedUrl = Url.parse(finalUrl, true);
@@ -303,17 +316,33 @@ export class AttachmentsService {
             mimeType = mime.getType(path.extname(fileNameWithExt).slice(1));
           }
 
-          const { url: attachmentUrl, data: file } =
-            await storageAdapter.fileCreateByUrl(
-              slash(path.join(fileDestPath, fileName)),
-              finalUrl,
-              {
-                fetchOptions: {
-                  // The sharp requires image to be passed as buffer.);
-                  buffer: mimeType.includes('image'),
+          let attachmentUrl, file;
+
+          if (!base64TempStream) {
+            const { url: _attachmentUrl, data: _file } =
+              await storageAdapter.fileCreateByUrl(
+                slash(path.join(fileDestPath, fileName)),
+                finalUrl,
+                {
+                  fetchOptions: {
+                    // The sharp requires image to be passed as buffer.);
+                    buffer: mimeType.includes('image'),
+                  },
                 },
-              },
-            );
+              );
+
+            attachmentUrl = _attachmentUrl;
+            file = _file;
+          } else {
+            const { url: _attachmentUrl, data: _file } =
+              (await storageAdapter.fileCreateByStream(
+                slash(path.join(fileDestPath, fileName)),
+                base64TempStream,
+              )) as any;
+
+            attachmentUrl = _attachmentUrl;
+            file = _file;
+          }
 
           const tempMetadata: {
             width?: number;
diff --git a/packages/nocodb/src/types/nc-plugin/lib/IStorageAdapterV2.ts b/packages/nocodb/src/types/nc-plugin/lib/IStorageAdapterV2.ts
index eeb1f30392..74da138392 100644
--- a/packages/nocodb/src/types/nc-plugin/lib/IStorageAdapterV2.ts
+++ b/packages/nocodb/src/types/nc-plugin/lib/IStorageAdapterV2.ts
@@ -30,7 +30,13 @@ export default interface IStorageAdapterV2<
     url: string,
     options?: FileCreateByUrlOptions,
   ): Promise<any>;
-  fileCreateByStream(destPath: string, readStream: Readable): Promise<void>;
+  fileCreateByStream(
+    destPath: string,
+    readStream: Readable,
+  ): Promise<{
+    url: string | null;
+    data: any;
+  }>;
   fileReadByStream(
     key: string,
     options?: { encoding?: string },

From 8aca1eaac42bb1ed60d0eb6294ef8701bd054931 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 20 Nov 2024 17:11:14 +0000
Subject: [PATCH 18/31] fix: add file size limit validation

---
 .../components/general/ImageCropper.vue       | 41 +++++++++++++------
 .../general/WorkspaceIconSelector.vue         |  1 +
 .../src/services/attachments.service.ts       |  4 ++
 3 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui/components/general/ImageCropper.vue b/packages/nc-gui/components/general/ImageCropper.vue
index 4eacd21852..45023a2642 100644
--- a/packages/nc-gui/components/general/ImageCropper.vue
+++ b/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,
-          url: previewImage.value.src,
-          data: previewImage.value.src,
-        },
-      ])
-    }, imageConfig.type)
+    await handleUploadImage([
+      {
+        title: imageConfig.name,
+        fileName: imageConfig.name,
+        mimetype: imageConfig.type,
+        size: fileSize.value,
+        url: previewImage.value.src,
+        data: previewImage.value.src,
+      },
+    ])
   }
 }
 
@@ -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>
diff --git a/packages/nc-gui/components/general/WorkspaceIconSelector.vue b/packages/nc-gui/components/general/WorkspaceIconSelector.vue
index 589dcca27e..ff1490f50c 100644
--- a/packages/nc-gui/components/general/WorkspaceIconSelector.vue
+++ b/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
   },
 })
 
diff --git a/packages/nocodb/src/services/attachments.service.ts b/packages/nocodb/src/services/attachments.service.ts
index 69048969a4..a12b236180 100644
--- a/packages/nocodb/src/services/attachments.service.ts
+++ b/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.');
 

From 607fdc91561f0c9e782a1af8da52fdcb0ff4c914 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Wed, 20 Nov 2024 17:11:14 +0000
Subject: [PATCH 19/31] fix: avoid using regex for data url

---
 .../nocodb/src/services/attachments.service.ts | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/nocodb/src/services/attachments.service.ts b/packages/nocodb/src/services/attachments.service.ts
index a12b236180..e33b0a985d 100644
--- a/packages/nocodb/src/services/attachments.service.ts
+++ b/packages/nocodb/src/services/attachments.service.ts
@@ -289,17 +289,21 @@ 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');
+            if (!url.startsWith('data')) {
+              NcError.badRequest('Invalid data URL format');
             }
 
-            const matches = url.match(/^data:(.+);base64,(.+)$/);
-            if (!matches) throw new Error('Invalid data URL format.');
+            const [metadata, base64Data] = url.split(',');
 
-            // Extract MIME type and base64 data
-            const [, _mimeType, base64Data] = matches;
+            const metadataHelper = metadata.split(':');
 
-            mimeType = _mimeType;
+            if (metadataHelper.length < 2) {
+              NcError.badRequest('Invalid data URL format');
+            }
+
+            const mimetypeHelper = metadataHelper[1].split(';');
+
+            mimeType = mimetypeHelper[0];
             size = Buffer.byteLength(base64Data, 'base64');
             base64TempStream = Readable.from(Buffer.from(base64Data, 'base64'));
           }

From 579760cd792385cdbc80467660c8b3a7b6170665 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 20 Nov 2024 17:11:15 +0000
Subject: [PATCH 20/31] fix(nc-gui): remove hardcoded file size limit from
 image cropper file

---
 packages/nc-gui/components/general/ImageCropper.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/general/ImageCropper.vue b/packages/nc-gui/components/general/ImageCropper.vue
index 45023a2642..00f97fc65d 100644
--- a/packages/nc-gui/components/general/ImageCropper.vue
+++ b/packages/nc-gui/components/general/ImageCropper.vue
@@ -43,7 +43,7 @@ const previewImage = ref({
 const fileSize = ref<number>(0)
 
 const isValidFileSize = computed(() => {
-  return !!(fileSize.value && fileSize.value * 1.33 <= (uploadConfig?.maxFileSize || 3 * 1024 * 1024))
+  return uploadConfig?.maxFileSize ? fileSize.value && fileSize.value <= uploadConfig?.maxFileSize : true
 })
 
 const handleCropImage = () => {

From 9d6ca112297e4dcc83fd2585dbbf2fca2ba674f2 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 20 Nov 2024 17:11:15 +0000
Subject: [PATCH 21/31] fix(nc-gui): cursor issue on workspace image

---
 .../nc-gui/components/general/WorkspaceIconSelector.vue   | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/general/WorkspaceIconSelector.vue b/packages/nc-gui/components/general/WorkspaceIconSelector.vue
index ff1490f50c..4c28c8a26f 100644
--- a/packages/nc-gui/components/general/WorkspaceIconSelector.vue
+++ b/packages/nc-gui/components/general/WorkspaceIconSelector.vue
@@ -106,7 +106,7 @@ const imageCropperData = ref({
   uploadConfig: {
     path: [NOCO, 'workspace', currentWorkspace.value?.id, 'icon'].join('/'),
     scope: PublicAttachmentScope.WORKSPACEPICS,
-    maxFileSize: 2 * 1024 * 1024
+    maxFileSize: 2 * 1024 * 1024,
   },
 })
 
@@ -253,7 +253,7 @@ watch(isOpen, (newValue) => {
             iconType: vIconType,
           }"
           size="xlarge"
-          class="!w-full !h-full !min-w-full rounded-none select-none"
+          class="!w-full !h-full !min-w-full rounded-none select-none cursor-pointer"
         />
       </div>
       <template #overlay>
@@ -453,6 +453,10 @@ watch(isOpen, (newValue) => {
 :deep(.ant-input::placeholder) {
   @apply text-gray-500;
 }
+
+:deep(.nc-workspace-avatar img) {
+  @apply !cursor-pointer;
+}
 </style>
 
 <style>

From 8c2e01e9bfed89d47def0f7c279e2f7ca84a8c2b Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 20 Nov 2024 17:11:15 +0000
Subject: [PATCH 22/31] fix(nc-gui): auto save workspace icon

---
 .../nc-gui/components/general/WorkspaceIconSelector.vue   | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/general/WorkspaceIconSelector.vue b/packages/nc-gui/components/general/WorkspaceIconSelector.vue
index 4c28c8a26f..85859b09f6 100644
--- a/packages/nc-gui/components/general/WorkspaceIconSelector.vue
+++ b/packages/nc-gui/components/general/WorkspaceIconSelector.vue
@@ -15,7 +15,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {})
 
-const emits = defineEmits(['update:icon', 'update:iconType'])
+const emits = defineEmits(['update:icon', 'update:iconType', 'submit'])
 
 const { currentWorkspace } = toRefs(props)
 
@@ -58,6 +58,8 @@ const selectIcon = (icon: string) => {
   vIcon.value = icon
   vIconType.value = WorkspaceIconType.ICON
 
+  emits('submit')
+
   isOpen.value = false
 }
 
@@ -84,6 +86,8 @@ function selectEmoji(_emoji: any) {
   vIcon.value = _emoji.native
   vIconType.value = WorkspaceIconType.EMOJI
 
+  emits('submit')
+
   isOpen.value = false
 }
 
@@ -114,6 +118,8 @@ const handleOnUploadImage = async (data: any) => {
   vIcon.value = data
   vIconType.value = WorkspaceIconType.IMAGE
 
+  emits('submit')
+
   isOpen.value = false
 }
 

From 0db906b297a43c10fa13abf4f65771baaa631865 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 20 Nov 2024 17:11:15 +0000
Subject: [PATCH 23/31] chore(nc-gui): lint

---
 packages/nc-gui/lib/enums.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/nc-gui/lib/enums.ts b/packages/nc-gui/lib/enums.ts
index 366884de03..e5f822674d 100644
--- a/packages/nc-gui/lib/enums.ts
+++ b/packages/nc-gui/lib/enums.ts
@@ -180,3 +180,10 @@ export enum ExtensionsEvents {
 export enum IntegrationStoreEvents {
   INTEGRATION_ADD = 'integration-add',
 }
+
+
+export enum WorkspaceIconType {
+  IMAGE = 'IMAGE',
+  EMOJI = 'EMOJI',
+  ICON = 'ICON',
+}
\ No newline at end of file

From 6fcaeda8b1e136b6cc4cd84ed9e06ef0709c3fcb Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 20 Nov 2024 17:11:15 +0000
Subject: [PATCH 24/31] fix(test): workspace crum op test fails issue

---
 tests/playwright/pages/Dashboard/WorkspaceSettings/index.ts  | 2 +-
 tests/playwright/pages/Dashboard/common/LeftSidebar/index.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/playwright/pages/Dashboard/WorkspaceSettings/index.ts b/tests/playwright/pages/Dashboard/WorkspaceSettings/index.ts
index 2f5f81a5a2..5710722181 100644
--- a/tests/playwright/pages/Dashboard/WorkspaceSettings/index.ts
+++ b/tests/playwright/pages/Dashboard/WorkspaceSettings/index.ts
@@ -25,7 +25,7 @@ export class WorkspaceSettingsObject extends BasePage {
   async renameWorkspace({ newTitle }: { newTitle: string }) {
     await this.clickSettingsTab();
     await this.get().getByTestId('nc-workspace-settings-settings-rename-input').fill(newTitle);
-    const submitAction = () => this.get().getByTestId('nc-workspace-settings-settings-rename-submit').click();
+    const submitAction = () => this.rootPage.keyboard.press('Enter');
 
     await this.waitForResponse({
       uiAction: submitAction,
diff --git a/tests/playwright/pages/Dashboard/common/LeftSidebar/index.ts b/tests/playwright/pages/Dashboard/common/LeftSidebar/index.ts
index bffd241807..8e5427848b 100644
--- a/tests/playwright/pages/Dashboard/common/LeftSidebar/index.ts
+++ b/tests/playwright/pages/Dashboard/common/LeftSidebar/index.ts
@@ -85,7 +85,7 @@ export class LeftSidebarPage extends BasePage {
     await this.clickWorkspace();
 
     // TODO: THere is one extra html attribute
-    await expect(this.rootPage.getByTestId('nc-workspace-list')).toHaveCount(count + 1);
+    await expect(this.modal_workspace.getByTestId('nc-workspace-list')).toHaveCount(count + 1);
   }
 
   async getWorkspaceList() {

From d826fd38d44dc95ed16e39e5bda087a807475709 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 20 Nov 2024 17:11:15 +0000
Subject: [PATCH 25/31] test(pw): revert verifyWorkspaceCount changes

---
 tests/playwright/pages/Dashboard/common/LeftSidebar/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/playwright/pages/Dashboard/common/LeftSidebar/index.ts b/tests/playwright/pages/Dashboard/common/LeftSidebar/index.ts
index 8e5427848b..bffd241807 100644
--- a/tests/playwright/pages/Dashboard/common/LeftSidebar/index.ts
+++ b/tests/playwright/pages/Dashboard/common/LeftSidebar/index.ts
@@ -85,7 +85,7 @@ export class LeftSidebarPage extends BasePage {
     await this.clickWorkspace();
 
     // TODO: THere is one extra html attribute
-    await expect(this.modal_workspace.getByTestId('nc-workspace-list')).toHaveCount(count + 1);
+    await expect(this.rootPage.getByTestId('nc-workspace-list')).toHaveCount(count + 1);
   }
 
   async getWorkspaceList() {

From ec2ddcc8e5e8d00b3db2234932efa8c45efa0846 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 20 Nov 2024 17:11:15 +0000
Subject: [PATCH 26/31] fix(nocodb): extract url from uploadFilePromise

---
 .../src/modules/jobs/jobs/data-export/data-export.processor.ts  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nocodb/src/modules/jobs/jobs/data-export/data-export.processor.ts b/packages/nocodb/src/modules/jobs/jobs/data-export/data-export.processor.ts
index 18801ded6a..b23fc585fc 100644
--- a/packages/nocodb/src/modules/jobs/jobs/data-export/data-export.processor.ts
+++ b/packages/nocodb/src/modules/jobs/jobs/data-export/data-export.processor.ts
@@ -86,7 +86,7 @@ export class DataExportProcessor {
           error = e;
         });
 
-      url = await uploadFilePromise;
+      url = (await uploadFilePromise)?.url;
 
       // if url is not defined, it is local attachment
       if (!url) {

From 893ee9c93494b5e37f30805703afdba467d9e3eb Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 20 Nov 2024 17:11:15 +0000
Subject: [PATCH 27/31] chore(nc-gui): lint

---
 packages/nc-gui/lib/enums.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/nc-gui/lib/enums.ts b/packages/nc-gui/lib/enums.ts
index e5f822674d..32b2374a6d 100644
--- a/packages/nc-gui/lib/enums.ts
+++ b/packages/nc-gui/lib/enums.ts
@@ -181,9 +181,8 @@ export enum IntegrationStoreEvents {
   INTEGRATION_ADD = 'integration-add',
 }
 
-
 export enum WorkspaceIconType {
   IMAGE = 'IMAGE',
   EMOJI = 'EMOJI',
   ICON = 'ICON',
-}
\ No newline at end of file
+}

From 5e40da1d3275f50178cf54d6996842f84cc69e06 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 20 Nov 2024 17:11:15 +0000
Subject: [PATCH 28/31] fix(nc-gui): workspace icon tab theme issue

---
 packages/nc-gui/components/general/WorkspaceIconSelector.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/general/WorkspaceIconSelector.vue b/packages/nc-gui/components/general/WorkspaceIconSelector.vue
index 85859b09f6..f5d4bd2b45 100644
--- a/packages/nc-gui/components/general/WorkspaceIconSelector.vue
+++ b/packages/nc-gui/components/general/WorkspaceIconSelector.vue
@@ -264,7 +264,7 @@ watch(isOpen, (newValue) => {
       </div>
       <template #overlay>
         <div class="pt-2 h-[320px]">
-          <NcTabs v-model:activeKey="activeTab" theme="ai" class="nc-workspace-icon-dropdown-tabs h-full">
+          <NcTabs v-model:activeKey="activeTab" class="nc-workspace-icon-dropdown-tabs h-full">
             <template #leftExtra>
               <div class="w-0"></div>
             </template>

From 94f3cb1551518b96585925ca96f5b382a161b4e5 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Wed, 20 Nov 2024 17:11:15 +0000
Subject: [PATCH 29/31] fix: pass buffer to sharp

---
 .../jobs/data-export/data-export.processor.ts    |  2 +-
 .../nocodb/src/plugins/GenericS3/GenericS3.ts    |  5 +----
 packages/nocodb/src/plugins/storage/Local.ts     | 12 +++---------
 .../nocodb/src/services/attachments.service.ts   | 16 ++++++++--------
 .../src/types/nc-plugin/lib/IStorageAdapterV2.ts |  5 +----
 5 files changed, 14 insertions(+), 26 deletions(-)

diff --git a/packages/nocodb/src/modules/jobs/jobs/data-export/data-export.processor.ts b/packages/nocodb/src/modules/jobs/jobs/data-export/data-export.processor.ts
index b23fc585fc..18801ded6a 100644
--- a/packages/nocodb/src/modules/jobs/jobs/data-export/data-export.processor.ts
+++ b/packages/nocodb/src/modules/jobs/jobs/data-export/data-export.processor.ts
@@ -86,7 +86,7 @@ export class DataExportProcessor {
           error = e;
         });
 
-      url = (await uploadFilePromise)?.url;
+      url = await uploadFilePromise;
 
       // if url is not defined, it is local attachment
       if (!url) {
diff --git a/packages/nocodb/src/plugins/GenericS3/GenericS3.ts b/packages/nocodb/src/plugins/GenericS3/GenericS3.ts
index 42b0a914cc..d310180600 100644
--- a/packages/nocodb/src/plugins/GenericS3/GenericS3.ts
+++ b/packages/nocodb/src/plugins/GenericS3/GenericS3.ts
@@ -104,10 +104,7 @@ export default class GenericS3 implements IStorageAdapterV2 {
     options?: {
       mimetype?: string;
     },
-  ): Promise<{
-    url: string | null;
-    data: any;
-  }> {
+  ): Promise<string | null> {
     try {
       const streamError = new Promise<void>((_, reject) => {
         stream.on('error', (err) => {
diff --git a/packages/nocodb/src/plugins/storage/Local.ts b/packages/nocodb/src/plugins/storage/Local.ts
index b241fca390..be54e69cf9 100644
--- a/packages/nocodb/src/plugins/storage/Local.ts
+++ b/packages/nocodb/src/plugins/storage/Local.ts
@@ -70,10 +70,7 @@ export default class Local implements IStorageAdapterV2 {
   public async fileCreateByStream(
     key: string,
     stream: Readable,
-  ): Promise<{
-    url: string | null;
-    data: any;
-  }> {
+  ): Promise<string | null> {
     return new Promise((resolve, reject) => {
       const destPath = validateAndNormaliseLocalPath(key);
       try {
@@ -81,11 +78,8 @@ export default class Local implements IStorageAdapterV2 {
           const writableStream = fs.createWriteStream(destPath);
           writableStream.on('finish', () => {
             this.fileRead(destPath)
-              .then((data) => {
-                resolve({
-                  url: null,
-                  data,
-                });
+              .then(() => {
+                resolve(null);
               })
               .catch((e) => {
                 reject(e);
diff --git a/packages/nocodb/src/services/attachments.service.ts b/packages/nocodb/src/services/attachments.service.ts
index e33b0a985d..9b8551a075 100644
--- a/packages/nocodb/src/services/attachments.service.ts
+++ b/packages/nocodb/src/services/attachments.service.ts
@@ -282,6 +282,7 @@ export class AttachmentsService {
             finalUrl = url;
 
           let base64TempStream: Readable;
+          let base64Buffer: Buffer;
 
           if (!url.startsWith('data:')) {
             response = await axios.head(url, { maxRedirects: 5 });
@@ -305,7 +306,8 @@ export class AttachmentsService {
 
             mimeType = mimetypeHelper[0];
             size = Buffer.byteLength(base64Data, 'base64');
-            base64TempStream = Readable.from(Buffer.from(base64Data, 'base64'));
+            base64Buffer = Buffer.from(base64Data, 'base64');
+            base64TempStream = Readable.from(base64Buffer);
           }
 
           const parsedUrl = Url.parse(finalUrl, true);
@@ -342,14 +344,12 @@ export class AttachmentsService {
             attachmentUrl = _attachmentUrl;
             file = _file;
           } else {
-            const { url: _attachmentUrl, data: _file } =
-              (await storageAdapter.fileCreateByStream(
-                slash(path.join(fileDestPath, fileName)),
-                base64TempStream,
-              )) as any;
+            attachmentUrl = await storageAdapter.fileCreateByStream(
+              slash(path.join(fileDestPath, fileName)),
+              base64TempStream,
+            );
 
-            attachmentUrl = _attachmentUrl;
-            file = _file;
+            file = base64Buffer;
           }
 
           const tempMetadata: {
diff --git a/packages/nocodb/src/types/nc-plugin/lib/IStorageAdapterV2.ts b/packages/nocodb/src/types/nc-plugin/lib/IStorageAdapterV2.ts
index 74da138392..a38f0a79f8 100644
--- a/packages/nocodb/src/types/nc-plugin/lib/IStorageAdapterV2.ts
+++ b/packages/nocodb/src/types/nc-plugin/lib/IStorageAdapterV2.ts
@@ -33,10 +33,7 @@ export default interface IStorageAdapterV2<
   fileCreateByStream(
     destPath: string,
     readStream: Readable,
-  ): Promise<{
-    url: string | null;
-    data: any;
-  }>;
+  ): Promise<string | null>;
   fileReadByStream(
     key: string,
     options?: { encoding?: string },

From d206399257152d14380421270954d2b1e4d5d9ef Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Wed, 20 Nov 2024 17:11:15 +0000
Subject: [PATCH 30/31] fix: thumbnail path for workspaceIcons

---
 .../thumbnail-generator.processor.ts                | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/nocodb/src/modules/jobs/jobs/thumbnail-generator/thumbnail-generator.processor.ts b/packages/nocodb/src/modules/jobs/jobs/thumbnail-generator/thumbnail-generator.processor.ts
index 89d64da9e6..034e39aad4 100644
--- a/packages/nocodb/src/modules/jobs/jobs/thumbnail-generator/thumbnail-generator.processor.ts
+++ b/packages/nocodb/src/modules/jobs/jobs/thumbnail-generator/thumbnail-generator.processor.ts
@@ -137,8 +137,17 @@ export class ThumbnailGeneratorProcessor {
 
     const file = await storageAdapter.fileRead(relativePath);
 
-    // remove everything before 'nc/uploads/' (including nc/uploads/) in relativePath
-    relativePath = relativePath.replace(/^.*?nc[/\\]uploads[/\\]/, '');
+    const scopePath = scope ? scope : 'uploads';
+
+    // remove everything before 'nc/${scopePath}/' (including nc/${scopePath}/) in relativePath
+    relativePath = relativePath.replace(
+      new RegExp(`^.*?nc[/\\\\]${scopePath}[/\\\\]`),
+      '',
+    );
+
+    if (scope) {
+      relativePath = `${scopePath}/${relativePath}`;
+    }
 
     return { file, relativePath };
   }

From e0aec448d6d951b7d01771c988aac74e69ab5fb7 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 20 Nov 2024 23:32:56 +0530
Subject: [PATCH 31/31] fix(nc-gui): some ai review changes

---
 packages/nc-gui/components/general/ImageCropper.vue          | 4 ++--
 packages/nc-gui/components/general/WorkspaceIconSelector.vue | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/general/ImageCropper.vue b/packages/nc-gui/components/general/ImageCropper.vue
index 00f97fc65d..9a3205e7c0 100644
--- a/packages/nc-gui/components/general/ImageCropper.vue
+++ b/packages/nc-gui/components/general/ImageCropper.vue
@@ -43,7 +43,7 @@ const previewImage = ref({
 const fileSize = ref<number>(0)
 
 const isValidFileSize = computed(() => {
-  return uploadConfig?.maxFileSize ? fileSize.value && fileSize.value <= uploadConfig?.maxFileSize : true
+  return uploadConfig?.maxFileSize ? !!fileSize.value && fileSize.value <= uploadConfig?.maxFileSize : true
 })
 
 const handleCropImage = () => {
@@ -149,7 +149,7 @@ watch(showCropper, () => {
         </NcButton>
 
         <NcTooltip :disabled="isValidFileSize">
-          <template #title> Cropped file size is greter than max file size </template>
+          <template #title> Cropped file size is greater than max file size </template>
 
           <NcButton size="small" :loading="isLoading" :disabled="!previewImage.src || !isValidFileSize" @click="handleSaveImage">
             Save
diff --git a/packages/nc-gui/components/general/WorkspaceIconSelector.vue b/packages/nc-gui/components/general/WorkspaceIconSelector.vue
index f5d4bd2b45..ff89cf5437 100644
--- a/packages/nc-gui/components/general/WorkspaceIconSelector.vue
+++ b/packages/nc-gui/components/general/WorkspaceIconSelector.vue
@@ -151,7 +151,7 @@ const handleChange = (info: UploadChangeParam) => {
     return
   }
 
-  if (status && status !== 'removed' && status === 'done' && info.file.originFileObj instanceof File) {
+  if (status === 'done' && info.file.originFileObj instanceof File) {
     // 1. Revoke the object URL, to allow the garbage collector to destroy the uploaded before file
     if (imageCropperData.value.imageConfig.src) {
       URL.revokeObjectURL(imageCropperData.value.imageConfig.src)