diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImageButtons.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImageButtons.tsx index 945e9aee1a..173f0b49c6 100644 --- a/invokeai/frontend/web/src/features/gallery/components/CurrentImageButtons.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImageButtons.tsx @@ -151,11 +151,17 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => { }; const handleCopyImage = async () => { - if (!selectedImage) return; + if (!selectedImage?.url) { + return; + } - const blob = await fetch(getUrl(selectedImage.url)).then((res) => - res.blob() - ); + const url = getUrl(selectedImage.url); + + if (!url) { + return; + } + + const blob = await fetch(url).then((res) => res.blob()); const data = [new ClipboardItem({ [blob.type]: blob })]; await navigator.clipboard.write(data); @@ -175,6 +181,10 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => { : window.location.toString() + selectedImage.url : ''; + if (!url) { + return; + } + navigator.clipboard.writeText(url).then(() => { toast({ title: t('toast.imageLinkCopied'), @@ -477,7 +487,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => { {t('parameters.copyImageToLink')} - + } size="sm" w="100%"> {t('parameters.downloadImage')} diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImageDisplay.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImageDisplay.tsx index 2f249d77f8..f9179ca4e2 100644 --- a/invokeai/frontend/web/src/features/gallery/components/CurrentImageDisplay.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImageDisplay.tsx @@ -1,6 +1,7 @@ import { Flex, Icon } from '@chakra-ui/react'; import { createSelector } from '@reduxjs/toolkit'; import { useAppSelector } from 'app/storeHooks'; +import { systemSelector } from 'features/system/store/systemSelectors'; import { isEqual } from 'lodash'; import { MdPhoto } from 'react-icons/md'; @@ -12,12 +13,12 @@ import CurrentImageButtons from './CurrentImageButtons'; import CurrentImagePreview from './CurrentImagePreview'; export const currentImageDisplaySelector = createSelector( - [gallerySelector, selectedImageSelector], - (gallery, selectedImage) => { - const { currentImage, intermediateImage } = gallery; + [systemSelector, selectedImageSelector], + (system, selectedImage) => { + const { progressImage } = system; return { - hasAnImageToDisplay: selectedImage || intermediateImage, + hasAnImageToDisplay: selectedImage || progressImage, }; }, {