fix: MIME_TYPE when upload images

GZTimeWalker · GZTimeWalker · commit 13c92f60c6c0 · 2022-08-28T06:07:59.000+08:00
diff --git a/GZCTF/ClientApp/src/components/ChallengePanel.tsx b/GZCTF/ClientApp/src/components/ChallengePanel.tsx
@@ -33,7 +33,7 @@ const ChallengePanel: FC = () => {
   const tags = Object.keys(challenges ?? {})
   const [activeTab, setActiveTab] = useState<ChallengeTag | 'All'>('All')
   const [hideSolved, setHideSolved] = useLocalStorage({
-    key: 'hideSolved',
+    key: 'hide-solved',
     defaultValue: false,
   })
 
diff --git a/GZCTF/ClientApp/src/components/TeamEditModal.tsx b/GZCTF/ClientApp/src/components/TeamEditModal.tsx
@@ -26,6 +26,7 @@ import { mdiCheck, mdiClose, mdiCloseCircle, mdiRefresh, mdiCrown } from '@mdi/j
 import { Icon } from '@mdi/react'
 import { showErrorNotification } from '@Utils/ApiErrorHandler'
 import api, { TeamInfoModel, TeamUserInfoModel } from '@Api'
+import { ACCEPT_IMAGE_MIME_TYPE } from '@Utils/ThemeOverride'
 
 interface TeamEditModalProps extends ModalProps {
   team: TeamInfoModel | null
@@ -334,7 +335,7 @@ const TeamEditModal: FC<TeamEditModalProps> = (props) => {
             minHeight: '220px',
           }}
           maxSize={3 * 1024 * 1024}
-          accept={['image/png', 'image/gif', 'image/jpeg']}
+          accept={ACCEPT_IMAGE_MIME_TYPE}
         >
           <Group position="center" spacing="xl" style={{ minHeight: 240, pointerEvents: 'none' }}>
             {avatarFile ? (
diff --git a/GZCTF/ClientApp/src/pages/account/Profile.tsx b/GZCTF/ClientApp/src/pages/account/Profile.tsx
@@ -25,6 +25,7 @@ import WithNavBar from '@Components/WithNavbar'
 import { showErrorNotification } from '@Utils/ApiErrorHandler'
 import { usePageTitle } from '@Utils/PageTitle'
 import api, { ProfileUpdateModel } from '@Api'
+import { ACCEPT_IMAGE_MIME_TYPE } from '@Utils/ThemeOverride'
 
 const Profile: FC = () => {
   const [dropzoneOpened, setDropzoneOpened] = useState(false)
@@ -306,7 +307,7 @@ const Profile: FC = () => {
                 minHeight: '220px',
               }}
               maxSize={3 * 1024 * 1024}
-              accept={['image/png', 'image/gif', 'image/jpeg']}
+              accept={ACCEPT_IMAGE_MIME_TYPE}
             >
               <Group
                 position="center"
diff --git a/GZCTF/ClientApp/src/pages/admin/games/[id]/Info.tsx b/GZCTF/ClientApp/src/pages/admin/games/[id]/Info.tsx
@@ -23,6 +23,7 @@ import { Icon } from '@mdi/react'
 import WithGameEditTab from '@Components/admin/WithGameEditTab'
 import { showErrorNotification } from '@Utils/ApiErrorHandler'
 import api, { GameInfoModel } from '@Api'
+import { ACCEPT_IMAGE_MIME_TYPE } from '@Utils/ThemeOverride'
 
 const GameInfoEdit: FC = () => {
   const { id } = useParams()
@@ -246,7 +247,7 @@ const GameInfoEdit: FC = () => {
                 })
               }}
               maxSize={3 * 1024 * 1024}
-              accept={['image/png', 'image/gif', 'image/jpeg']}
+              accept={ACCEPT_IMAGE_MIME_TYPE}
               disabled={disabled}
               styles={{
                 root: {
diff --git a/GZCTF/ClientApp/src/utils/ThemeOverride.ts b/GZCTF/ClientApp/src/utils/ThemeOverride.ts
@@ -112,3 +112,5 @@ export const useTooltipStyles = createStyles((theme) => ({
     color: theme.colorScheme === 'dark' ? theme.colors.white[2] : theme.colors.gray[7],
   },
 }))
+
+export declare const ACCEPT_IMAGE_MIME_TYPE: ("image/png" | "image/gif" | "image/jpeg" | "image/webp")[];
