Getting the filename from filefield Extjs widget

Question

Is there some way of getting the file name from the filefield widget in Extjs?

I could use the value below but this gives me a c:\fakepath\blah string. And in Internet Explorer its different again.

    xtype: 'filefield',
    itemId: 'fileupload-field',

    listeners: {
        change: function (fld, value) {
            var fuf = Ext.ComponentQuery.query("#fileupload-field");
            //??
        }
    }

Rather than perform all this string manipulation (which is harder than it seems since the path is not character escaped) to get to the filename, I would expect that the filefield component would have a method or attribute which just gives me the filename

However looking at the API I do not see anything that can help me.

score 4 · Answer 1 · answered Apr 09 '17 at 12:20

4

xtype: 'filefield',
itemId: 'fileupload-field',

listeners: {
    change: function (fld, value) {
        var newValue = value.replace(/^.*\\/, "");;
        fld.setRawValue(newValue);
    }
}

answered Apr 09 '17 at 12:20

Kavan Fatehi

41
4

Please add an explanation of what this code does and how it answers the question. – Al Sweigart Apr 09 '17 at 17:46
/ / denotes the start and end of regular expression. ^ - denotes start of string. . - denotes any character. * - denotes any character succeeding it can appear multiple times. So if you combine it all and read - replace "from the beginning any character including mutiple \ characters" with blank space. So that will leave a string like D:\Folder\filename.png with only filename.png – AswathyPrasad Nov 08 '17 at 14:32

score 1 · Answer 2 · edited May 23 '17 at 11:54

1

Ext.create('Ext.form.Panel', {
            title: 'Upload a Photo',
            width: 400,
            bodyPadding: 10,
            frame: true,
            renderTo: Ext.getBody(),
            items: [{
                xtype: 'filefield',
                name: 'photo',
                fieldLabel: 'Photo',
                labelWidth: 50,
                msgTarget: 'side',
                allowBlank: false,
                anchor: '100%',
                buttonText: 'Select Photo...',
                listeners: {
                    change: function(fld, value) {
                        alert(value.replace(/C:\\fakepath\\/g, ''));    

                    }
                }
            }]
        });

https://fiddle.sencha.com/#fiddle/dgr

Filefield with extjs 4.2 without fakepath

edited May 23 '17 at 11:54

Community

1
1

answered Nov 17 '14 at 16:24

Aleksei Mialkin

2,257
1
28
26

What is really weird is that *fakepath* works for chrome and IE in your sencha fiddle. But when I use it in my application I get fakepath for Chrome, but IE STILL always uses the ACTUAL path... this is driving me cRaZy... – Oliver Watkins Nov 17 '14 at 16:33
Sorry, I haven't seen your comment first in that topic I pasted my link above. What exact version of ExtJs do you use in your application? Try playing with versions in Sencha's fiddle, maybe it has something to do with a bug in some specific version of ExtJs – Aleksei Mialkin Nov 17 '14 at 16:36
1

I tried. Its exactly the same version. In the sencha fiddle it works flawlessly but in my applicaiton it shows the real path in IE. I HATE Internet Explorer SO MUCH – Oliver Watkins Nov 17 '14 at 16:48

Getting the filename from filefield Extjs widget

2 Answers2