How to change value of File Field in ExtJS?

Question

I use ExtJS 4.2. I want to change the value of File Field when I browse to a file. The reason for this is to remove the "C:\fakepath" string. Any help is appreciated.

you want to save in database side or show correct value in ui side? — kuldarim, Oct 31 '13 at 07:22
possible duplicate of [Filefield with extjs 4.2 without fakepath](http://stackoverflow.com/questions/22302841/filefield-with-extjs-4-2-without-fakepath) — Lorenz Meyer, Mar 11 '14 at 17:04

score 2 · Answer 1 · answered Oct 31 '13 at 07:34

2

This C:\fakepath comes from browser, so you can't see real path, but it is possible to hide path and show only file name. You can do so by extending file field:

Ext.define('Ext.form.field.ExtFile', {
    extend: 'Ext.form.field.File',

    onFileChange: function(button, e, value) {
        var newValue = value.replace(/^c:\\fakepath\\/i, ''); // remove fakepath

        return this.callParent([ button, e, newValue ]);
    }
});

Working sample: http://jsfiddle.net/Qppjc/1/

answered Oct 31 '13 at 07:34

Krzysztof

15,900
2
46
76

I seems to have problem in Architect. The `onFileChange` function doesn't take `button` parameter. I replaced it with `filefield`. And then there's a JS error when click on browse button: `Cannot call method 'apply' of undefined` – Harry Nov 01 '13 at 03:27
I don't use Architect, so I can't help you. This `Cannot call method 'apply' of undefined` error indicates that some method is not found (`apply` is used for example in `callParent`). You may try to call `Ext.form.field.ExtFile.superclass.onFileChange.apply(this, [ button, e, newValue ])` instead of `this.callParent([ button, e, newValue ])` – Krzysztof Nov 01 '13 at 06:19

score 0 · Answer 2 · answered Sep 12 '17 at 12:37

I've found the best way is to override the field.

Here is the solution for ExtJs 4 & 5 (that also worked for me on ExtJs 6): http://code.tonytuan.org/2014/10/extjs-get-rid-of-fake-path-in-file-field.html

Ext.define('Ext.enhance.form.field.File', {
    override: 'Ext.form.field.File',     
    onFileChange: function(button, e, value) {
        this.duringFileSelect = true;
        Ext.form.field.File.superclass.setValue.call(this, value.replace(/^.*(\\|\/|\:)/, ''));
        delete this.duringFileSelect;
    }   
});

How to change value of File Field in ExtJS?

2 Answers2