WebFX WebBoard
Message Thread:
View All Messages
Back to WebFX
 xmlhttp request object file uploads - possible?, Peter Hawkes, February 12, 2004
         Re:xmlhttp request object file uploads - possible?, Tom Trenka, February 13, 2004
             Re:xmlhttp request object file uploads - possible?, Erik Arvidsson, February 18, 2004

Subject: Re:xmlhttp request object file uploads - possible? From: Tom Trenka Date: February 13, 2004

It is possible, but you can't approach it in the normal way.  Basically, file uploads are placed in the HTTP header of the request, and not in the body of the request.  So you'd have to manually base64 encode the file itself, and create the multi-part header yourself.

I have done this once before, but it was a major pain in the ass, and I was only able to get it working under IE.  The big problem is the byte array handling, especially with Javascript...

My suggestion would be to structure your form so that you are using the browser's built in file handling (i.e. using a input type=file) and not use the XMLHTTP object at all for this.

Tom

From: Pieter Swart
Sent: Feburary 13, 2004
Subject: Re:xmlhttp request object file uploads - possible?

Here is an example of what you want to do:

   // create ADO-stream Object
   var ado_stream = new ActiveXObject("ADODB.Stream");

   // create XML document with default header and primary node
   var xml_dom = new ActiveXObject("MSXML2.DOMDocument");
   xml_dom.loadXML('<?xml version="1.0" ?> <root/>');
   // specify namespaces datatypes
   xml_dom.documentElement.setAttribute("xmlns:dt", "urn:schemas-microsoft-com:datatypes");

   // create a new node and set binary content
   var l_node1 = xml_dom.createElement("file1");
   l_node1.dataType = "bin.base64";

   // open stream object and read source file
   ado_stream.Type = 1;  // 1=adTypeBinary
   ado_stream.Open();
   ado_stream.LoadFromFile("c:/test.txt");

   // store file content into XML node
   l_node1.nodeTypedValue = ado_stream.Read(-1); // -1=adReadAll
   ado_stream.Close();
   xml_dom.documentElement.appendChild(l_node1);

   // we can create more XML nodes for multiple file upload

   // send XML documento to Web server
   var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
   xmlhttp.open("POST","./file_recieve.php",false);
   xmlhttp.send(xml_dom);

The site that this is accessed from must be a trusted site and I'm not sure if this will still work on the latest version of IE (patches etc. etc.)
Also note that you have to decode the data object with the PHP base64_decode function.


 

From: Peter Hawkes
Sent: Feburary 12, 2004
Subject: Re:xmlhttp request object file uploads - possible?

Hello Erik,

I use the xmlhttp request object extensively in my PHP web apps, I have done all the usual stuff such as poll my database (MySQL) for duplicate user names and alert back without page reload. I have also used it to load text/html into a page similar to what can be done with Flash remoting in a round about way.

My problem now is I am wanting to use the xmlhttp request to upload files, what I have is this:

var xmlhttp
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
  try {
  xmlhttp=new ActiveXObject("Msxml2.XMLHTTP")
 } catch (e) {
  try {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
  } catch (E) {
   xmlhttp=false
  }
 }
@else
 xmlhttp=false
@end @*/
if (!xmlhttp) {
 try {
  xmlhttp = new XMLHttpRequest();
 } catch (e) {
  xmlhttp=false
 }
}
function xmlhttpUpload(url,obj) {
var obj = MM_findObj(obj);
if(xmlhttp){
 xmlhttp.open("POST",url, false);
 xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 // xmlhttp.setRequestHeader("Content-Type", "multipart/form-data");

// what header should I use?
 xmlhttp.onreadystatechange=function() {
  if (xmlhttp.readyState==4) {
   alert(xmlhttp.responseText);
   obj.innerHTML = 'uploading';
   if(xmlhttp.responseText==""){
    obj.innerHTML = 'upload failed';
   } else {
    obj.innerHTML = xmlhttp.responseText;
   }
  }
 }
 
 xmlhttp.send("s="+document.forms[0].elements['imageUpload'].value);

// document.forms[0].elements['imageUpload'].value is my file field value
  } else {
 alert('Sorry your browser does not support the XML HTTP Request Object');
 }
}

Basically the problem is my JS above sends this to my PHP page but my PHP page is sending back a message that my file field is a $_POST var instead of a $_FILES var, therefore I can not process the upload with PHP because it sees it as a text field and not a file field.

Any tips would really be appreciated and although I *think* this can be done, I am not 100% sure so please advise.

First time I have posted here, I want to take this opportunity to thank you for a great site and resource.

Pete






Reply
Name: 
Email: 
Subject: 

Enter your reply to this message below. HTML tags are not supported but words that start with http://, ftp:// or mailto: are converted to links.


View All Messages
Back to WebFX