Using the following code, I’m trying to allow only certain image types to be upload/selected with the WordPress media API. So I’m using add_filter on upload_mimes to restrict the mime types allowed. Using get_allowed_mime_types() I get an array containing only the mime types I want. However, when I click the change image button, I’m still able to upload files of mime types not listed before (such as PDF). What am I doing wrong?
public static function file_uploader( $element_id = null, $multiple = true )
{
add_filter( 'upload_mimes', array( 'JBLAB_Utils', 'images_upload_mimes' ) );
var_dump( get_allowed_mime_types() );
/**
* outputs:
* array(3) {
* ["jpg|jpeg|jpe"]=>
* string(10) "image/jpeg"
* ["gif"]=>
* string(9) "image/gif"
* ["png"]=>
* string(9) "image/png"
* }
*/
$multiple = ( $multiple === true ) ? 'true' : 'false';
wp_enqueue_script('jquery');
wp_enqueue_media();
?>
<div>
<?php
if ( empty( $element_id ) )
{
$element_id = "jblab_uploaded_file_url";
?>
<label for="jblab_uploaded_file_url"><?php _e( 'Image', 'jblab-radionomy' ); ?></label>
<input type="text" name="jblab_uploaded_file_url" id="jblab_uploaded_file_url" class="regular-text">
<?php
}
?>
<input type="button" name="jblab_upload_file_upload_btn" id="jblab_upload_upload_btn" class="button-secondary" value="<?php _e( 'Change Image', 'jblab-radionomy' ); ?>">
</div>
<script type="text/javascript">
jQuery(document).ready(function($){
$('#jblab_upload_upload_btn').click(function(e) {
e.preventDefault();
var image = wp.media({
title: '<?php echo str_replace( "'", "'", __( 'Change Image', 'jblab-radionomy' ) ); ?>',
multiple: <?php echo $multiple; ?>
}).open()
.on('select', function(e){
var uploaded_image = image.state().get('selection').first();
var image_url = uploaded_image.toJSON().url;
<?php
echo "
if ($('#$element_id').is('img')) {
$('#$element_id').attr('src',image_url);
} else {
$('#$element_id').val(image_url);
}
";
?>
});
});
});
</script>
<?php
}
public static function images_upload_mimes ( $mimes = array() )
{
//unset( $mimes );
$mimes = array(
'jpg|jpeg|jpe' => 'image/jpeg',
'gif' => 'image/gif',
'png' => 'image/png',
);
return $mimes;
}
Ok, so I found a solution to my issue.
I had to move the add_filter outside of the function that is calling the upload API. If anybody has the same problem, try to add_filters as soon as possible in the process, that should do the trick.