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
Related
Sometimes when making an HTTP request to download a file (e.g. PDF, XLSX, etc.) from the own webserver, it is necessary to use the HTTP method POST, because it requires dynamic input data. I have been trying different ways to reduce that to one single HTTP request for best performance, but could not succeed.
As JavaScript with the XMLHttpRequest object (AJAX) can not "download" files, I guess it requires an HTML workaround. The only working solution I found for that case is generating a form element wrapping input elements containing the data. I could not find a way how to send boolean values via this, as AJAX is able to. That would mean: it is not suitable for a standardizable implementation.
My question is: How can I download a file via one POST request which can include boolean values (JavaScript)?
In case it is important: The backend system I use is Ruby on Rails
As #Pointy mentioned, boolean values are always translated to strings in HTTP communication. I was wrong about that in my question. That means, converting a JavaScript JSON string or a classic object to an HTML form (then submitting and deleting it) works!
Actually sending an AJAX request and then manually triggering a link click to the generated file has the advantage of being able to use a progressbar.
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.
In this project I'm working in I need to get some files from a repository. The files are supplied through a FileStream and the idea is to be able to download it right after the request is done. The server forces it to download via an application/octet-stream rule.
<form id="myForm1" action="http://fakepath/repository" target="iframe">
<input type="hidden" name="id" value="bP0QjyW5Rmf5yZWNslO0jxNbPg2zXCNLGCTl4bIlhfqQsUxyJ2lFsVimEn1CDQYN">
<button type="submit">DOWNLOAD</button>
</form>
<iframe frameborder="0" id="iframe"></iframe>
The above works pretty good for public files, but the problem starts when the private ones need to be downloaded - a token for authorization must be informed.
AFAIK, I can't set headers on HTML form submit. An AJAX call would be ideal, since I can set custom headers on every request, but don't know if it is possible to set a target for the response, just like a form does. I know I can handle the response in the callback, but everything I'll have is the file's binary content being printed, not downloaded.
Being that said, I have the following questions:
- Using AJAX, is there a way to mimic this form behavior, that is, to set an automatic target to an Iframe at the response, forcing the file do download?
- Is there any other way to handle FileStreams on Javascript, where I can send Headers like this?
Try
$('form').serialize();
That should give you everything that is in the form for AJAX. You would need jQuery for this.
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