How to limit file type using xtype file field (extjs 4.1.0)?

Question

I am trying to implement a file upload function using extjs 4.1.0. While I want to limit users to the choice of only image files (jpg, png, gif). Is there any filter that can be applied so that users can see and then select the file types mentioned above?

Answer 1

See http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.VTypes VAlidation Types for an example of a custom type. You can use regexp to specify alphaMask.

Answer 2

You might look like this:

{ xtype: 'filefield', buttonText: '....', listeners:{ afterrender:function(cmp){ cmp.fileInputEl.set({ accept:'image/*' // or w/e type }); } } } 

Answer 3

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

regex adds client-side validation to which the form binding can be placed in any form or action that you plan to do.