Second File Upload fails in ExtJS 6, works in ExtJS 4

问题

Very low-level file upload:

dockedItems: [{
    xtype: 'toolbar',
    dock: 'top',
    items: [{
        xtype: 'form',
        items: [{
            xtype: 'filefield',
            fieldLabel: 'Select file',
            listeners: {
                change: {
                    fn: me.onFilefieldChange,
                    scope: me
                }
            }
        }]
    },{

...

onFilefieldChange: function(filefield, value, eOpts) {
    var form = filefield.up('form').getForm();
    form.submit({
        url: APIURI+'FileUpload',
        headers: {'Accept':'application/json','Content-Type':'application/json'},
        waitMsg: 'Uploading',
        success: function(fp, o) {
            var filedata = Ext.decode(o.response.responseText).data;
            var rec = Ext.create("MyApp.model.FileModel",filedata);
            Ext.getStore("FileStore").add(rec);
        },
        failure: function(fp, o) {
            Ext.alert("ERROR", "File save failed"));
        }
    });

The first file upload works like a charm; the file is packed into the multipart/mime and submitted correctly.

The second file upload from the very same file upload field fails, because the file is not packed into the mime.

If I close the window and open it again, the file field is working again - for a single upload, that is.

The difference in DOM of the file input field tells us why the browser behaves like this. The following three attributes are magically missing from the <input type="file" field after the first file upload:

data-ref="fileInputEl"
name="filefield-1333-button"
data-componentid="filefield-1333-button"

Now, this does not happen if I use the file upload field in the sencha docs. It doesn't happen with my code in ExtJS 4.2.2. But it does happen with ExtJS 6.0.1.

You wouldn't know why, would you?

回答1:

It is a bug in Sencha ExtJS 6 Framework. Everything works as expected if you provide a name property to the file upload field.

xtype: 'filefield',
fieldLabel: 'Select file',
name: 'RequiredSenchaBugWorkaround',
...

回答2:

Adding a name doesn't always work. It still has issues in Ext 6.2. In addition to that you should do

FileInputField1.reset();

This makes sure that the field is reset and lets you upload the same file again.

来源：https://stackoverflow.com/questions/33020472/second-file-upload-fails-in-extjs-6-works-in-extjs-4

标签

javascript

extjs

file-upload