How to send a file on cross-domain with XMLHttpRequest?

Question

I'm trying to send a file on another domain but progress event isn't working. If I comment onprogress function, the file is well uploaded, else an error occurs :

OPTIONS http://another-domain.com No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://mywebsite.com' is therefore not allowed access. XMLHttpRequest cannot load http://another-domain.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://mywebsite.com' is therefore not allowed access.

Here is the code :

$("form").on("submit", function(e) {
    e.preventDefault();
    var file = $("#file")[0].files[0];

    var fd = new FormData();
    fd.append("Filedata", file);

    var xhr = getXDomainRequest();

    xhr.onprogress = function(e) {
        if (e.lengthComputable) {
            var percentComplete = (e.loaded / e.total) * 100;
            console.log(percentComplete + '% uploaded');
        }
    };

    xhr.onload = function() {
        if (this.status == 200) {
            var resp = JSON.parse(this.response);
            console.log('Server got:', resp);
        }
    };

    xhr.open('POST', 'http://another-domain.com', true);
    xhr.send(fd);
});

function getXDomainRequest() {
    var xdr = null;

    if (window.XDomainRequest)
        xdr = new XDomainRequest(); 
    else if (window.XMLHttpRequest)
        xdr = new XMLHttpRequest(); 
    else
        alert("Cross Domain not supported");
                    
    return xdr;        
}

I can't modify another-domain.com because it's an API.

I tried to use AJAX, File Upload but I can't use progress event too.

Any idea ?

EDIT

Here is another solution with File Upload

$('#fichier').fileupload({
    dataType: "jsonp", // API error
    beforeSend : function() {
        $("#upload_progression_pj").show();
    },
    progress: function (e, data) {
        var actuel = Math.round(data.loaded * 100 / data.total);
        log(actuel);
        $("#upload_progression_pj span").html( actuel + "%" );
    },
    done: function (e, data) {
        $("#upload_progression_pj").hide();
        $("#upload_progression_pj span").empty();
    }
});

Either use `jsonp` as `dataType` in your call or set the header `Access-Control-Allow-Origin` to an appropriate value. — verisimilitude, Feb 25 '14 at 13:20

score 0 · Answer 1 · edited May 23 '17 at 10:26

If you are using XHR2 to upload files cross-origin, AND you want to track upload progress, your server will need to handle preflight (OPTIONS) requests, which the browser will send before it sends the underlying upload POST request. This is, of course, in addition to the support this server must have for non-preflighted CORS requests.

XHR2's upload progress specifically triggers a preflight, even if nothing else about the upload POST request requires the cross-origin request to be preflighted. I stumbled into this a while back myself.

If you have no control over the server and it does not handle OPTIONS/preflight requests, you will not be able to make use of upload progress events.

score -2 · Answer 2 · answered Feb 25 '14 at 13:15

-2

Cross-domain ajax can be accomplished only using JSONP, so that is the direction in which you need to look. It has loads of examples online, and I dont think you will have any problems finding and implementing it.

answered Feb 25 '14 at 13:15

dkasipovic

5,930
1
19
25

I've already tried this solution but the API isn't working with jsonp. So I can't use `AJAX` but only HMTL form ? – thomas-hiron Feb 25 '14 at 13:17
But from your script you are already using ajax? XMLHttpRequest IS ajax? I dont see what are you trying to say? – dkasipovic Feb 25 '14 at 13:19
Look at my edit, `dataType: 'jsonp'` isn't supported by the API. I'd like to know if the only solution is a normal HTML form because I can't use `jsonp` apparently – thomas-hiron Feb 25 '14 at 13:27
FileUpload does not support jsonp, but that does not mean that you cannot realize jsonp approach manually. Look it up online, it is realised very easily, but you will need to adjust file on the remote server that receives the POST data (I dont know if you can do that). – dkasipovic Feb 25 '14 at 13:31
I can't do that, the API isn't mine :/ – thomas-hiron Feb 25 '14 at 13:33
1

You cannot upload a file using JSONP. – Ray Nicholus Feb 25 '14 at 13:39
@D.Kasipovic told me yes :o – thomas-hiron Feb 25 '14 at 13:40
Sorry, I should have looked up into that more. I was trying to say that cross domain ajax (as I wrote after all), can be done only using jsonp. I was not aware of upload limitations for that matter. I do apologise. – dkasipovic Feb 25 '14 at 13:42
I dont see how you could show upload percentage using only
and post
– dkasipovic Feb 25 '14 at 13:46
The user won't have any callback :/. But it's the only solution I think. – thomas-hiron Feb 25 '14 at 13:49
1

@D.Kasipovic Strike 2: You don't need JSONP for cross-domain ajax. CORS is the proper solution. – Ray Nicholus Feb 25 '14 at 15:13
@thomash There is so much bad information in this answer, I can't even sort through it all. Do a google search for CORS and you'll have information about how to upload files cross-origin. – Ray Nicholus Feb 25 '14 at 15:14

How to send a file on cross-domain with XMLHttpRequest?

2 Answers2