This is my input markup:

<div class="button-primary" id="fileToUpload">Upload</div>

This is js:

jQuery( '#fileToUpload' ).click( function()
{
    var custom_uploader = wp.media
    ({
        title: 'Select',
        button: {
            text: 'Select'
        },
        multiple: false  // Set this to true to allow multiple files to be selected.
    })
    .on( 'select', function()
    {
        var attachment = custom_uploader.state().get( 'selection' ).first().toJSON();
        jQuery( '#previewImage' ).attr( 'src', attachment.url );
        jQuery( '.custom_media_url' ).val( attachment.url );
        jQuery( '.custom_media_id' ).val( attachment.id );
    })
    .open();
});

I want to limit the the file type to jpg,jpeg and png. How can i achieve this?

This is my input markup:

<div class="button-primary" id="fileToUpload">Upload</div>

This is js:

jQuery( '#fileToUpload' ).click( function()
{
    var custom_uploader = wp.media
    ({
        title: 'Select',
        button: {
            text: 'Select'
        },
        multiple: false  // Set this to true to allow multiple files to be selected.
    })
    .on( 'select', function()
    {
        var attachment = custom_uploader.state().get( 'selection' ).first().toJSON();
        jQuery( '#previewImage' ).attr( 'src', attachment.url );
        jQuery( '.custom_media_url' ).val( attachment.url );
        jQuery( '.custom_media_id' ).val( attachment.id );
    })
    .open();
});

I want to limit the the file type to jpg,jpeg and png. How can i achieve this?

• jquery
• javascript
• media

Share Improve this question asked Jan 1, 2015 at 3:33 user3193259user3193259 4511 gold badge11 silver badge66 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I have shown your questions and i have found correction in it.

You need to update your code as below.

.on( 'select', function()
{
    var attachment = custom_uploader.state().get( 'selection' ).first().toJSON();
    if(attachment.mime == "image/jpg" || attachment.mime == "image/jpge" || attachment.mime == "image/png")
    {

       jQuery( '#previewImage' ).attr( 'src', attachment.url );
       jQuery( '.custom_media_url' ).val( attachment.url );
       jQuery( '.custom_media_id' ).val( attachment.id );
    }
    else
    {
        alert("Please select jpg,jpeg and png type images only");
        custom_uploader.open();
        return;
    }
})

Thanks you!