Cross domain uploads

The plugin supports two methods of doing cross-site (cross-domain) file uploads:

• Cross-site XMLHttpRequest file uploads
• Cross-site iframe transport uploads

Node: The PHP and Google App Engine implementations ("php" and "gae" folders in the source code tree) come with full cross-domain support out of the box.

Cross-site XMLHttpRequest file uploads

Cross-site XHR file uploads don't require any work on client side, but are only supported by browsers supporting XHR File Uploads - see Browser support.

To allow cross-site XHR file uploads, the receiving server must set the appropriate Access-Control-Allow-Origin headers, e.g.:

Access-Control-Allow-Origin: http://example.org

Note:
For cross-browser compatibility, the header must be set as response to both the file upload (POST) request as well as response to OPTIONS requests. See Preflighted requests for more information.

If the multipart option is set to false or Chunked file uploads are enabled, you also need to set Access-Control-Allow-Headers to allow custom headers used by the plugin to transmit file meta information:

Access-Control-Allow-Headers: X-File-Name,X-File-Type,X-File-Size

If you need to send along cookies (e.g. for authentication), set the withCredentials $.ajax() setting as fileupload widget option:

$('#fileupload').fileupload('option', {
    xhrFields: {
        withCredentials: true
    }
});

On server-side, you need to set the header Access-Control-Allow-Credentials to true:

Access-Control-Allow-Origin: http://example.org
Access-Control-Allow-Credentials: true

Note: when responding to a credentialed request, the server must specify a domain, and cannot use wild carding (*).

With the appropriate headers set on server-side, cross-domain XHR file uploads work just like file uploads to the same domain.

Cross-site iframe transport uploads

To force all browser to make use of the iframe transport module for file uploads, the forceIframeTransport option can be set to true:

$('#fileupload').fileupload({
    forceIframeTransport: true
});

Cross-site iframe transport uploads don't require any additional server response headers.
Unfortunately, it is not possible to access the response body of iframes on a different domain.

Therefore Cross-site iframe transport uploads require a redirect back to the origin server to retrieve the upload results. The example implementation makes use of result.html as redirect page. See also the example code in application.js.

If both servers - the server hosting the upload form and the target server for the file uploads - are just on different subdomains (e.g. source.example.org and target.example.org), it is possible to access the iframe content on the subdomain by adding the following line of Javascript to both webpages (the upload form page and the upload server response page):

document.domain = 'example.com';

Note that this requires the server response to be a HTML document (and not JSON as is the default for the UI version of the plugin).