How to restrict file type using xtype filefield(extjs 4.1.0)?

Question

I am trying to implement file upload feature using extjs 4.1.0. Whereas I want to restrict users to select only image files(jpg,png,gif). Is there any filter which can be applied so that users will only be able to see and then select the types of the files mentioned above?

Stranded Kid · Answer 1 · 2014-04-22T13:53:20.213

6

You could stuff like this as well :

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

edited Apr 22 '14 at 13:53

answered Feb 21 '14 at 15:30

Stranded Kid

1,395
3
15
23

Which version docs are you looking at ? After checking ExtJS4.2 docs, I see the afterrender event there in the filefield component : http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.form.field.File-event-afterrender The method exists since ExtJS 3.4.0. – Stranded Kid Sep 12 '14 at 08:42
I missed that ( I searched in sencha's doc not Ext) , This is the doc that I'v red http://docs.sencha.com/touch/2.3.1/#!/api/Ext.field.File – zizoujab Sep 12 '14 at 14:23

score 3 · Accepted Answer · answered Oct 19 '12 at 00:01

3

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

answered Oct 19 '12 at 00:01

dbrin

15,525
4
56
83

score 0 · Answer 3 · answered Apr 06 '15 at 23:25

{
        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 a form bind can be put on whatever form or action you are planning on doing.

How to restrict file type using xtype filefield(extjs 4.1.0)?

3 Answers3

Linked