fix(ui): fix init image display buttons

- Reset and Upload buttons along top of initial image
- Also had to mess around with the control net & DnD image stuff after changing the styles
- Abstract image upload logic into hook - does not handle native HTML drag and drop upload - only the button click upload

invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImagePreview.tsx

@@ -1,4 +1,4 @@
-import { Flex } from '@chakra-ui/react';
+import { Flex, Spacer, Text } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import {
@@ -13,6 +13,10 @@ import { ImageDTO } from 'services/api/types';
 import { IAIImageLoadingFallback } from 'common/components/IAIImageFallback';
 import { useGetImageDTOQuery } from 'services/api/endpoints/images';
 import { skipToken } from '@reduxjs/toolkit/dist/query';
+import IAIIconButton from 'common/components/IAIIconButton';
+import { FaUndo, FaUpload } from 'react-icons/fa';
+import useImageUploader from 'common/hooks/useImageUploader';
+import { useImageUploadButton } from 'common/hooks/useImageUploadButton';
 
 const selector = createSelector(
   [generationSelector],
@@ -28,6 +32,7 @@ const selector = createSelector(
 const InitialImagePreview = () => {
   const { initialImage } = useAppSelector(selector);
   const dispatch = useAppDispatch();
+  const { openUploader } = useImageUploader();
 
   const {
     currentData: image,
@@ -36,6 +41,10 @@ const InitialImagePreview = () => {
     isSuccess,
   } = useGetImageDTOQuery(initialImage?.imageName ?? skipToken);
 
+  const { getUploadButtonProps, getUploadInputProps } = useImageUploadButton({
+    postUploadAction: { type: 'SET_INITIAL_IMAGE' },
+  });
+
   const handleDrop = useCallback(
     (droppedImage: ImageDTO) => {
       if (droppedImage.image_name === initialImage?.imageName) {
@@ -50,25 +59,66 @@ const InitialImagePreview = () => {
     dispatch(clearInitialImage());
   }, [dispatch]);
 
+  const handleUpload = useCallback(() => {
+    openUploader();
+  }, [openUploader]);
+
   return (
     <Flex
       sx={{
+        flexDir: 'column',
         width: 'full',
         height: 'full',
         position: 'absolute',
         alignItems: 'center',
         justifyContent: 'center',
         p: 4,
+        gap: 4,
       }}
     >
+      <Flex
+        sx={{
+          w: 'full',
+          flexWrap: 'wrap',
+          justifyContent: 'center',
+          alignItems: 'center',
+          gap: 2,
+        }}
+      >
+        <Text
+          sx={{
+            color: 'base.200',
+            fontWeight: 600,
+            fontSize: 'sm',
+            userSelect: 'none',
+          }}
+        >
+          Initial Image
+        </Text>
+        <Spacer />
+        <IAIIconButton
+          tooltip="Upload Initial Image"
+          aria-label="Upload Initial Image"
+          icon={<FaUpload />}
+          onClick={handleUpload}
+          {...getUploadButtonProps()}
+        />
+        <IAIIconButton
+          tooltip="Reset Initial Image"
+          aria-label="Reset Initial Image"
+          icon={<FaUndo />}
+          onClick={handleReset}
+          isDisabled={!initialImage}
+        />
+      </Flex>
       <IAIDndImage
         image={image}
         onDrop={handleDrop}
-        onReset={handleReset}
         fallback={<IAIImageLoadingFallback sx={{ bg: 'none' }} />}
-        postUploadAction={{ type: 'SET_INITIAL_IMAGE' }}
-        withResetIcon
+        isUploadDisabled={true}
+        fitContainer
       />
+      <input {...getUploadInputProps()} />
     </Flex>
   );
 };