feat(ui): refactor base image uploading logic

invokeai/frontend/web/src/features/system/store/systemPersistDenylist.ts

@@ -3,24 +3,6 @@ import { SystemState } from './systemSlice';
 /**
  * System slice persist denylist
  */
-const itemsToDenylist: (keyof SystemState)[] = [
-  'currentIteration',
-  'currentStatus',
-  'currentStep',
-  'isCancelable',
-  'isConnected',
-  'isESRGANAvailable',
-  'isGFPGANAvailable',
-  'isProcessing',
-  'socketId',
-  'totalIterations',
-  'totalSteps',
-  'openModel',
-  'isCancelScheduled',
-  'progressImage',
-  'wereModelsReceived',
-  'wasSchemaParsed',
-];
 export const systemPersistDenylist: (keyof SystemState)[] = [
   'currentIteration',
   'currentStatus',
@@ -39,8 +21,5 @@ export const systemPersistDenylist: (keyof SystemState)[] = [
   'wereModelsReceived',
   'wasSchemaParsed',
   'isPersisted',
+  'isUploading',
 ];
-
-export const systemDenylist = itemsToDenylist.map(
-  (denylistItem) => `system.${denylistItem}`
-);

invokeai/frontend/web/src/features/system/store/systemSlice.ts

@@ -25,6 +25,7 @@ import { TFuncKey } from 'i18next';
 import { t } from 'i18next';
 import { userInvoked } from 'app/store/actions';
 import { LANGUAGES } from '../components/LanguagePicker';
+import { imageUploaded } from 'services/thunks/image';
 
 export type CancelStrategy = 'immediate' | 'scheduled';
 
@@ -93,6 +94,7 @@ export interface SystemState {
   isPersisted: boolean;
   shouldAntialiasProgressImage: boolean;
   language: keyof typeof LANGUAGES;
+  isUploading: boolean;
 }
 
 export const initialSystemState: SystemState = {
@@ -128,6 +130,7 @@ export const initialSystemState: SystemState = {
   infillMethods: ['tile', 'patchmatch'],
   isPersisted: false,
   language: 'en',
+  isUploading: false,
 };
 
 export const systemSlice = createSlice({
@@ -456,6 +459,27 @@ export const systemSlice = createSlice({
     builder.addCase(parsedOpenAPISchema, (state) => {
       state.wasSchemaParsed = true;
     });
+
+    /**
+     * Image Uploading Started
+     */
+    builder.addCase(imageUploaded.pending, (state) => {
+      state.isUploading = true;
+    });
+
+    /**
+     * Image Uploading Complete
+     */
+    builder.addCase(imageUploaded.rejected, (state) => {
+      state.isUploading = false;
+    });
+
+    /**
+     * Image Uploading Complete
+     */
+    builder.addCase(imageUploaded.fulfilled, (state) => {
+      state.isUploading = false;
+    });
   },
 });