diff --git a/src/components/FileInput.tsx b/src/components/FileInput.tsx index de4bbf5afe..feb735489d 100644 --- a/src/components/FileInput.tsx +++ b/src/components/FileInput.tsx @@ -1,5 +1,7 @@ import { ChangeEvent, ReactNode, useRef } from 'react' +import { IMAGE_ALLOW_EXTENSIONS } from 'hooks/social' + export default function FileInput({ onChange, children, @@ -41,7 +43,7 @@ export default function FileInput({ type="file" onChange={handleFileChange} style={{ visibility: 'hidden', height: 0, width: 0 }} - accept={image ? 'image/*' : undefined} + accept={image ? IMAGE_ALLOW_EXTENSIONS.map(ext => `image/${ext}`).join(', ') : undefined} /> ) diff --git a/src/hooks/social.ts b/src/hooks/social.ts index d2f641be85..774f717af6 100644 --- a/src/hooks/social.ts +++ b/src/hooks/social.ts @@ -5,7 +5,7 @@ import { v4 as uuid } from 'uuid' import { BUCKET_NAME } from 'constants/env' -const ALLOW_EXTENSIONS = ['jpg', 'jpeg', 'png', 'svg', 'webp', 'gif'] +export const IMAGE_ALLOW_EXTENSIONS = ['jpg', 'jpeg', 'png', 'gif'] export const useUploadImageToCloud = () => { const [uploadImage] = useUploadImageMutation() @@ -14,7 +14,7 @@ export const useUploadImageToCloud = () => { async (file: Blob | File) => { try { const ext = (file as File).name.split('.').pop() ?? '' - if (!ALLOW_EXTENSIONS.includes(ext)) throw new Error('File is not support') + if (!IMAGE_ALLOW_EXTENSIONS.includes(ext)) throw new Error('File is not support') const fileName = `${uuid() + Date.now()}.${ext}` const res = await uploadImage({