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?
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
Related
var dataToSend = "randomStuff";
I want dataToSend to be send via POST into
<textarea class="form-control" name="list" rows="1" id="comment"></textarea>
this specific textarea is not local, its a random html page.
How do I do that?
I've tried several things, but nothing seems to work. Can someone bring me onto the right path? (Without jquery if possible, but appreciate any suggestions,...)
Thank you.
You can't. That isn't how POSTing works.
When you make an HTTP request you can include data in in various ways (the query string on the URL, the body of the request, cookies, custom HTTP headers, etc). When people talk about POSTing data, they usually mean the body of the request.
The data is sent to the HTTP server that the URL points to.
It is the responsibility of the server (or possibly JavaScript embedded in the document returned by the server) to do something with that data.
It could read data from the request and put it in then HTML document it responds with. That technique could be used to set a default value for a textarea.
The important point is that it is the responsibility of the site providing the textarea.
There is no way for code on a website to populate the value of a textarea on an arbitrary third party site.
It is, however, possible to make a POST request to the end point that the form containing the textarea points to.
The simplest way is to make a form with the same action and a form control with the same name (list).
That form could be populated and submitted by JavaScript since it is on the same page.
I want to access url of file which user select through pop up file directory navigation window. My browse button tag is:
<input type="file" id="loadFile"/>
On the back end, i can access the file url in javascript, but not sure how to do it in PHP.
You have to have the correct enctype for the form.
Otherwise, you utilize the $_FILES super global.
This is covered extensively in the PHP Manual regarding uploads.
The original filename is available in $_FILES['load file']['name']
Since it seems that you actually want a way to have the user provide a url to a file, the way to handle that is to simply implement a text input and accept the url there, and process the url on the server, using an HTTP client that fetches and stores the file on the user's behalf.
For years people have been using the curl extension, which is fast and highly functional. There are also a number of client libraries written in php like Guzzle.
Assumption - people in my office are not that smart / I dont want to use any server port for my below utlity :)
My Html file resides in the local disk (consider cross domain refrences constraint hile sugessting the solution)
When double clicked , HTML form opens and asks for entering order number
when entered and form is submitted , server responds back with details in the form of XML
Note : for submitting i used html POST method ,
Upto 3rd step everything works fine and i get the server response xml as next page on browser.
Now,
How to parse this response xml so that only desired data is shown on the next page when form is submitted on 3rd step , bypassing the raw response from server.
JS submit function
function submit1() // called when i click on submit button on my form
{
var actionFianl = "http://URL(other data is given as form post method)";
document.form1.action = actionFianl;
document.form1.submit();
}
And XML data is displayed , starting with
<?xml version="1.0" encoding="UTF-8" ?>
So if I understand your issue, Ajax calls are out of the question due to cross domain trouble. I remember doing something like this and found that Safari worked, but Chrome did not like it, due to cross origin policy. This was a while back and I am not certain if it was the same problem.
If I understand you correctly you want to have the XML in Javascript, instead showing the raw data independently. What comes to mind if Ajax can't be used, is having two files. The current one will have the form included and gets the XML. The second file containing the first file in an iframe, which reads the content of the iframe, when the form is submitted, and is able to read the XML.
Another solution might be something like node-webkit depending on the scale of your application. Node-webkit is an executable for windows/mac/linux which ships Webkit and Node, and runs them in a single context. Maybe you could get the XML through the Node server instead doing it through a vanilla form submit.
So i have a canvas on which the user signs, now instead of converting it to a base 64 string i simply want to save it as an image itslef. whats the easiest way to do it html5??
You can easily do that this way (specifying the format as png in this case):
var img = canvas.toDataURL("image/png");
You can specify different image formats.
Take a look at this answer.
I've answered a similar question here:
Simulating user event
Assuming you are saving locally
You can go the route of creating an image from a Data URL, but then saving it is the trickier part that currently isn't very nice using HTML5. It's hopefully going to get better soon, if browsers incorporate the download attribute of the a tag.
Obviously if you have higher permissions than a standard webpage... i.e. you are designing a browser plugin - then there are other options...
If I were to implement something like this myself, at the moment, I would conceed to using a flash plugin to handle the save to the local computer.
Assuming you are saving remotely
By the sounds of it you aren't saving to a server, but if so this is quite easy by just POSTing the base64 information to a script written in a server-side scripting language (i.e. like PHP) and getting that to write the data directly as binary to a file. Obviously you have to make certain you do this securely however, you don't want just any binary data written to your server's filesystem.
Best of both worlds
If you've got the development time, the best method to get a canvas image saved locally - without Flash - is to create a server-side script that instead of saving the data to your server actually writes the Base64 information you send it directly back as a realised binary image file. That way you can create a form that posts your Base64 data to a new tab, this request is evaluated by the server-side, and the binary image is returned... at which point the browser asks the user where they wish to save their image.
You'll need to define the correct headers to force an image to download (rather than display in-browser). A simple change to force this is to set the server-side script's Content-type header to 'image/octect-stream'... there are other header options to set which would be best researched (i.e. headers that control the filename and so forth).
reflect.php
<?php
/// a simple example..
if ( array_key_exists('data', $_POST) && ($data = $_POST['data']) ) {
header('Content-type: image/octet-stream');
echo base64_decode( $data );
exit;
}
and the form...
<form action="reflect.php" method="post" target="_blank">
<input name="data" type="hidden" value=" ... Base64 put here with JS ... ">
</form>
(The whole form should be created dynamically and submitted automatically with JavaScript)
Improving the user experience
There are ways to avoid a new tab being created, but you'd have to research to make sure these other methods don't cause cross-browser problems... for example you could post your form data as part of an iframe (which would keep the process hidden), or just post the data directly on the current window (..and hope that all the browsers receive the correct request and open a download rather than replace your page content - most modern browsers should handle this).
Improving security
With regards to a PHP script that automatically returns binary data, you should keep the access to this script secured by one time use key / authentication token or something similar, and keep a limit on how much Base64 data you are willing to accept. It might not seem like it poses a secutiry risk - as you are not modifying your server in any way with what the user sends - but the dodgy people of this world could take your script and use it to send download request to other users... which if downloaded (and turned out to be unwanted trojans or viruses) would make your server implicit in providing the dodgy file.
All in all
Due to the effort required to get a simple thing like an image saved to the desktop, I wouldn't blame you for doing the following:
Embed the image in the page (after taking your snapshot from canvas) and ask the user to right click and Save as...
Hopefully future things will make this situation better...
I want to fake a file upload without using a file input. The file's content is generated from a string. i.e. I want to post some string to a server with content-type "multipart/form-data".
But the server is with different domain and doesn't support CORS, therefore I could not use XMLHttpRequest. Is it possible to do this using only normal form post?
That is actually a nice question. In my humble opinion, what you are looking for is not possible for various reasons as listed below:
You can surely have an HTML form something like this:
<form ....>
<input id="blah" type="input" name="nameblah" ..>
...
</form>
But as you would know, you really cant access/modify the "contents" of the file selected. Immediate solution will be to use a hidden field as an alternative and set the enctype=multipart/form-data, but for hidden field the browser will not set proper Content-Disposition Headers.
You could have an AJAX call in which you manually build up the entire request body, but that would be a cross domain call, as you have already noted. The usual bypassing techniques apply.
Solution would be to let the server, which serves out the HTML, fulfill the skydrive request for you. In that case you would be uploading the file using HTML form, or javascript. The file will then be "forwarded" to the skydrive server.
In case you are trying via Javascript, be sure to get the multipart/form-data format correctly. Here is the RFC