Fix ML feebacks from QA (#11495)

packages/core/upload/admin/src/components/EditAssetDialog/PreviewBox/index.js

@@ -73,11 +73,11 @@ export const PreviewBox = ({
     const nextAsset = { ...asset, width, height };
     const file = await produceFile(nextAsset.name, nextAsset.mime, nextAsset.updatedAt);
 
-    await editAsset(nextAsset, file);
+    const updatedAsset = await editAsset(nextAsset, file);
 
     // Making sure that when persisting the new asset, the URL changes with width and height
     // So that the browser makes a request and handle the image caching correctly at the good size
-    const optimizedCachingImage = createAssetUrl(asset);
+    const optimizedCachingImage = createAssetUrl(updatedAsset);
     setAssetUrl(optimizedCachingImage);
 
     stopCropping();

packages/core/upload/admin/src/components/MediaLibraryInput/Carousel/CarouselAssetActions.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { CarouselActions } from '@strapi/design-system/Carousel';
 import { IconButton } from '@strapi/design-system/IconButton';
@@ -10,20 +10,11 @@ import PencilIcon from '@strapi/icons/Pencil';
 import getTrad from '../../../utils/getTrad';
 import { CopyLinkButton } from '../../CopyLinkButton';
 import { AssetDefinition } from '../../../constants';
-import { EditAssetDialog } from '../../EditAssetDialog';
 
-export const CarouselAssetActions = ({
+export const CarouselAssetActions = ({ asset, onDeleteAsset, onAddAsset, onEditAsset }) => {
-  asset,
-  onDeleteAsset,
-  onDeleteAssetFromMediaLibrary,
-  onAddAsset,
-  onEditAsset,
-}) => {
   const { formatMessage } = useIntl();
-  const [isEditDialogOpened, setEditDialogOpened] = useState(false);
 
   return (
-    <>
     <CarouselActions>
       {onAddAsset && (
         <IconButton
@@ -56,32 +47,10 @@ export const CarouselAssetActions = ({
             defaultMessage: 'edit',
           })}
           icon={<PencilIcon />}
-            onClick={() => setEditDialogOpened(true)}
+          onClick={onEditAsset}
         />
       )}
     </CarouselActions>
-
-      {isEditDialogOpened && (
-        <EditAssetDialog
-          onClose={editedAsset => {
-            setEditDialogOpened(false);
-
-            // The asset has been deleted
-            if (editedAsset === null) {
-              onDeleteAssetFromMediaLibrary();
-            }
-
-            if (editedAsset) {
-              onEditAsset(editedAsset);
-            }
-          }}
-          asset={asset}
-          canUpdate
-          canCopyLink
-          canDownload
-        />
-      )}
-    </>
   );
 };
 
@@ -96,5 +65,4 @@ CarouselAssetActions.propTypes = {
   onAddAsset: PropTypes.func,
   onEditAsset: PropTypes.func,
   onDeleteAsset: PropTypes.func,
-  onDeleteAssetFromMediaLibrary: PropTypes.func.isRequired,
 };

packages/core/upload/admin/src/components/MediaLibraryInput/Carousel/CarouselAssets.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { Carousel, CarouselSlide } from '@strapi/design-system/Carousel';
@@ -7,6 +7,7 @@ import { AssetDefinition } from '../../../constants';
 import { CarouselAssetActions } from './CarouselAssetActions';
 import { CarouselAsset } from './CarouselAsset';
 import { EmptyStateAsset } from './EmptyStateAsset';
+import { EditAssetDialog } from '../../EditAssetDialog';
 
 export const CarouselAssets = ({
   assets,
@@ -24,10 +25,12 @@ export const CarouselAssets = ({
   selectedAssetIndex,
 }) => {
   const { formatMessage } = useIntl();
+  const [isEditingAsset, setIsEditingAsset] = useState(false);
 
   const currentAsset = assets[selectedAssetIndex];
 
   return (
+    <>
       <Carousel
         label={label}
         selectedSlide={selectedAssetIndex}
@@ -50,7 +53,7 @@ export const CarouselAssets = ({
               onDeleteAsset={disabled ? undefined : onDeleteAsset}
               onDeleteAssetFromMediaLibrary={onDeleteAssetFromMediaLibrary}
               onAddAsset={disabled ? undefined : onAddAsset}
-            onEditAsset={onEditAsset}
+              onEditAsset={onEditAsset ? () => setIsEditingAsset(true) : undefined}
             />
           ) : (
             undefined
@@ -83,6 +86,28 @@ export const CarouselAssets = ({
           ))
         )}
       </Carousel>
+
+      {isEditingAsset && (
+        <EditAssetDialog
+          onClose={editedAsset => {
+            setIsEditingAsset(false);
+
+            // The asset has been deleted
+            if (editedAsset === null) {
+              onDeleteAssetFromMediaLibrary();
+            }
+
+            if (editedAsset) {
+              onEditAsset(editedAsset);
+            }
+          }}
+          asset={currentAsset}
+          canUpdate
+          canCopyLink
+          canDownload
+        />
+      )}
+    </>
   );
 };
 

packages/core/upload/admin/src/hooks/useUpload.js

@@ -11,7 +11,15 @@ const uploadAsset = (file, cancelToken, onProgress) => {
   const formData = new FormData();
 
   formData.append('files', file);
-  formData.append('fileInfo', JSON.stringify(file));
+
+  formData.append(
+    'fileInfo',
+    JSON.stringify({
+      alternativeText: file.name,
+      caption: file.name,
+      name: file.name,
+    })
+  );
 
   return axiosInstance({
     method: 'post',

packages/core/upload/server/controllers/validation/upload.js

@@ -19,7 +19,7 @@ const multiUploadSchema = yup.object({
 const validateUploadBody = (data = {}, isMulti = false) => {
   const schema = isMulti ? multiUploadSchema : uploadSchema;
 
-  return validateYupSchema(schema)(data);
+  return validateYupSchema(schema, { strict: false })(data);
 };
 
 module.exports = validateUploadBody;