fix: filter dropped files before trying to upload

packages/core/upload/admin/src/components/MediaLibraryInput/index.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
+import { useNotification } from '@strapi/helper-plugin';
 
 import { AssetDialog } from '../AssetDialog';
 import { AssetDefinition } from '../../constants';
@@ -35,6 +36,7 @@ export const MediaLibraryInput = ({
   const [droppedAssets, setDroppedAssets] = useState();
   const [folderId, setFolderId] = useState(null);
   const { formatMessage } = useIntl();
+  const toggleNotification = useNotification();
 
   useEffect(() => {
     // Clear the uploaded files on close
@@ -100,8 +102,24 @@ export const MediaLibraryInput = ({
   };
 
   const handleAssetDrop = (assets) => {
-    setDroppedAssets(assets);
-    setStep(STEPS.AssetUpload);
+    const allowedAssets = getAllowedFiles(fieldAllowedTypes, assets);
+
+    if (allowedAssets.length > 0) {
+      setDroppedAssets(allowedAssets);
+      setStep(STEPS.AssetUpload);
+    } else {
+      toggleNotification({
+        type: 'warning',
+        timeout: 4000,
+        message: {
+          id: 'input.notification.not-supported',
+          defaultMessage: `You can't upload this type of file, only the following types are accepted – ${fieldAllowedTypes.join(
+            ','
+          )}`,
+          assetTypes: fieldAllowedTypes.join(','),
+        },
+      });
+    }
   };
 
   let label = intlLabel.id ? formatMessage(intlLabel) : '';

packages/core/upload/admin/src/translations/en.json

@@ -38,6 +38,7 @@
   "input.placeholder.icon": "Drop the asset in this zone",
   "input.url.description": "Separate your URL links by a carriage return.",
   "input.url.label": "URL",
+  "input.notification.not-supported": "You can't upload this type of file.",
   "list.assets.title": "Assets ({count})",
   "list.asset.at.finished": "The assets have finished loading.",
   "list.assets-empty.search": "No result found",