remove logic changes, keep logging

Author: Mary Hipp

invokeai/frontend/web/src/features/dnd/FullscreenDropzone.tsx

@@ -10,8 +10,9 @@ import { useAppSelector } from 'app/store/storeHooks';
 import { DndDropOverlay } from 'features/dnd/DndDropOverlay';
 import type { DndTargetState } from 'features/dnd/types';
 import { selectAutoAddBoardId } from 'features/gallery/store/gallerySelectors';
+import { selectMaxImageUploadCount } from 'features/system/store/configSlice';
 import { toast } from 'features/toast/toast';
-import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { uploadImages } from 'services/api/endpoints/images';
 import { useBoardName } from 'services/api/hooks/useBoardName';
@@ -20,7 +21,8 @@ import { z } from 'zod';
 
 const ACCEPTED_IMAGE_TYPES = ['image/png', 'image/jpg', 'image/jpeg'];
 const ACCEPTED_FILE_EXTENSIONS = ['.png', '.jpg', '.jpeg'];
-const log = logger('gallery');
+
+const log = logger('generation');
 
 // const MAX_IMAGE_SIZE = 4; //In MegaBytes
 // const sizeInMB = (sizeInBytes: number, decimalsNum = 2) => {
@@ -67,19 +69,20 @@ const sx = {
   },
 } satisfies SystemStyleObject;
 
-const maxImageUploadCount = undefined;
-
 export const FullscreenDropzone = memo(() => {
   const { t } = useTranslation();
   const ref = useRef<HTMLDivElement>(null);
-
+  const maxImageUploadCount = useAppSelector(selectMaxImageUploadCount);
   const [dndState, setDndState] = useState<DndTargetState>('idle');
 
+  const uploadFilesSchema = useMemo(() => getFilesSchema(maxImageUploadCount), [maxImageUploadCount]);
+
   const validateAndUploadFiles = useCallback(
     (files: File[]) => {
+      log.info('validateAndUploadFiles');
       const { getState } = getStore();
-      const uploadFilesSchema = getFilesSchema(maxImageUploadCount);
       const parseResult = uploadFilesSchema.safeParse(files);
+      log.info('parseResult');
 
       if (!parseResult.success) {
         const description =
@@ -107,7 +110,7 @@ export const FullscreenDropzone = memo(() => {
 
       uploadImages(uploadArgs);
     },
-    [t]
+    [maxImageUploadCount, t, uploadFilesSchema]
   );
 
   useEffect(() => {
@@ -148,57 +151,30 @@ export const FullscreenDropzone = memo(() => {
   useEffect(() => {
     log.info('use effect');
     const controller = new AbortController();
-
-    window.addEventListener(
-      'paste',
-      (e) => {
-        log.info('event listener');
-        log.info(JSON.stringify(e.clipboardData));
-        if (!e.clipboardData?.files) {
-          log.info('no files');
-          return;
-        }
-        const files = Array.from(e.clipboardData.files);
-        const { getState } = getStore();
-        const uploadFilesSchema = getFilesSchema(undefined);
-        const parseResult = uploadFilesSchema.safeParse(files);
-
-        if (!parseResult.success) {
-          // const description =
-          //   maxImageUploadCount === undefined
-          //     ? t('toast.uploadFailedInvalidUploadDesc')
-          //     : t('toast.uploadFailedInvalidUploadDesc_withCount', { count: maxImageUploadCount });
-
-          // toast({
-          //   id: 'UPLOAD_FAILED',
-          //   title: t('toast.uploadFailed'),
-          //   description,
-          //   status: 'error',
-          // });
-          log.info("couldn't parse");
-          return;
-        }
-        const autoAddBoardId = selectAutoAddBoardId(getState());
-
-        const uploadArgs: UploadImageArg[] = files.map((file, i) => ({
-          file,
-          image_category: 'user',
-          is_intermediate: false,
-          board_id: autoAddBoardId === 'none' ? undefined : autoAddBoardId,
-          isFirstUploadOfBatch: i === 0,
-        }));
-
-        uploadImages(uploadArgs);
-        // validateAndUploadFiles(files);
-      },
-      { signal: controller.signal }
-    );
+    try {
+      window.addEventListener(
+        'paste',
+        (e) => {
+          log.info('in paste');
+          log.info(`clipboardData: ${JSON.stringify(e.clipboardData)}`);
+          if (!e.clipboardData?.files) {
+            log.info('no files');
+            return;
+          }
+          const files = Array.from(e.clipboardData.files);
+          validateAndUploadFiles(files);
+        },
+        { signal: controller.signal }
+      );
+    } catch (error) {
+      log.info(`error: ${JSON.stringify(error)}`);
+    }
 
     return () => {
-      log.info('aborted');
+      log.info('abort');
       controller.abort();
     };
-  }, []);
+  }, [validateAndUploadFiles]);
 
   return (
     <Box ref={ref} data-dnd-state={dndState} sx={sx}>