Customizer: allowing to set files other than image for Header background and background image

[umesh.nevase]

When we set header background image or background image from customizer settings, media upload should not allow to upload files other than image.

We can set files other than image, and it shows broken in preview

[afercia]

Thanks @umesh.nevase, just reproduced on trunk, followed steps:

Customizer > Header Image > Add new image > uploaded a .txt file in the "drop zone"

the .txt file is uploaded and I'm given the ability to "select and crop" it :)

Pressing the "Select and Crop" button brings me to the "Crop Image" view which shows a broken image placeholder. No error messages in the console.

Removing the "accssibility" keyword, definitely something worth having a look at though. cc @wonderboymusic

[jagnew]

Possible solution

[jagnew]

Possible solution. However, there is two areas that could be improved:

1) Having to set the filter in both two places in the customize-controls.js
2) Hardcoding the image type extensions

Anyway first time contributing, so always up for learning. Thanks :)

[celloexpressions]

This should probably be addressed more generically in the media component. Essentially the issue is that if the context of the library is set to a specific mime type, the uploader should also restrict accordingly, or there should otherwise be some error reporting.

[celloexpressions]

#33415 was marked as a duplicate.

[ocean90]

Previously: #22149

[ocean90]

#36844 was marked as a duplicate.

[celloexpressions]

Moving to media component for visibility, as the customizer uses the same media modal used elsewhere in core for this UI. If/when the media modal supports restricting uploads by file type, then the customize media controls can map their mime_type parameters to the media JS accordingly. This may already be possible and not implemented correctly in the customize controls.