new AjaxUpload accept only image from button tag

Question

I have here a button with an onload script.

HTML

<button class="btn default-btn logo_btn" id="photo_uploader">Upload New Photo</button>

SCRIPT

$(function(){
var btnUpload=$('#photo_uploader');
new AjaxUpload(btnUpload, {
    action: base_URL+'upload',
    data: {pid:$('#page').data('id') },
    dataType: 'json',
    name: 'fileToUpload',
    onSubmit: function(file, ext){
        console.log('onSubmit triggred');
        console.log(ext);
        xr_load(['#logo_btns',"start"]);
         if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
             alert ('images only');
        }
    }
});

Upon selection, I can see all the filetypes. What I want is to see image file types only automatically like using input file with accept attribute.

Audio

Answer 1

Best if you use the following

<input type="file" accept="image/*">

all the modern browser supports this.

Maura

the reason i dont use input type file is the design. its better to design button tag – Audio

Then hide the input with css...and then use a button to generate click on the input with javascript..... – Maura

So there will be no solution for this one? – Audio

Of course there is....as I mentioned above, hide the input and on the button set the onclick to ("input[type='file']").focus(); or you can also use click(); – Maura

After that you can use ("input[type='file']").change(function(){....get the value and upload the file....}); – Maura