Filefield with extjs 4.2 without fakepath

Question

I want with extjs 4.2

I use this component in attachment :

{
    xtype: 'filefield',
    id: 'file6',
    fieldLabel: 'test ',
    labelWidth: 100,
    msgTarget: 'side',                  
    allowBlank : false,
    anchor: '100%',
    buttonText: 'upload'
},

I want to have a attachment component which display name of file without this text : c /fakepath

Answer 1

Similar to user3550464's answer, but in a whole lot less code:

Add this to your file field listeners object. This code will remove all text up to and including the last slash or backslash in the field.

change: function (field, value) {
    'use strict';
    var newValue = value.replace(/(^.*(\\|\/))?/, "");
    field.setRawValue(newValue);
}

Answer 2

Here is an improvement based on weeksdev's answer. Add the following listener to your file field:

/* remove the path (if any) so that only the file name is displayed
 * note: to be consistent across browsers
 * -- some of them give a fake path, some others give a file name
 */
change: function(fileField, value, eventOptions) {
    var newValue;
    var lastForwardSlash = value.lastIndexOf('\/');
    /* if this is a Windows-based path or just a file name
     * (Windows-based paths and file names in general don't contain forward slashes)
     */
    if (lastForwardSlash < 0) {
        /* remove the characters before the last backslash (included)
         * but only for Windows users -- as UNIX-like file names may contain backslashes
         */
        if (Ext.isWindows === true) {
            newValue = value.substring(value.lastIndexOf('\\') + 1);
        } else {
            newValue = value;
        }
    }
    // there is a forward slash: this is a UNIX-like (Linux, MacOS) path
    else {
        // remove the characters before the last forward slash (included)
        newValue = value.substring(lastForwardSlash + 1);
    }
    fileField.setRawValue(newValue);
}

Answer 3

There isn't a built-in way to accomplish this however, you can do a find/replace for fakepath and remove. I impelmented this on the change event. Here is an example:

listeners: {
                        change: function(fld, value) {
                            var newValue = value.replace(/C:\\fakepath\\/g, '');
                            fld.setRawValue(newValue);
                        }
                    }

I created a sencha fiddle demonstrating a working example