Customizer Uploader doesn't restrict by file type

[pento]

When using the Theme Customizer to upload a new background image, it doesn't restrict the file types that can be uploaded. For example, I can upload a video file, the file will be uploaded and inserted into the Media Library, then the Customizer will try to treat it like an image.

I think the best way around this would be to restrict uploads in the Customizer to images only.

[kovshenin]

Confirmed. This is also true for the old Custom Header and Custom Background upload fields. Here's what I get when I upload a PDF as a Header Image: ​http://cl.ly/image/3P2c1I0o2e2H And when I do that with Custom Background I get the "Background updated" message, and the background-image in body.custom-background now points to my PDF file.

[kovshenin]

Limits uploads to only images in custom-header.php and custom-background.php

[kovshenin]

Uses wp_match_mime_types to compare to valid image mime types.

[kovshenin]

Added a similar scenario for async uploads.

[kovshenin]

The async fix in 22149.3.diff won't work unless the Customizer upload control passes on the context, which, judging by the code in customize-controls.js, it should in post_data[context]. Opened #22215.

[MikeHansenMe]

Tested patch 22149.3.diff and 22149.2.diff and both worked on custom-header.php and custom-background.php. However, I am able to upload mp4 files and pdf on the customizer without warning.

[kovshenin]

Replying to MikeHansenMe:

22149.3.diff should block non-image uploads in the Customizer only when the patch is #22215 is applied.

[MikeHansenMe]

Confirmed with patch from #22215 22149.3.diff blocks the upload.

[nacin]

Needs testing and commit.

[DrewAPicture]

22149.3.diff with 22215.diff works as expected for me.

[koopersmith]

For custom headers and backgrounds, this looks solid.

For the customizer (and anything that uses Plupload), we can limit the filetypes that a Plupload will accept via JS (see the filter property), and could block the uploads earlier on as a result.

At this point, it probably makes sense to land the customizer-specific code as well.

[koopersmith]

In [22492] — Customizer: Restrict image control uploaders to only allow image file types. see #22149.

[koopersmith]

While [22492] works, Plupload's falls back to the browser's default behavior for filetypes it doesn't recognize, which is pretty universally a terrible experience. So we might just want to reject it PHP-side for now.

[nacin]

In theory, [22492] is the best solution. In practice, Plupload handles disallowed files terribly, by falling back to the browser default. That means HTML files replace the entire viewport, ZIP files get re-downloaded, etc. I'd rather revert and go with solely 22149.3.diff​.

[nacin]

koopersmith and I were both testing this with drag events. This is definitely a better experience for the dialog, because non-images are grayed out. We should be able to intercept the drag event for disallowed files in our own Plupload handlers/wrappers. So I'm going to leave it for now.

[nacin]

In 22519:

Customizer uploader control: Pass arrays of extensions around instead. see #22149.

[nacin]

In 22521:

Don't allow non-image uploads for custom headers and backgrounds. props kovshenin. fixes #22149.

[nacin]

I opened #22403 as a follow-up.