diff --git a/invokeai/frontend/web/src/common/hooks/useImageUploadButton.tsx b/invokeai/frontend/web/src/common/hooks/useImageUploadButton.tsx index ca65931a921..d0445fb61aa 100644 --- a/invokeai/frontend/web/src/common/hooks/useImageUploadButton.tsx +++ b/invokeai/frontend/web/src/common/hooks/useImageUploadButton.tsx @@ -128,7 +128,11 @@ export const useImageUploadButton = ({ onUpload, isDisabled, allowMultiple }: Us getInputProps: getUploadInputProps, open: openUploader, } = useDropzone({ - accept: { 'image/png': ['.png'], 'image/jpeg': ['.jpg', '.jpeg', '.png'] }, + accept: { + 'image/png': ['.png'], + 'image/jpeg': ['.jpg', '.jpeg', '.png'], + 'image/webp': ['.webp'], + }, onDropAccepted, onDropRejected, disabled: isDisabled, diff --git a/invokeai/frontend/web/src/features/dnd/FullscreenDropzone.tsx b/invokeai/frontend/web/src/features/dnd/FullscreenDropzone.tsx index d922faa0965..18732a39cff 100644 --- a/invokeai/frontend/web/src/features/dnd/FullscreenDropzone.tsx +++ b/invokeai/frontend/web/src/features/dnd/FullscreenDropzone.tsx @@ -22,8 +22,8 @@ import { useBoardName } from 'services/api/hooks/useBoardName'; import type { UploadImageArg } from 'services/api/types'; import { z } from 'zod'; -const ACCEPTED_IMAGE_TYPES = ['image/png', 'image/jpg', 'image/jpeg']; -const ACCEPTED_FILE_EXTENSIONS = ['.png', '.jpg', '.jpeg']; +const ACCEPTED_IMAGE_TYPES = ['image/png', 'image/jpg', 'image/jpeg', 'image/webp']; +const ACCEPTED_FILE_EXTENSIONS = ['.png', '.jpg', '.jpeg', '.webp']; // const MAX_IMAGE_SIZE = 4; //In MegaBytes // const sizeInMB = (sizeInBytes: number, decimalsNum = 2) => { diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/ModelImageUpload.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/ModelImageUpload.tsx index 4d2a3fe3200..d6ec53e33da 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/ModelImageUpload.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/ModelImageUpload.tsx @@ -72,7 +72,11 @@ const ModelImageUpload = ({ model_key, model_image }: Props) => { }, [model_key, t, deleteModelImage]); const { getInputProps, getRootProps } = useDropzone({ - accept: { 'image/png': ['.png'], 'image/jpeg': ['.jpg', '.jpeg', '.png'] }, + accept: { + 'image/png': ['.png'], + 'image/jpeg': ['.jpg', '.jpeg', '.png'], + 'image/webp': ['.webp'], + }, onDropAccepted, noDrag: true, multiple: false,