From 62a7591ffce6bb3e952dd555124c32932ff3ebee Mon Sep 17 00:00:00 2001
From: Rick Love <rick@toldpro.com>
Date: Mon, 8 Mar 2021 10:39:11 -0600
Subject: [PATCH] FIX Image Upload Preview Size (#225)

---
 .../CreateNonFungiblePage/FileUpload.tsx           | 14 +++++++++++---
 .../components/CreateNonFungiblePage/Preview.tsx   |  2 +-
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/client/src/components/CreateNonFungiblePage/FileUpload.tsx b/client/src/components/CreateNonFungiblePage/FileUpload.tsx
index 773f8bc0..2df38fe1 100644
--- a/client/src/components/CreateNonFungiblePage/FileUpload.tsx
+++ b/client/src/components/CreateNonFungiblePage/FileUpload.tsx
@@ -11,7 +11,7 @@ import {
 export function FilePreview({ file }: { file: SelectedFile }) {
   const dispatch = useDispatch();
   if (/^image\/.*/.test(file.type)) {
-    return <Image src={file.objectUrl} />;
+    return <Image src={file.objectUrl} width="100%" height="100%" objectFit='contain' />;
   }
   if (/^video\/.*/.test(file.type)) {
     const canvasRef = createRef<HTMLCanvasElement>();
@@ -101,8 +101,16 @@ export default function FileUpload() {
       >
         <Box as="input" {...getInputProps()} />
         {state.selectedFile?.objectUrl ? (
-          <Box p={4} maxWidth="400px" maxHeight="400px">
-            <FilePreview file={state.selectedFile} />
+          <Box p={4}>
+            <Flex
+              justify="center"
+              align="center"
+              maxWidth="400px"
+              maxHeight="400px"
+              overflow="hidden"
+            >
+              <FilePreview file={state.selectedFile} />
+            </Flex>
           </Box>
         ) : (
           <Flex
diff --git a/client/src/components/CreateNonFungiblePage/Preview.tsx b/client/src/components/CreateNonFungiblePage/Preview.tsx
index 8e37fec6..5607b09a 100644
--- a/client/src/components/CreateNonFungiblePage/Preview.tsx
+++ b/client/src/components/CreateNonFungiblePage/Preview.tsx
@@ -18,9 +18,9 @@ export default function Preview() {
       boxShadow="0px 0px 0px 4px rgba(211, 222, 245, 0.3)"
     >
       <Flex
-        width="100"
         justify="center"
         align="center"
+        width="300px"
         height="300px"
         overflow="hidden"
       >