ajax + prototype.js + multipart/form-data

[NextOne]

Hi !

Is it possible to send an AJAX XMLHttpRequest using prototype.js API
for a multipart/form-data ?

I already done parsing form parameters and sending GET/POST request,
but does this work with <input type="file"> ?
Who handle file submit and encoding ?

regards,
Jean-Philippe Encausse

 

[Randy Webb]

NextOne said the following on 9/30/2005 4:23 AM:

Hi !

Is it possible to send an AJAX XMLHttpRequest using prototype.js API
for a multipart/form-data ?

Have you read the documentation for prototype.js (whatever that is) and
maybe asked the author of the .js file?

I already done parsing form parameters and sending GET/POST request,
but does this work with <input type="file"> ?
Who handle file submit and encoding ?

Again, you need to ask whoever wrote the code you are using.

Yes, you can send an XMLHTTPRequest for any kind of data you want.
Whether you can do it with prototype.js or not is a different question.

 

[Jean-Philippe Encausse]

In fact I found a simple answer here:
http://mir.aculo.us/articles/2005/09/30/fud-revisited-1-can-you-upload-files-with-ajax

 

[Martin Honnen]

NextOne wrote:

Is it possible to send an AJAX XMLHttpRequest using prototype.js API
for a multipart/form-data ?

I already done parsing form parameters and sending GET/POST request,
but does this work with <input type="file"> ?
Who handle file submit and encoding ?

The XMLHttpRequest object has a method setRequestHeader so you would
need to set
httpRequestInstance.setRequestHeader(
'Content-Type: multipart/form-data')
at least after the open call, then you need to make sure your request
body, that is the string that you pass to the send method, is indeed in
the format multipart/form-data defines
<http://www.w3.org/TR/html4/interact/forms.html#h-17.13.4.2>.
If I understand that right then in reality you need to define a boundary
string used in the body to separate the multiple parts and you need to
pass the boundary string in the header so you would end up doing e.g.

var httpRequest = null;
if (typeof XMLHttpRequest != 'undefined') {
httpRequest = new XMLHttpRequest();
}
else if (typeof ActiveXObject != 'undefined') {
// need try/catch here in reality
httpRequest = new ActiveXObject('Microsoft.XMLHTTP');
}
if (httpRequest != null) {
var boundaryString = 'AaB03x';
var boundary = '--' + boundaryString;
var requestBody = [
boundary,
'Content-Disposition: form-data; name="GOD"',
'',
'Kibo',
boundary,
'Content-Disposition: file; name="prayer"; filename="prayer.txt"',
'Content-Type: text/plain',
'',
'Kibology for all.\r\nAll for Kibology.',
boundary
].join('\r\n');
httpRequest.open('POST', 'test2005093002.php', true);
if (typeof httpRequest.setRequestHeader != 'undefined') {
httpRequest.setRequestHeader('Content-Type',
'multipart/form-data; boundary=' + boundaryString);
httpRequest.onreadystatechange = function (evt) {
if (httpRequest.readyState == 4) {
alert(httpRequest.status + ' ' + httpRequest.statusText + '\r\n' +
httpRequest.getAllResponseHeaders() + '\r\n\r\n' +
httpRequest.responseText);
}
};
httpRequest.send(requestBody);
}
}


That simple example works for me here with IE 6, Mozilla 1.7, Opera 8.50
so that the PHP script receives the form data fine (one element in
$_POST and one in $_FILES).
Of course you have no way to read files from the local file system. And
encoding or binary data is not solved with that simple approach.


As for that prototype.js API, ask the author or look into its
documentation if one is provided.