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.

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. — Robert Hunt, Jun 06 '13 at 14:35

Neil McGuigan · Answer 1 · 2014-02-15T06:44:43.637

8

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

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

Fiddle

edited Feb 15 '14 at 06:44

answered Apr 28 '13 at 19:38

Neil McGuigan

46,580
12
123
152

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??? – Alavaros Mar 20 '14 at 12:34
@Alavaros you can use the HTML5 file api to check the type of the file before upload. – Neil McGuigan Mar 23 '14 at 00:16
2

Besides this listener, you also need to override the reset method. See http://stackoverflow.com/questions/22554621/accept-image-in-filefield-extjs/26017499 – jgrocha Feb 15 '15 at 20:54

score 0 · Answer 2 · answered Apr 06 '15 at 23:49

{
        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'
    }

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

2 Answers2

Linked