add logging, remove deps

Author: Mary Hipp

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

@@ -4,14 +4,14 @@ import { containsFiles, getFiles } from '@atlaskit/pragmatic-drag-and-drop/exter
 import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
 import { Box, Flex, Heading } from '@invoke-ai/ui-library';
+import { logger } from 'app/logging/logger';
 import { getStore } from 'app/store/nanostores/store';
 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, useMemo, useRef, useState } from 'react';
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { uploadImages } from 'services/api/endpoints/images';
 import { useBoardName } from 'services/api/hooks/useBoardName';
@@ -20,6 +20,7 @@ import { z } from 'zod';
 
 const ACCEPTED_IMAGE_TYPES = ['image/png', 'image/jpg', 'image/jpeg'];
 const ACCEPTED_FILE_EXTENSIONS = ['.png', '.jpg', '.jpeg'];
+const log = logger('paste');
 
 // const MAX_IMAGE_SIZE = 4; //In MegaBytes
 // const sizeInMB = (sizeInBytes: number, decimalsNum = 2) => {
@@ -66,17 +67,18 @@ 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 [dndState, setDndState] = useState<DndTargetState>('idle');
 
   const validateAndUploadFiles = useCallback(
     (files: File[]) => {
       const { getState } = getStore();
+      const uploadFilesSchema = getFilesSchema(maxImageUploadCount);
       const parseResult = uploadFilesSchema.safeParse(files);
 
       if (!parseResult.success) {
@@ -105,7 +107,7 @@ export const FullscreenDropzone = memo(() => {
 
       uploadImages(uploadArgs);
     },
-    [maxImageUploadCount, t, uploadFilesSchema]
+    [maxImageUploadCount, t]
   );
 
   useEffect(() => {
@@ -144,24 +146,59 @@ export const FullscreenDropzone = memo(() => {
   }, [validateAndUploadFiles]);
 
   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);
-        validateAndUploadFiles(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 }
     );
 
     return () => {
+      log.info('aborted');
       controller.abort();
     };
-  }, [validateAndUploadFiles]);
+  }, []);
 
   return (
     <Box ref={ref} data-dnd-state={dndState} sx={sx}>