0

Here's my problem:

I have 2 web applications and want to upload a file from 1st to 2nd one. So I have to face with 'Same Origin Policy' issue.

In my case I own the 2nd Website and the 1st one is not mine. It's for my new customer of my existing web application and is developed with php and due to my lack of php knowledge I can't do server-side php coding. So I only can put some JavaScript code into one of its pages. So I don't have the proxy server option either.

And the third problem is I have to get this file uploading work in all browsers (including IE8+); so I also can't use the File API and XHR.

Any solution to my nightmare?

Robert Harvey
  • 178,213
  • 47
  • 333
  • 501
Hosein
  • 581
  • 1
  • 7
  • 29
  • [This jQuery plugin](https://github.com/blueimp/jQuery-File-Upload/wiki/Cross-domain-uploads) might be helpful. – Robert Harvey Jan 08 '13 at 19:21
  • The "Cross-site XMLHttpRequest file uploads" is based on File API. And about the "Cross-site iframe transport uploads", unfortunately, it is not possible to access the response body of iframes on a different domain. – Hosein Jan 08 '13 at 19:26
  • Maybe it's time to learn a little PHP. :) – Robert Harvey Jan 08 '13 at 19:26

1 Answers1

1

I don't know how much data you need to send upstream, however, here are two options:

1) MAKE AN IMAGE REQUEST THAT CONTAINS ALL PERTINENT DATA IN THE URL:

Parse the data you want to send upstream into query string parameters that get submitted to a special web service that knows how to read and collect this data from the URL. The server response should be empty. NOTE: URLs should not exceed 2000 characters. If you have a large data set, you will want to use option 2.

EXAMPLE:

/* I'd recommend doing the following with jQuery or some other JS framework */
var img = document.createElement('img');
img.src = "http://website2.com/uploadHandler" + 
           "?data1="+encodeURIComponent(data1) +
           "&data2="+encodeURIComponent(data2);
document.getElementsByTagName("body")[0].appendChild( img );

OUTPUT (at end of body tag):

<img src="http://website2.com/uploadHandler?data1=myName&data2=myInformation" />

This will cause a HTTP GET request to be made to your server at the above address. The trick is that you're not actually going to serve an image but rather collect data from the request.

2) FORM POST:

Use javascript to create a form and populate that form with input fields containing the data you wish to upload. You can automatically submit this form using myForm.submit(). Using jQuery this would look something like:

$(document.body).append( $('\
   <form name="myform" action="http://website2.com/uploadHandler">\
     <input type="text" name="data1" value="myName" />\
     <input type="text" name="data2" value="myInformation" />\
   </form>') );
document.myform.submit();

Using this technique will cause a new page to load. However, you could use a redirect on the server side to redirect to the original page. Read the following if you choose to redirect: http://www.theserverside.com/news/1365146/Redirect-After-Post

Luke Nysen
  • 56
  • 5
  • Since the URLs have restriction in size, I don't think the first alternative you proposed, is a solution for my case. Because there might be so many server calls. – Hosein Jan 08 '13 at 20:46
  • I would really prefer an Ajax style uploading, but I'm getting hopeless on that and thinking about your other way. Thank you my friend. – Hosein Jan 08 '13 at 20:48