javascript - extjs file uploads through form submit for cross domain

Question

I would like to upload files to cross domain server from extjs using form.submit() method. When i call form.submit(), request is going to my restful web service and file is getting uploaded successfully. But the response is blocked at the browser with message: Blocked a frame with origi…host:1841" from accessing a cross-origin frame.

From older posts and form submit code, i found that doSubmit() is sending the Ajax request with out cors:true statement due to which cross domain response is blocked.

I thought of sending normal Ajax request but dont know how the file data can be read and send to server through ajax request.

Is there anyway in php to send the file data to server as form.doSubmit()does? Can someone help me on this problem?

Thanks.

Solution is: What does document.domain = document.domain do? and http://codeengine.org/extjs-fileuplaod-cross-origin-frame/

Answer 1

In case someone faces the same issue... Extjs 6.6

Objective: Using fileUpload and form.submit with CORS.

Issue: ExtJS form.submit failed due to “accessing a cross-origin frame -> The file gets successfully uploaded however it ALWAYS returns FAILURE on form.submit Reason..."Blocked a frame with origin "http://localhost:57007" from accessing a cross-origin frame."

Solution: Don't use form.submit, use fetch instead.

View

{
    xtype: 'form',
    reference: 'fileForm',
    items: [
        {
            xtype: 'fileuploadfield',
            buttonOnly: true,
            name: 'file',
            buttonConfig: {
                text: 'Attach',
                iconCls: 'x-fa fa-plus green',
                ui: 'default-toolbar-small'
            },
            width: 80,
            listeners: {
                change: 'onAttachFile'
            }
        }
    ]
},

View Controller

/**
 *
 */
onAttachFile: function (cmp, newValue) {
    const self = this;
    const fileForm = self.lookupReference('fileForm');

    if (Ext.isEmpty(newValue) === false && fileForm.isValid()) {
        const file = cmp.fileInputEl.dom.files[0];
        const fileSizeInMB = parseFloat((file.size / (1024*1024)).toFixed(2));

        // Validating file size
        if (fileSizeInMB > 4)
            alert('File size exceeds the allowable limit: 4MB');
        else {
            const url = '' // URL goes here
            const headers = {} // Any special headers that you may need, ie auth headers
            const formData = new FormData();

            formData.append('file', file);
            fetch(url, {
                method: 'POST',
                headers,
                credentials: 'include',
                body: formData
            })
            .then(response => {
                response.json().then(json => {
                    if (response.ok) {
                        console.log(json);
                    }
                    else {
                        console.error(json);
                    }
                });     
            })
            .catch((error) => {
                console.error(error);
            });
        }
    }
},

Related Posts:

1. cross origin problems with extjs 6.01

2. extjs form.submit failed due to "accessing a cross-origin frame"

3. extjs file uploads through form submit for cross domain

4. ExtJS 6.6.0 Enable CORS in form submit

5. https://forum.sencha.com/forum/showthread.php?368824-extjs-form-submit-failed-due-to-%E2%80%9Caccessing-a-cross-origin-frame%E2%80%9D

6. https://forum.sencha.com/forum/showthread.php?298504-Extjs-5-Fileupload-submit-error

7. https://forum.sencha.com/forum/showthread.php?294852

8. https://forum.sencha.com/forum/showthread.php?343448-Cross-origin-file-upload