Results 1 to 6 of 6

Thread: How to filter file types in extjs 5

  1. #1
    Sencha User
    Join Date
    Jul 2013
    Posts
    6

    Default Answered: How to filter file types in extjs 5

    Hi, is there any way to filter file extensions when i try to use xtype: 'filefield'. I mean, only filter jpg files when open file dialog is shown?

    Thanks!

  2. You can use the "accept" attribute of the file input element. Beware though, that this may not be supported in all browsers. http://stackoverflow.com/questions/3...apply-a-filter

    In the past when I've needed to add attributes to the file input element I've used an override such as this:

    Code:
    Ext.define('MyApp.FileFieldAttributes', {
        override: 'Ext.form.field.File',
    
        /**
         * @cfg {Object} fileInputAttributes
         * Extra attributes to add to the file input element.
         */
    
        onRender: function() {
            var me = this,
                attr = me.fileInputAttributes,
                fileInputEl, name;
    
            me.callParent();
            fileInputEl = me.getTrigger('filebutton').component.fileInputEl.dom;
            for (name in attr) {
                fileInputEl.setAttribute(name, attr[name]);
            }
        }
    });
    then you can use it like so:


    Code:
    {
        xtype: 'filefield',
        fileInputAttributes: {
            accept: 'image/*'
        }
    }

  3. #2
    Sencha User Phil Guerrant's Avatar
    Join Date
    May 2011
    Location
    Colorado
    Posts
    352
    Answers
    32

    Default

    You can use the "accept" attribute of the file input element. Beware though, that this may not be supported in all browsers. http://stackoverflow.com/questions/3...apply-a-filter

    In the past when I've needed to add attributes to the file input element I've used an override such as this:

    Code:
    Ext.define('MyApp.FileFieldAttributes', {
        override: 'Ext.form.field.File',
    
        /**
         * @cfg {Object} fileInputAttributes
         * Extra attributes to add to the file input element.
         */
    
        onRender: function() {
            var me = this,
                attr = me.fileInputAttributes,
                fileInputEl, name;
    
            me.callParent();
            fileInputEl = me.getTrigger('filebutton').component.fileInputEl.dom;
            for (name in attr) {
                fileInputEl.setAttribute(name, attr[name]);
            }
        }
    });
    then you can use it like so:


    Code:
    {
        xtype: 'filefield',
        fileInputAttributes: {
            accept: 'image/*'
        }
    }
    Phil Guerrant
    Ext JS - Development Team

  4. #3
    Sencha User
    Join Date
    Jul 2013
    Posts
    6

    Default

    Wow it really works perfectly,Thanks a lot Phil

  5. #4
    Sencha User
    Join Date
    Jul 2013
    Posts
    6

    Default

    Is it possible to select multiple files in the file upload window with extjs?

  6. #5
    Sencha Premium Member valio's Avatar
    Join Date
    Jan 2014
    Posts
    203
    Answers
    8

    Default

    You should override the reset method as well, as the fileInputEl will be destroyed and created anew

    Code:
        // as the reset method destroys the fileInputEl and creates a new one, we have to set the fileInputAttributes again
        reset: function(){
            var me = this,
                attr = me.fileInputAttributes,
                fileInputEl, name;
    
    
            me.callParent();
            fileInputEl = me.getTrigger('filebutton').component.fileInputEl.dom;
            for (name in attr) {
                fileInputEl.setAttribute(name, attr[name]);
            }
    
        }

  7. #6
    Sencha Premium Member valio's Avatar
    Join Date
    Jan 2014
    Posts
    203
    Answers
    8

    Default

    Quote Originally Posted by flxtr View Post
    Is it possible to select multiple files in the file upload window with extjs?
    Yes, you can if you use the workaround mentioned above (don't forget the override on the reset method) and define the filefield like that

    Code:
    {
        xtype: 'filefield',
        fileInputAttributes: {
            multiple: 'multiple'
        }
    }
    But be cautious:
    1) The filefield overriden like that will only show the first filename in it (some additional workaround will probably fix it)
    2) Again not all browsers are supporting this and there won't be any fallback mechanism; another way would be to implement DropzoneJS as ExtJS component (takes some time, but it's worth it; can't post the code right now)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •