FIX Image Upload Preview Size (#225)

tqtezos · Mar 8, 2021 · 62a7591 · 62a7591
1 parent a0f6ce6
commit 62a7591
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git 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
@@ -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"
       >