Fixes paste image to upload

frontend/src/common/components/ImageUploader.tsx

@@ -8,8 +8,6 @@ import {
 import { useAppDispatch, useAppSelector } from 'app/store';
 import { FileRejection, useDropzone } from 'react-dropzone';
 import { useToast } from '@chakra-ui/react';
-// import { uploadImage } from 'app/socketio/actions';
-import { UploadImagePayload } from 'app/invokeai';
 import { ImageUploaderTriggerContext } from 'app/contexts/ImageUploaderTriggerContext';
 import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
 import { tabDict } from 'features/tabs/components/InvokeTabs';
@@ -46,8 +44,6 @@ const ImageUploader = (props: ImageUploaderProps) => {
 
   const fileAcceptedCallback = useCallback(
     async (file: File) => {
-      // setIsHandlingUpload(true);
-
       dispatch(uploadImage({ imageFile: file }));
     },
     [dispatch]
@@ -122,12 +118,7 @@ const ImageUploader = (props: ImageUploaderProps) => {
         return;
       }
 
-      // const payload: UploadImagePayload = { file };
-      // if (['img2img', 'inpainting'].includes(activeTabName)) {
-      //   payload.destination = activeTabName as ImageUploadDestination;
-      // }
-
-      // dispatch(uploadImage(payload));
+      dispatch(uploadImage({ imageFile: file }));
     };
     document.addEventListener('paste', pasteImageListener);
     return () => {
@@ -135,7 +126,9 @@ const ImageUploader = (props: ImageUploaderProps) => {
     };
   }, [dispatch, toast, activeTabName]);
 
-  const overlaySecondaryText = ['img2img', 'unifiedCanvas'].includes(activeTabName)
+  const overlaySecondaryText = ['img2img', 'unifiedCanvas'].includes(
+    activeTabName
+  )
     ? ` to ${tabDict[activeTabName as keyof typeof tabDict].tooltip}`
     : ``;
 

frontend/src/features/canvas/store/canvasSlice.ts

@@ -154,6 +154,8 @@ export const canvasSlice = createSlice({
     },
     setInitialCanvasImage: (state, action: PayloadAction<InvokeAI.Image>) => {
       const image = action.payload;
+      const { stageDimensions } = state;
+
       const newBoundingBoxDimensions = {
         width: roundDownToMultiple(_.clamp(image.width, 64, 512), 64),
         height: roundDownToMultiple(_.clamp(image.height, 64, 512), 64),
@@ -174,6 +176,7 @@ export const canvasSlice = createSlice({
       state.boundingBoxCoordinates = newBoundingBoxCoordinates;
 
       state.pastLayerStates.push(state.layerState);
+
       state.layerState = {
         ...initialLayerState,
         objects: [
@@ -191,6 +194,25 @@ export const canvasSlice = createSlice({
       state.futureLayerStates = [];
 
       state.isCanvasInitialized = false;
+      const newScale = calculateScale(
+        stageDimensions.width,
+        stageDimensions.height,
+        image.width,
+        image.height,
+        STAGE_PADDING_PERCENTAGE
+      );
+
+      const newCoordinates = calculateCoordinates(
+        stageDimensions.width,
+        stageDimensions.height,
+        0,
+        0,
+        image.width,
+        image.height,
+        newScale
+      );
+      state.stageScale = newScale;
+      state.stageCoordinates = newCoordinates;
       state.doesCanvasNeedScaling = true;
     },
     setStageDimensions: (state, action: PayloadAction<Dimensions>) => {