Media upload component does not restrict uploaded files by allowedTypes prop.

[ThatStevensGuy]

Describe the bug I am using a duplicate of the Post Featured Image component for a Newsletter attachment which saves to its own post meta.

I noticed that the MediaUpload component will restrict files in the Media Library to the allowed types set in the allowedTypes prop.

However it will still allow any file to be uploaded to the Upload files tab, and then selected.

To fix this I had to add my own mime detection to the onSelect action, which shouldn't really be necessary. Either the Select button should remain disabled after the wrong file type has been uploaded, or the file upload should not be allowed to enter the media library with an error notice.

To reproduce Add MediaUpload to a component, restrict mime types in allowedTypes, then head to the Upload files tab and upload an unsupported file type. It will not appear in the Media library tab, however you can select the file and add it without further mime type detection in your onSelect.

Expected behavior It should not allow the upload of unsupported file types, or not allow selection of the unsupported file.

Editor version (please complete the following information):

• WordPress version: 5.5.1
• Does the website has Gutenberg plugin installed, or is it using the block editor that comes by default? default

[silvanarnet]

I have the same problem with Wordpress 5.6

[Mamaduka]

I was able to reproduce this with WP 5.7.2 and Gutenberg trunk.

[getsource]

Related: #16297

[getsource]

Related: #18593

[getsource]

Related: https://core.trac.wordpress.org/ticket/39625

[andreaslindahl]

I'm still having this problem in 6.0.2 with the additional bug that allowedTypes isn't respected when you select a file from the media gallery either.

I only want to allow selection of images, but even with allowedTypes set to ["image"] I can still select, for example, videos

[Mamaduka]

Hi, @andreaslindahl

Can you share an example code from your plugin?

Core blocks use the same prop/settings, and I cannot reproduce the issue there.

[andreaslindahl]

I'm just doing this:

<MediaUpload
    onSelect={onSelectMedia}
    value={mediaId}
    allowedTypes={["image"]}
    render={({open}) => (
        <Button
            variant="secondary"
            icon={ mediaId ? 'edit' : 'plus' }
            onClick={open}
            > { mediaId ? 'Change media' : 'Choose media' }</Button>
      )}
/>

[adamsilverstein]

I took a look at this during contributor day, dropping a few notes here:

• This issue needs to be fixed in two places: in the Gutenberg media uploader and in the core (media library uploader) - which is also used in Gutenberg with certain user flows.
• The draggable area should not accept types that not in the accepts parameter (or perhaps the allowedTypes parameter based on the docs?). eg. Dragging a non image over the media component shouldn't highlight the area as a drop target. This change is likely in packages/components/src/drop-zone/index.tsx in the onDragStart function.
• When using the core media uploader, similarly the drop target should only highlight when dragging over a supported type (which Gutenberg's image block could restrict to images). The trac ticket (https://core.trac.wordpress.org/ticket/39625) basically covers this although it is focused on the featured image inserted (which should only accept images)
• If a non supported type is already in the media library it shouldn't be selectable. eg. If I have some mp3 audio files in my media library and use the "insert from media library" flow in the image block, I shouldn't be able to select these non-image files
• Finally, when using the select file feature to select a media file to upload, I shouldn't be able to select a non supported type.

[adamsilverstein]

Here are some example screenshots of using Chrome and trying to upload a test HEIC format image to the editor and then to the media library (which prevents the upload entirely). These came up in the context of https://core.trac.wordpress.org/ticket/53645.

Editor upload:

Media library upload (of same file):

[Mamaduka]

@adamsilverstein, related to HEIC issue - #60244.