Standard html input inside ExtJS form. Howto?

Question

I want to add standard html input of type file to my ExtJS form. I want this, because in version 4.1 of the framework there is a bug - filefield is reset after submission. I tried all patches I've seen here at stackoverflow, like:

Ext.form.field.File.override({
        extractFileInput: function() {
            var me = this,
                fileInput = me.fileInputEl.dom,
                clone = fileInput.cloneNode(true);
            fileInput.parentNode.replaceChild(clone, fileInput);
            me.fileInputEl = Ext.get(clone);
            return fileInput;
        }
});

or

Ext.override(Ext.form.field.File, {
        extractFileInput: function() {
            var me = this,
                fileInput = me.fileInputEl.dom,
                clone = fileInput.cloneNode(true);
            fileInput.parentNode.replaceChild(clone, fileInput);
            me.fileInputEl = Ext.get(clone);
            me.fileInputEl.on({
                scope: me,
                change: me.onFileChange
            });
            return fileInput;
        }
    });

And, yes, I set clearOnSubmit to false on my filefield. In FF it works, in IE - not. So, I want to use old school <input type="file" name="file" /> inside my form. I tried these two approaches:

{
    xtype:'panel',
    html:'<input type="file" name="file" />'
}

And

{
    xtype:'displayfield',
    value:'<input type="file" name="file" />'
}

But they do not work. On the server side I see an empty $_FILES array.

score 1 · Answer 1 · answered Apr 24 '15 at 08:06

1

Like this:

{
  xtype: 'box',
  autoEl: {
    tag: 'input',
    type: 'file',
    name: 'file'
  }
}

answered Apr 24 '15 at 08:06

CD..

72,281
25
154
163

For some reason, it is not submitted to the server side. – Jacobian Apr 24 '15 at 08:20
By the way, this "official" example demonstrates this buggy behaviour of a filefield - http://dev.sencha.com/deploy/ext-4.0.0/examples/form/file-upload.html If you upload photo once, but push Save button twice, you will see that the second time nothing is submitted to the server. – Jacobian Apr 24 '15 at 08:29

score 1 · Answer 2 · edited May 23 '17 at 12:06

Unfortunately, you'll have a very hard time down this road, and in the end, it will probably bring you nowhere.

First, there is the purely Ext part of your question. As you have already witnessed, the field isn't submitted. This is because Ext doesn't know of it as one of its component, lest a form field, in fact it doesn't know about it at all. With your use case, this is breaking twice because Ext needs to do a special treatment for upload forms. This part is fixable, but it is not trivial: see this other question.

But then comes the real difficulty... File inputs are handled differently by every browsers and, as usual, especially by IE. But in this case, any attempt to flatten these differences will be doomed by the fact that the browser won't let you. Because the user's file system is a major security concern of course, so don't mess with that. See this other question, strangely similar to yours, and the lack of convincing answers... So, the behavior you want, is it even possible to have it with standard HTML, in IE? Not sure, and if it isn't you won't be able to do anything about it.

Maybe you could build something matching your needs with the HTML5 File API, but it will probably not be supported by your target browser either. In any case, as I said, that won't be anything easy... I think the best for you now would be to search for a workaround in your design, or deem this a minor inconvenience for IE users and let go of it.

Standard html input inside ExtJS form. Howto?

2 Answers2