fix: error on invalid mime types (#29337)

* fix: error on invalid mime types

* allow server to check mime type instead of client

* swap ?? for ||

* fix upload icon import

apps/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeader.tsx

@@ -7,6 +7,20 @@ import { useIsAPIDocsSidePanelEnabled } from 'components/interfaces/App/FeatureP
 import APIDocsButton from 'components/ui/APIDocsButton'
 import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { useStorageStore } from 'localStores/storageExplorer/StorageExplorerStore'
+import {
+  Check,
+  ChevronLeft,
+  ChevronRight,
+  Columns,
+  Edit2,
+  FolderPlus,
+  List,
+  Loader,
+  RefreshCw,
+  Search,
+  Upload,
+  X,
+} from 'lucide-react'
 import { useStorageExplorerStateSnapshot } from 'state/storage-explorer'
 import {
   Button,
@@ -19,22 +33,8 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
   Input,
-  Upload,
 } from 'ui'
 import { STORAGE_SORT_BY, STORAGE_SORT_BY_ORDER, STORAGE_VIEWS } from '../Storage.constants'
-import {
-  Loader,
-  Edit2,
-  ChevronRight,
-  ChevronLeft,
-  RefreshCw,
-  List,
-  Columns,
-  Check,
-  FolderPlus,
-  Search,
-  X,
-} from 'lucide-react'
 
 const VIEW_OPTIONS = [
   { key: STORAGE_VIEWS.COLUMNS, name: 'As columns' },

apps/studio/localStores/storageExplorer/StorageExplorerStore.tsx

@@ -1,6 +1,17 @@
 import { SupabaseClient, createClient } from '@supabase/supabase-js'
 import { BlobReader, BlobWriter, ZipWriter } from '@zip.js/zip.js'
-import { chunk, compact, find, findIndex, has, isEqual, isObject, uniq, uniqBy } from 'lodash'
+import {
+  capitalize,
+  chunk,
+  compact,
+  find,
+  findIndex,
+  has,
+  isEqual,
+  isObject,
+  uniq,
+  uniqBy,
+} from 'lodash'
 import { makeAutoObservable } from 'mobx'
 import { toast } from 'sonner'
 import * as tus from 'tus-js-client'
@@ -722,13 +733,29 @@ class StorageExplorerStore {
             chunkSize,
             onShouldRetry(error) {
               const status = error.originalResponse ? error.originalResponse.getStatus() : 0
-              const doNotRetryStatuses = [400, 403, 404, 409, 429]
+              const doNotRetryStatuses = [400, 403, 404, 409, 415, 429]
 
               return !doNotRetryStatuses.includes(status)
             },
-            onError(error) {
+            onError: (error) => {
               numberOfFilesUploadedFail += 1
-              toast.error(`Failed to upload ${file.name}: ${error.message}`)
+              if (
+                error instanceof tus.DetailedError &&
+                error.originalResponse?.getStatus() === 415
+              ) {
+                // Unsupported mime type
+                toast.error(
+                  capitalize(
+                    error.originalResponse.getBody() ||
+                      `Failed to upload ${file.name}: ${metadata.mimetype} is not allowed`
+                  ),
+                  {
+                    description: `Allowed MIME types: ${this.selectedBucket.allowed_mime_types?.join(', ')}`,
+                  }
+                )
+              } else {
+                toast.error(`Failed to upload ${file.name}: ${error.message}`)
+              }
               reject(error)
             },
             onProgress: (bytesSent, bytesTotal) => {