Add accept="image/*" attribute to input field in ExtJs

Question

I want to add client side validation for file upload using HTML5 "accept" attribute and ExtJs "inputAttrTpl" config. My ExtJs code is following (ExtJs 4.1):

{
              xtype : 'filefield',
              action : 'upload',
              name : 'file',
              inputAttrTpl: 'accept="image/*"',
              hideLabel : true,
              buttonOnly : true,
              anchor : '100%',
              buttonText : 'Upload img...',
              margin: 5
}

But when I am checking file field in firebug, it doesn't contain "accept" attribute. Can you suggest some solutions for this issue? Thanks for your replies.

Scrouge

It does exactly what you describe. <input id="filefield-1010-inputEl" type="text" accept="image/*" size="1" ... – Orthoscope

The 'accept' attribute is actually being added to the text input in this case, it actually needs to be on the file input to work. The answer by @Neil McGuigan below seems to do what you want. – Thereinto

Answer 1

{
  xtype:'filefield',
  listeners:{
    afterrender:function(cmp){
      cmp.fileInputEl.set({
        accept:'audio/*'
      });
    }
  }
}

You can set accept to "" to remove the restriction.

Fiddle

Lemniscus

But with this restriction don't ensure that the file is an audio/image/whatever file, because you can change the type of file in the popup window and select any file. How could I check in client side that the file is an image??? – Carcinoma

@Carcinoma you can use the HTML5 file api to check the type of the file before upload. – Lemniscus

Besides this listener, you also need to override the reset method. See #22555121 – Panicle

Answer 2

{
        xtype: 'fileuploadfield',
        name: 'file',
        fieldLabel: 'Photo',
        labelWidth: 50,
        allowBlank: false,
        buttonText: 'SelectPhoto',
        anchor: '100%',
        reset: function () {
            var me = this,
                clear = me.clearOnSubmit;
            if (me.rendered) {
                me.button.reset(clear);
                me.fileInputEl = me.button.fileInputEl;
                me.fileInputEl.set({
                    accept: 'image/*'
                });
                if (clear) {
                    me.inputEl.dom.value = '';
                }
                me.callParent();
            }},
        listeners:{
            change: 'fileInputChange',
            afterrender:function(cmp){
                cmp.fileInputEl.set({
                    accept:'image/*'
                });
            }
        },
        regex: /(.)+((\.png)|(\.jpg)|(\.jpeg)(\w)?)$/i,
        regexText: 'Only PNG and JPEG image formats are accepted'
    }

Rosario