diff --git a/gui/src/components/ImageInput.tsx b/gui/src/components/ImageInput.tsx index bc4a9567..061fbd8e 100644 --- a/gui/src/components/ImageInput.tsx +++ b/gui/src/components/ImageInput.tsx @@ -37,15 +37,17 @@ export function ImageInput(props: ImageInputProps) { accept={props.filter} type='file' onChange={(event) => { - const files = mustExist(event.target.files); - const file = mustExist(files[0]); + const { files } = event.target; + if (doesExist(files) && files.length > 0) { + const file = mustExist(files[0]); - if (doesExist(image)) { - URL.revokeObjectURL(image); + if (doesExist(image)) { + URL.revokeObjectURL(image); + } + + setImage(URL.createObjectURL(file)); + props.onChange(file); } - - setImage(URL.createObjectURL(file)); - props.onChange(file); }} /> diff --git a/gui/src/components/Inpaint.tsx b/gui/src/components/Inpaint.tsx index 478dd795..48172f80 100644 --- a/gui/src/components/Inpaint.tsx +++ b/gui/src/components/Inpaint.tsx @@ -84,12 +84,14 @@ export function Inpaint(props: InpaintProps) { function drawSource(file: File) { const image = new Image(); + const src = URL.createObjectURL(file); image.onload = () => { const canvas = mustExist(canvasRef.current); const ctx = mustExist(canvas.getContext('2d')); ctx.drawImage(image, 0, 0); + URL.revokeObjectURL(src); }; - image.src = URL.createObjectURL(file); + image.src = src; } function changeMask(file: File) { @@ -153,8 +155,8 @@ export function Inpaint(props: InpaintProps) { staleTime: STALE_TIME, }); - // eslint-disable-next-line @typescript-eslint/ban-types, no-null/no-null - const canvasRef = useRef(null); + // eslint-disable-next-line no-null/no-null + const canvasRef = useRef(null); const [clicks, setClicks] = useState>([]); const [painting, setPainting] = useState(false);