Search code examples
javascriptjqueryajaxajax-upload

new AjaxUpload accept only image from button tag

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.

Solution

  • Best if you use the following

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

    all the modern browser supports this.