fix: correctly infer filename from files containing uppercase extensi…

…ons, tweak upload card layout
sanity-io · Oct 6, 2022 · 1e96b79 · 1e96b79
1 parent 18d64cc
commit 1e96b79
Show file tree

Hide file tree

Showing 2 changed files with 102 additions and 89 deletions.
diff --git a/src/components/CardUpload/index.tsx b/src/components/CardUpload/index.tsx
@@ -4,6 +4,7 @@ import {Box, Button, Flex, Text, Tooltip} from '@sanity/ui'
 import filesize from 'filesize'
 import React from 'react'
 import {useDispatch} from 'react-redux'
+import styled from 'styled-components'
 import {PANEL_HEIGHT} from '../../constants'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {selectUploadById, uploadsActions} from '../../modules/uploads'
@@ -14,6 +15,15 @@ type Props = {
   id: string
 }
 
+const CardWrapper = styled(Flex)`
+  box-sizing: border-box;
+  height: 100%;
+  overflow: hidden;
+  padding: 2px;
+  position: relative;
+  width: 100%;
+`
+
 const CardUpload = (props: Props) => {
   const {id} = props
 
@@ -49,108 +59,111 @@ const CardUpload = (props: Props) => {
   }
 
   return (
-    <Flex
-      direction="column"
-      style={{
-        background: hues.gray[950].hex,
-        border: '1px solid transparent',
-        height: '100%',
-        position: 'relative'
-      }}
-    >
-      {/* Progress bar */}
-      <div
+    <CardWrapper>
+      <Flex
+        direction="column"
+        flex={1}
         style={{
-          background: hues.gray[600].hex,
-          bottom: 0,
-          height: '1px',
-          left: 0,
-          position: 'absolute',
-          width: '100%',
-          transform: `scaleX(${percentLoaded * 0.01})`,
-          transformOrigin: 'bottom left',
-          transition: 'all 1000ms ease-out'
+          background: hues.gray[950].hex,
+          border: '1px solid transparent',
+          height: '100%',
+          position: 'relative'
         }}
-      />
+      >
+        {/* Progress bar */}
+        <div
+          style={{
+            background: hues.gray[600].hex,
+            bottom: 0,
+            height: '1px',
+            left: 0,
+            position: 'absolute',
+            width: '100%',
+            transform: `scaleX(${percentLoaded * 0.01})`,
+            transformOrigin: 'bottom left',
+            transition: 'all 1000ms ease-out'
+          }}
+        />
 
-      <Box flex={1} style={{position: 'relative'}}>
-        {item.assetType === 'image' && item?.objectUrl && (
-          <Image
-            draggable={false}
-            src={item.objectUrl}
-            style={{
-              opacity: 0.4
-            }}
-          />
-        )}
+        <Box flex={1} style={{position: 'relative'}}>
+          {item.assetType === 'image' && item?.objectUrl && (
+            <Image
+              draggable={false}
+              src={item.objectUrl}
+              style={{
+                opacity: 0.4
+              }}
+            />
+          )}
 
-        {item.assetType === 'file' && (
-          <div style={{height: '100%', opacity: 0.1}}>
-            <FileIcon width="80px" />
-          </div>
-        )}
+          {item.assetType === 'file' && (
+            <div style={{height: '100%', opacity: 0.1}}>
+              <FileIcon width="80px" />
+            </div>
+          )}
 
-        {/* 
+          {/* 
           Cancel upload button.
           Assets will only have a `complete` status _after_ it has been created on your dataset.
           As such, we also hide the cancel button when `percentLoaded === 100`, as cancelling when the asset 
           has been fully uploaded (even with a status of `progress`) won't stop the asset from being created.
         */}
-        {!isComplete && percentLoaded !== 100 && (
-          <Flex
-            align="center"
-            direction="column"
-            justify="center"
-            style={{
-              height: '100%',
-              left: 0,
-              position: 'absolute',
-              top: 0,
-              width: '100%'
-            }}
-          >
-            <Tooltip
-              content={
-                <Box padding={2}>
-                  <Text muted size={1}>
-                    Cancel
-                  </Text>
-                </Box>
-              }
-              disabled={'ontouchstart' in window}
-              placement="top"
+          {!isComplete && percentLoaded !== 100 && (
+            <Flex
+              align="center"
+              direction="column"
+              justify="center"
+              style={{
+                height: '100%',
+                left: 0,
+                position: 'absolute',
+                top: 0,
+                width: '100%'
+              }}
             >
-              <Button
-                fontSize={4}
-                icon={CloseIcon}
-                mode="bleed"
-                onClick={handleCancelUpload}
-                padding={2}
-                style={{background: 'none', boxShadow: 'none'}}
-                tone="critical"
-              />
-            </Tooltip>
-          </Flex>
-        )}
-      </Box>
+              <Tooltip
+                content={
+                  <Box padding={2}>
+                    <Text muted size={1}>
+                      Cancel
+                    </Text>
+                  </Box>
+                }
+                disabled={'ontouchstart' in window}
+                placement="top"
+              >
+                <Button
+                  fontSize={4}
+                  icon={CloseIcon}
+                  mode="bleed"
+                  onClick={handleCancelUpload}
+                  padding={2}
+                  style={{background: 'none', boxShadow: 'none'}}
+                  tone="critical"
+                />
+              </Tooltip>
+            </Flex>
+          )}
+        </Box>
 
-      {/* Footer */}
-      <Flex
-        align="center"
-        justify="space-between"
-        paddingX={2}
-        style={{height: `${PANEL_HEIGHT}px`}}
-      >
-        <Box flex={1} marginRight={1}>
-          <Text size={0} textOverflow="ellipsis">
-            {item.name} ({fileSize})
+        {/* Footer */}
+        <Flex
+          align="center"
+          justify="space-between"
+          paddingX={2}
+          style={{height: `${PANEL_HEIGHT}px`}}
+        >
+          <Box flex={1} marginRight={1}>
+            <Text size={0} textOverflow="ellipsis">
+              {item.name} ({fileSize})
+            </Text>
+          </Box>
+          <Text size={0} style={{flexShrink: 0}} weight="semibold">
+            {status}
           </Text>
-        </Box>
-        <Text size={0} style={{flexShrink: 0}} weight="semibold">
-          {status}
-        </Text>
+        </Flex>
       </Flex>
-    </Flex>
+    </CardWrapper>
   )
 }
 

diff --git a/src/components/DialogAssetEdit/index.tsx b/src/components/DialogAssetEdit/index.tsx
@@ -39,7 +39,7 @@ const formSchema = yup.object().shape({
 })
 
 const getFilenameWithoutExtension = (asset?: Asset): string | undefined => {
-  const extensionIndex = asset?.originalFilename?.lastIndexOf(`.${asset.extension}`)
+  const extensionIndex = asset?.originalFilename?.toLowerCase().lastIndexOf(`.${asset.extension}`)
   return asset?.originalFilename?.slice(0, extensionIndex)
 }