0

I'm trying to upload a file using the code below:

window = Ext.create('Ext.window.Window', {
        renderTo: Ext.getBody(),
        bodyPadding: '20 10',
        title: 'Upload file',
        autoDestroy: true,
        hidden: true,
        modal: true,
        layout: {
            type: 'hbox',
            align: 'middle',
            pack: 'center'
        },
        items: [
            uploadForm = new Ext.form.Panel({
                items: [
                    file = new Ext.form.field.File({
                        xtype: 'filefield',
                        name: 'fileName',
                        fieldLabel: 'File',
                        allowBlank: false,
                        buttonText: 'Select file...',
                    })
                ]
            })
        ],
        buttons: [{
                text: 'Cancel',
                handler: function () {
                    upload.hide();
                }
            },
            {
                text: 'Upload',
                handler: function () {
                    var form = uploadForm.getForm();
                    if (form.isValid()) {
                        form.submit({
                            url: 'upload',
                            waitMsg: 'Uploading your file...',
                            scope: this,
                            success: function (form, action) {
                                upload.close();
                                var json = JSON.parse(action.response.responseText);
                                if (json.success) {
                                     Ext.Msg.alert('Success', json.message);
                                } else {
                                    Ext.Msg.alert('Error', json.message);
                                }
                            },
                            failure: function (form, action) {
                                upload.close();
                                try {
                                    var json = JSON.parse(action.response.responseText);
                                    Ext.create('Ext.window.MessageBox').show({
                                        title: 'Failure',
                                        msg: json.message
                                    });
                                } catch (err) {
                                    Ext.create('Ext.window.MessageBox')
                                                    .alert('Failure', 'Failed to parse response');
                                }
                            }
                        });
                    }
                }
            }]
    });

The code is working in firefox and opera and I get the response successfully, but in chrome on inspect network activity, the status is canceled and in the console I get the warning: Resource interpreted as Document but transferred with MIME type application/json. Therefore, the submit always returns failure, even though the file is uploaded. Can anyone please suggest how to fix this?

devdev
  • 45
  • 10
  • https://stackoverflow.com/questions/6934393/resource-interpreted-as-document-but-transferred-with-mime-type-application-json/44249566#44249566 – Arthur Rubens Aug 31 '20 at 09:29
  • I have tried setting the content-type to text/html and i don't get the warning, but the submit request status is still canceled. – devdev Aug 31 '20 at 09:49
  • I thought your content type is 'application/json', isn`t it? – Arthur Rubens Aug 31 '20 at 18:21
  • Yes, I also set the content type in headers property on form.submit, but in the documentation is noted that headers are not sent during file upload. I tried using Ext.Ajax.Request instead of form.submit but I couldn't make it work. Do you have any other ideas? – devdev Sep 01 '20 at 06:50

0 Answers0