Merge pull request #12428 from strapi/content-92/remove-assets-upload

UploadDialog: allow removing assets before uploading

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

@@ -8,11 +8,33 @@ import { AssetType, AssetDefinition } from '../../constants';
 import { createAssetUrl } from '../../utils/createAssetUrl';
 import toSingularTypes from '../../utils/toSingularTypes';
 
-export const AssetCard = ({ allowedTypes, asset, isSelected, onSelect, onEdit, size, local }) => {
+export const AssetCard = ({
+  allowedTypes,
+  asset,
+  isSelected,
+  onSelect,
+  onEdit,
+  onRemove,
+  size,
+  local,
+}) => {
   const singularTypes = toSingularTypes(allowedTypes);
 
   let handleSelect = onSelect ? () => onSelect(asset) : undefined;
   const fileType = asset.mime.split('/')[0];
+  const commonAssetCardProps = {
+    id: asset.id,
+    extension: getFileExtension(asset.ext),
+    key: asset.id,
+    name: asset.name,
+    url: local ? asset.url : createAssetUrl(asset, true),
+    mime: asset.mime,
+    onEdit: onEdit ? () => onEdit(asset) : undefined,
+    onSelect: handleSelect,
+    onRemove: onRemove ? () => onRemove(asset) : undefined,
+    selected: isSelected,
+    size,
+  };
 
   if (asset.mime.includes(AssetType.Video)) {
     const canSelectAsset = singularTypes.includes(fileType);
@@ -21,20 +43,7 @@ export const AssetCard = ({ allowedTypes, asset, isSelected, onSelect, onEdit, s
       handleSelect = undefined;
     }
 
-    return (
-      <VideoAssetCard
-        id={asset.id}
-        key={asset.id}
-        name={asset.name}
-        extension={getFileExtension(asset.ext)}
-        url={local ? asset.url : createAssetUrl(asset, true)}
-        mime={asset.mime}
-        onEdit={onEdit ? () => onEdit(asset) : undefined}
-        onSelect={handleSelect}
-        selected={isSelected}
-        size={size}
-      />
-    );
+    return <VideoAssetCard {...commonAssetCardProps} />;
   }
 
   if (asset.mime.includes(AssetType.Image)) {
@@ -46,18 +55,11 @@ export const AssetCard = ({ allowedTypes, asset, isSelected, onSelect, onEdit, s
 
     return (
       <ImageAssetCard
-        id={asset.id}
-        key={asset.id}
-        name={asset.name}
+        {...commonAssetCardProps}
         alt={asset.alternativeText || asset.name}
-        extension={getFileExtension(asset.ext)}
         height={asset.height}
-        width={asset.width}
         thumbnail={prefixFileUrlWithBackendUrl(asset?.formats?.thumbnail?.url || asset.url)}
-        onEdit={onEdit ? () => onEdit(asset) : undefined}
-        onSelect={handleSelect}
-        selected={isSelected}
-        size={size}
+        width={asset.width}
       />
     );
   }
@@ -68,18 +70,7 @@ export const AssetCard = ({ allowedTypes, asset, isSelected, onSelect, onEdit, s
     handleSelect = undefined;
   }
 
-  return (
-    <DocAssetCard
-      id={asset.id}
-      key={asset.id}
-      name={asset.name}
-      extension={getFileExtension(asset.ext)}
-      onEdit={onEdit ? () => onEdit(asset) : undefined}
-      onSelect={handleSelect}
-      selected={isSelected}
-      size={size}
-    />
-  );
+  return <DocAssetCard {...commonAssetCardProps} />;
 };
 
 AssetCard.defaultProps = {
@@ -89,6 +80,7 @@ AssetCard.defaultProps = {
   local: false,
   onSelect: undefined,
   onEdit: undefined,
+  onRemove: undefined,
   size: 'M',
 };
 
@@ -98,6 +90,7 @@ AssetCard.propTypes = {
   local: PropTypes.bool,
   onSelect: PropTypes.func,
   onEdit: PropTypes.func,
+  onRemove: PropTypes.func,
   isSelected: PropTypes.bool,
   size: PropTypes.oneOf(['S', 'M']),
 };

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

@@ -16,6 +16,7 @@ import {
 } from '@strapi/design-system/Card';
 import { IconButton } from '@strapi/design-system/IconButton';
 import Pencil from '@strapi/icons/Pencil';
+import Trash from '@strapi/icons/Trash';
 import { useIntl } from 'react-intl';
 import { getTrad } from '../../utils';
 
@@ -32,6 +33,7 @@ export const ImageAssetCard = ({
   selected,
   onSelect,
   onEdit,
+  onRemove,
   size,
   alt,
 }) => {
@@ -46,13 +48,26 @@ export const ImageAssetCard = ({
     <Card>
       <CardHeader>
         {onSelect && <CardCheckbox value={selected} onValueChange={onSelect} />}
-        {onEdit && (
+        {(onRemove || onEdit) && (
           <CardAction position="end">
-            <IconButton
-              label={formatMessage({ id: getTrad('control-card.edit'), defaultMessage: 'Edit' })}
-              icon={<Pencil />}
-              onClick={onEdit}
-            />
+            {onRemove && (
+              <IconButton
+                label={formatMessage({
+                  id: getTrad('control-card.remove-selection'),
+                  defaultMessage: 'Remove from selection',
+                })}
+                icon={<Trash />}
+                onClick={onRemove}
+              />
+            )}
+
+            {onEdit && (
+              <IconButton
+                label={formatMessage({ id: getTrad('control-card.edit'), defaultMessage: 'Edit' })}
+                icon={<Pencil />}
+                onClick={onEdit}
+              />
+            )}
           </CardAction>
         )}
         <CardAsset src={optimizedCachingThumbnail} size={size} alt={alt} />
@@ -81,6 +96,7 @@ ImageAssetCard.defaultProps = {
   selected: false,
   onEdit: undefined,
   onSelect: undefined,
+  onRemove: undefined,
   size: 'M',
 };
 
@@ -91,6 +107,7 @@ ImageAssetCard.propTypes = {
   name: PropTypes.string.isRequired,
   onEdit: PropTypes.func,
   onSelect: PropTypes.func,
+  onRemove: PropTypes.func,
   width: PropTypes.number,
   thumbnail: PropTypes.string.isRequired,
   selected: PropTypes.bool,

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

@@ -23,6 +23,7 @@ export const PendingAssetStep = ({
   addUploadedFiles,
   onClose,
   onEditAsset,
+  onRemoveAsset,
   assets,
   onClickAddAsset,
   onCancelUpload,
@@ -126,6 +127,7 @@ export const PendingAssetStep = ({
                       local
                       alt={asset.name}
                       onEdit={onEditAsset}
+                      onRemove={onRemoveAsset}
                     />
                   </GridItem>
                 );
@@ -168,6 +170,7 @@ PendingAssetStep.propTypes = {
   assets: PropTypes.arrayOf(AssetDefinition).isRequired,
   onClose: PropTypes.func.isRequired,
   onEditAsset: PropTypes.func.isRequired,
+  onRemoveAsset: PropTypes.func.isRequired,
   onClickAddAsset: PropTypes.func.isRequired,
   onUploadSucceed: PropTypes.func.isRequired,
   onCancelUpload: PropTypes.func.isRequired,

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

@@ -78,6 +78,11 @@ export const UploadAssetDialog = ({
     }
   };
 
+  const handleRemoveAsset = assetToRemove => {
+    const nextAssets = assets.filter(asset => asset !== assetToRemove);
+    setAssets(nextAssets);
+  };
+
   return (
     <ModalLayout onClose={handleClose} labelledBy="title">
       {step === Steps.AddAsset && (
@@ -93,6 +98,7 @@ export const UploadAssetDialog = ({
           onClose={handleClose}
           assets={assets}
           onEditAsset={setAssetToEdit}
+          onRemoveAsset={handleRemoveAsset}
           onClickAddAsset={moveToAddAsset}
           onCancelUpload={handleCancelUpload}
           onUploadSucceed={handleUploadSuccess}