Cancelling assets

packages/core/upload/admin/src/components/AssetCard/UploadingAssetCard.js

@@ -53,7 +53,7 @@ const CancelButton = styled.button`
   }
 `;
 
-export const UploadingAssetCard = ({ name, extension, assetType, file }) => {
+export const UploadingAssetCard = ({ name, extension, assetType, file, onCancel }) => {
   const { upload, cancel, error, progress } = useUpload();
   const { formatMessage } = useIntl();
 
@@ -78,9 +78,17 @@ export const UploadingAssetCard = ({ name, extension, assetType, file }) => {
 
   useEffect(() => {
     upload(file);
+
+    return () => {
+      cancel();
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const handleCancel = () => {
+    onCancel(file);
+  };
+
   return (
     <Stack size={1}>
       <Card borderColor={error ? 'danger600' : undefined}>
@@ -97,11 +105,11 @@ export const UploadingAssetCard = ({ name, extension, assetType, file }) => {
               <>
                 <Box paddingBottom={2}>
                   <ProgressBar value={progress} size="S">
-                    {progress}/100%
+                    {`${progress}/100%`}
                   </ProgressBar>
                 </Box>
 
-                <CancelButton type="button" onClick={cancel}>
+                <CancelButton type="button" onClick={handleCancel}>
                   <Text small as="span" textColor="neutral200">
                     {formatMessage({
                       id: 'app.components.Button.cancel',
@@ -142,4 +150,5 @@ UploadingAssetCard.propTypes = {
   extension: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   file: PropTypes.instanceOf(File).isRequired,
+  onCancel: PropTypes.func.isRequired,
 };

packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.js

@@ -16,7 +16,7 @@ import { UploadingAssetCard } from '../../AssetCard/UploadingAssetCard';
 import { getTrad } from '../../../utils';
 import { AssetType, AssetSource } from '../../../constants';
 
-export const PendingAssetStep = ({ onClose, assets, onClickAddAsset }) => {
+export const PendingAssetStep = ({ onClose, assets, onClickAddAsset, onCancelUpload }) => {
   const { formatMessage } = useIntl();
   const [isUploading, setIsUploading] = useState(false);
 
@@ -79,6 +79,7 @@ export const PendingAssetStep = ({ onClose, assets, onClickAddAsset }) => {
                         assetType={asset.type}
                         file={asset.rawFile}
                         size="S"
+                        onCancel={onCancelUpload}
                       />
                     </GridItem>
                   );
@@ -173,4 +174,5 @@ PendingAssetStep.propTypes = {
   ).isRequired,
   onClose: PropTypes.func.isRequired,
   onClickAddAsset: PropTypes.func.isRequired,
+  onCancelUpload: PropTypes.func.isRequired,
 };

packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/PendingAssetStep.test.js

@@ -62,6 +62,7 @@ describe('PendingAssetStep', () => {
             onClose={jest.fn()}
             onAddAsset={jest.fn()}
             onClickAddAsset={jest.fn()}
+            onCancelUpload={jest.fn()}
           />
         </ThemeProvider>
       </QueryClientProvider>

packages/core/upload/admin/src/components/UploadAssetDialog/UploadAssetDialog.js

@@ -23,13 +23,28 @@ export const UploadAssetDialog = ({ onSuccess, onClose }) => {
     setStep(Steps.AddAsset);
   };
 
+  const handleCancelUpload = file => {
+    const nextAssets = assets.filter(asset => asset.rawFile !== file);
+    setAssets(nextAssets);
+
+    // When there's no asset, transition to the AddAsset step
+    if (nextAssets.length === 0) {
+      moveToAddAsset();
+    }
+  };
+
   return (
     <ModalLayout onClose={onClose} labelledBy="title">
       {step === Steps.AddAsset && (
         <AddAssetStep onClose={onClose} onAddAsset={handleAddToPendingAssets} />
       )}
       {step === Steps.PendingAsset && (
-        <PendingAssetStep onClose={onClose} assets={assets} onClickAddAsset={moveToAddAsset} />
+        <PendingAssetStep
+          onClose={onClose}
+          assets={assets}
+          onClickAddAsset={moveToAddAsset}
+          onCancelUpload={handleCancelUpload}
+        />
       )}
     </ModalLayout>
   );