fix(ui): uploads initiated from canvas

Author: psychedelicious

invokeai/frontend/web/src/features/controlLayers/hooks/useSaveLayerToAssets.ts

@@ -5,13 +5,10 @@ import type { CanvasEntityAdapterRasterLayer } from 'features/controlLayers/konv
 import type { CanvasEntityAdapterRegionalGuidance } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterRegionalGuidance';
 import { canvasToBlob } from 'features/controlLayers/konva/util';
 import { selectAutoAddBoardId } from 'features/gallery/store/gallerySelectors';
-import { toast } from 'features/toast/toast';
 import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
 import { useUploadImageMutation } from 'services/api/endpoints/images';
 
 export const useSaveLayerToAssets = () => {
-  const { t } = useTranslation();
   const [uploadImage] = useUploadImageMutation();
   const autoAddBoardId = useAppSelector(selectAutoAddBoardId);
 
@@ -27,30 +24,17 @@ export const useSaveLayerToAssets = () => {
       if (!adapter) {
         return;
       }
-      try {
-        const canvas = adapter.getCanvas();
-        const blob = await canvasToBlob(canvas);
-        const file = new File([blob], `layer-${adapter.id}.png`, { type: 'image/png' });
-        await uploadImage({
-          file,
-          image_category: 'user',
-          is_intermediate: false,
-          postUploadAction: { type: 'TOAST' },
-          board_id: autoAddBoardId === 'none' ? undefined : autoAddBoardId,
-        });
-
-        toast({
-          status: 'info',
-          title: t('toast.layerSavedToAssets'),
-        });
-      } catch (error) {
-        toast({
-          status: 'error',
-          title: t('toast.problemSavingLayer'),
-        });
-      }
+      const canvas = adapter.getCanvas();
+      const blob = await canvasToBlob(canvas);
+      const file = new File([blob], `layer-${adapter.id}.png`, { type: 'image/png' });
+      uploadImage({
+        file,
+        image_category: 'user',
+        is_intermediate: false,
+        board_id: autoAddBoardId === 'none' ? undefined : autoAddBoardId,
+      });
     },
-    [t, autoAddBoardId, uploadImage]
+    [autoAddBoardId, uploadImage]
   );
 
   return saveLayerToAssets;

invokeai/frontend/web/src/features/controlLayers/konva/CanvasCompositorModule.ts

@@ -35,7 +35,7 @@ import { t } from 'i18next';
 import { atom, computed } from 'nanostores';
 import type { Logger } from 'roarr';
 import { serializeError } from 'serialize-error';
-import type { UploadOptions } from 'services/api/endpoints/images';
+import type { UploadImageArg } from 'services/api/endpoints/images';
 import { getImageDTOSafe, uploadImage } from 'services/api/endpoints/images';
 import type { ImageDTO } from 'services/api/types';
 import stableHash from 'stable-hash';
@@ -259,7 +259,7 @@ export class CanvasCompositorModule extends CanvasModuleBase {
   getCompositeImageDTO = async (
     adapters: CanvasEntityAdapter[],
     rect: Rect,
-    uploadOptions: Pick<UploadOptions, 'is_intermediate' | 'metadata'>,
+    uploadOptions: Pick<UploadImageArg, 'is_intermediate' | 'metadata'>,
     compositingOptions?: CompositingOptions,
     forceUpload?: boolean
   ): Promise<ImageDTO> => {
@@ -297,8 +297,7 @@ export class CanvasCompositorModule extends CanvasModuleBase {
     this.$isUploading.set(true);
     const uploadResult = await withResultAsync(() =>
       uploadImage({
-        blob,
-        fileName: 'canvas-composite.png',
+        file: new File([blob], 'canvas-composite.png', { type: 'image/png' }),
         image_category: 'general',
         is_intermediate: uploadOptions.is_intermediate,
         board_id: uploadOptions.is_intermediate ? undefined : selectAutoAddBoardId(this.manager.store.getState()),

invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityObjectRenderer.ts

@@ -490,8 +490,7 @@ export class CanvasEntityObjectRenderer extends CanvasModuleBase {
       previewBlob(blob, 'Rasterized entity');
     }
     imageDTO = await uploadImage({
-      blob,
-      fileName: `${this.id}_rasterized.png`,
+      file: new File([blob], `${this.id}_rasterized.png`, { type: 'image/png' }),
       image_category: 'other',
       is_intermediate: true,
     });