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/

i'm not sure how you can go about this but have you tried `standardSubmit: true`? That will send regular form post request instead of an ajax request. Additionally, if it is just a port difference (but on same server) some web servers have option to reverse proxy from the standard port to a special port, for nginx for example [this link](https://www.nginx.com/resources/admin-guide/reverse-proxy/) that way the requests are on the same port. — weeksdev, Aug 28 '15 at 17:15
Thanks, I have tried this option and observed that: response is showing as a fresh page in browser. If i navigate to back then i could see my form. Though i gave a alert to print the response, it is visible as a fresh content in page and form got disappeared. Can you help explain on how to print the response as a alert rather than printing as a fresh page? On production, it may not look good opening the response in a fresh page. — valli, Aug 30 '15 at 03:06
Hi, Can you help resolve this? I am stuck for last one week on the same problem.. — valli, Aug 31 '15 at 06:31

score 3 · Answer 1 · answered Apr 24 '20 at 17:21

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:

Great answer. This should be marked as the solution. It not only solves the cors issue, also via this approach you can send custom headers, which is not possible with non-ajax form.submit, which happens when uploading a file. — John Smith, Jun 03 '21 at 04:43

score 0 · Accepted Answer · answered Aug 28 '15 at 13:28

0

Ajax call does not work with downloading and i presume with uploading files.

Have you tried to set this before doSubmit:

Ext.Ajax.cors = true;
Ext.Ajax.useDefaultXhrHeader = false;

answered Aug 28 '15 at 13:28

Paweł Głowacz

2,926
3
18
25

Thanks Pawel. I have not tried this. Do i need to call interceptor before doSubmit() or in view controller before calling form.Submit()? – valli Aug 30 '15 at 03:08
in view controller before calling `form.Submit()`. – Paweł Głowacz Aug 30 '15 at 03:13
Tried. Still same error: Blocked a frame with origin accessing from different frame. Currently I am running my server in Tomcat and ExtJS in sencha cmd. Am i getting this error because i am running both in two different web servers and different ports(server: 8080 and ExtJS: 1841)? My requirement is: User should be able to access my form from any machine and submit it... – valli Aug 30 '15 at 04:02
Hi Pawel. Is there any other solution for this? I am stuck for last one week on this. Can you help? – valli Aug 31 '15 at 06:31
Did not have that kind problem but what i found: https://www.sencha.com/forum/showthread.php?139832-Getting-blank-response-after-uploading-File-using-extjs-on-cross-domain and http://stackoverflow.com/questions/17105193/extjs-4-upload-success-function-does-not-react and http://abou-kone.com/2011/02/04/how-to-post-cross-domain-and-access-the-returned-data-using-extjs/ – Paweł Głowacz Aug 31 '15 at 07:08
This link worked for me. Thanks a lot Pawel and Micheal carter who explined this very well: http://stackoverflow.com/questions/1481251/what-does-document-domain-document-domain-do – valli Sep 02 '15 at 07:07
It may help others. My solution is: set the document.domain as below on client side: document.domain = document.domain; myForm.submit({ params: { domain: document.domain }, ... }); and at server side set the domain to this. – valli Sep 02 '15 at 07:08
I know this is an old question... but can you describe what you mean by "at the server side set the domain to this"? How and where did you set this? – harryBundles Jul 17 '17 at 10:41

score -1 · Answer 3 · answered Sep 02 '15 at 07:21

-1

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

answered Sep 02 '15 at 07:21

valli

31
7

extjs file uploads through form submit for cross domain

3 Answers3

Linked