WordPress wp_enqueue_media() upload_mimes not filtering

Question

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;
}

Answer 1

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.