diff --git a/packages/admin-test-utils/package.json b/packages/admin-test-utils/package.json index 60ee8d2556..15bbe0c6fd 100644 --- a/packages/admin-test-utils/package.json +++ b/packages/admin-test-utils/package.json @@ -19,7 +19,7 @@ "main": "lib/index.js", "devDependencies": { "@testing-library/jest-dom": "5.16.5", - "core-js": "3.26.1", + "core-js": "3.27.1", "jest-styled-components": "7.1.1", "react": "^17.0.2", "react-dom": "^17.0.2", diff --git a/packages/core/admin/admin/src/components/Notifications/Notification/index.js b/packages/core/admin/admin/src/components/Notifications/Notification/index.js index 38b8138830..a57a57a489 100644 --- a/packages/core/admin/admin/src/components/Notifications/Notification/index.js +++ b/packages/core/admin/admin/src/components/Notifications/Notification/index.js @@ -77,6 +77,7 @@ const Notification = ({ dispatch, notification }) => { {formattedMessage({ id: message?.id || message, defaultMessage: message?.defaultMessage || message?.id || message, + values: message?.values, })} ); diff --git a/packages/core/upload/admin/src/components/MediaLibraryInput/index.js b/packages/core/upload/admin/src/components/MediaLibraryInput/index.js index b02c02f12b..eeea6eb933 100644 --- a/packages/core/upload/admin/src/components/MediaLibraryInput/index.js +++ b/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'; @@ -8,6 +9,7 @@ import { CarouselAssets } from './Carousel/CarouselAssets'; import { EditFolderDialog } from '../EditFolderDialog'; import { UploadAssetDialog } from '../UploadAssetDialog/UploadAssetDialog'; import getAllowedFiles from '../../utils/getAllowedFiles'; +import getTrad from '../../utils/getTrad'; const STEPS = { AssetSelect: 'SelectAsset', @@ -35,6 +37,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 +103,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: getTrad('input.notification.not-supported'), + defaultMessage: `You can't upload this type of file.`, + values: { + fileTypes: fieldAllowedTypes.join(','), + }, + }, + }); + } }; let label = intlLabel.id ? formatMessage(intlLabel) : ''; diff --git a/packages/core/upload/admin/src/translations/en.json b/packages/core/upload/admin/src/translations/en.json index 889b050efa..85edf41d75 100644 --- a/packages/core/upload/admin/src/translations/en.json +++ b/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, only the following types are accepted – {fileTypes}", "list.assets.title": "Assets ({count})", "list.asset.at.finished": "The assets have finished loading.", "list.assets-empty.search": "No result found", diff --git a/yarn.lock b/yarn.lock index 721983df25..4a65f9b84d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9214,10 +9214,10 @@ core-js-pure@^3.20.2, core-js-pure@^3.23.3: resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.27.1.tgz#ede4a6b8440585c7190062757069c01d37a19dca" integrity sha512-BS2NHgwwUppfeoqOXqi08mUqS5FiZpuRuJJpKsaME7kJz0xxuk0xkhDdfMIlP/zLa80krBqss1LtD7f889heAw== -core-js@3.26.1, core-js@^3.0.4, core-js@^3.6.5, core-js@^3.8.2: - version "3.26.1" - resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.26.1.tgz#7a9816dabd9ee846c1c0fe0e8fcad68f3709134e" - integrity sha512-21491RRQVzUn0GGM9Z1Jrpr6PNPxPi+Za8OM9q4tksTSnlbXXGKK1nXNg/QvwFYettXvSX6zWKCtHHfjN4puyA== +core-js@3.27.1, core-js@^3.0.4, core-js@^3.6.5, core-js@^3.8.2: + version "3.27.1" + resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.27.1.tgz#23cc909b315a6bb4e418bf40a52758af2103ba46" + integrity sha512-GutwJLBChfGCpwwhbYoqfv03LAfmiz7e7D/BNxzeMxwQf10GRSzqiOjx7AmtEk+heiD/JWmBuyBPgFtx0Sg1ww== core-js@3.6.5: version "3.6.5"