(By Marco Nanni) using XML to improve file-upload Processing

Address: http://www.15seconds.com/issue/010522.htm

Summary

This article examines an example of multiple binary file upload for Web applications using eXtensible Markup Language (XML) technology, without the typical limitation of traditional file upload processing. it describes how to use Microsoft XML Parser 3.0 (MSXML) and ActiveX Data Objects (ADO) stream objects for a new upload strategy with several benefits. for example, no custom ASP components are required.

Introduction

To obtain a file upload with a traditional HTML page, on the client side we can use a form structured in the following way:

<FORM NAME="myForm"
   ACTION="TargetURL.asp"
   ENCTYPE="multipart/form-data"
   METHOD="post">
   <INPUT TYPE="file" NAME="myFile">
   <INPUT TYPE="submit" VALUE="Upload File">
</FORM>
 

This solution presents several limitations both on the client and server side. we must use the POST method (because the get can't manage this type of data), and we have no solutions to trigger a post processing without using an HTML form. when we send data to the TargetUrl, the browser loads this page as the new current page and we have an undesirable "context switch."

The enctype property defines the Multipurpose Internet Mail Extensions (MIME) encoding for the form and must be set to "multipart/form-Data" for file upload forms. when we set this property to "multipart/form-Data" we obtain a different structure of the POST buffer (which is also more complex) and the request ASP object can't access the form contents. therefore, we can read the Post buffer using the request. binaryread method, but we can't use scripting versions to do this. the request. binaryread method returns a vtarray (which is a variant array of unsigned one byte characters) while scripting versions can manage only variant variables. we can resolve this problem only by using a specific, custom ASP Component or ISAPI extension, such as cpshost. DLL. this behavior is by design.

A new upload strategy

The idea underlying this article is the use of the following step: On the client-side:

• Create a XML document using the MSXML 3.0 object;
• Create a XML node with binary content;
• Populate this node with the content of the uploading file using the ADO Stream object;
• Send the document to the Web server using the XMLHTTP object.

On the server-side:

• Read the XML document from the request ASP object;
• Read the content of the binary node and store it into a file on the server. Optionally, we can store it into a blob field of a database tables.

Before explaining the source code sample, we can make a few considerations about the solution used in this article.

XML consideration

XML support using data types, such as numeric, float, character, etc. could authors define XML as the ASCII of the future, but we can't forget that this technology can also describe binary information using the "bin. base64 "data type. this feature is fully available with ms xml 3.0 parser and to date requires a custom setup. this object provides some properties that enable a complete management of binary contents:

Obj_node.datatype-this read/write Property specifies the Data Type of the selected node. The XML Parser supports more datatype values (see the msdn reference for a complete list -- http://msdn.microsoft.com/library/psdk/xmlsdk/xmls3z1v.htm ).

For binary contents we can use the "bin. base64" data type;

Obj_node.nodetypedvalue-this read/write property contains the selected node's value expressed in its defined data type.

We can create an XML document with more "bin. base64"-type nodes that contain the files we want to upload. This consideration allows the processing of multiple uploading files with a single post.

We can use the XMLHTTPRequest object to send an XML document to a Web server using the POST method. this object provides client-side protocol support for communications with HTTP servers and allows us to send and receive ms xml Document Object Model (DOM) objects from a Web server. XMLHttpRequest is a built-in COM Object with Internet Explorer 5 (not requiring a custom setup) and does not generate a context switch after posting data.

The ADO Stream Object

The previous considerations allow the creation (on the client-side) of an XML document with one or more binary nodes. now we need to populate this node with the contents of the uploading files. unfortunately, scripting versions can't access the local file system, and the scripting. fileSystemObject (which is a built-in COM Object of the recent Win32 platform) to date can't manage binary files. this behavior is by design. we need an Other COM object that provides the access to the local binary files.

The ADO Stream object (which is a COM Object encoded in the MDAC 2.5 components) provides the means to read, write, and manage a stream of bytes. this byte stream may be text or binary and hasn' t particle size limitations. in ADO 2.5, Microsoft has introduced the stream object without any dependency in the ADO object model hierarchy; therefore, we can use the stream object without binding it to the other ADO objects.

In this article, we use the stream object to access file content and store it into XML node, and vice versa.

Client-side code

The following code sample provides a client-side File Upload using stream and MSXML objects:

<HTML>
<HEAD><TITLE>File Send</TITLE></HEAD>
<BODY>
   <INPUT id=btn_send name="btn_send" type=button value="FILE SEND">
   <DIV id=div_message>Ready</DIV>
</BODY>
</HTML>

<SCRIPT LANGUAGE=JavaScript>

// files upload function
function btn_send.onclick()
{
   // 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://tmp//myfile.doc");
   // 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.asp",false);
   xmlhttp.send(xml_dom);
   // show server message in message-area
   div_message.innerHTML = xmlhttp.ResponseText;
}
</SCRIPT>
 

Server-side code

The following code sample provides a server-side File Upload using the same objects:

<%@ LANGUAGE=VBScript%>
<% Option Explicit
   Response.Expires = 0 

   ' define variables and COM objects
   dim ado_stream
   dim xml_dom
   dim xml_file1

   ' create Stream Object
   set ado_stream = Server.CreateObject("ADODB.Stream")
   ' create XMLDOM object and load it from request ASP object
   set xml_dom = Server.CreateObject("MSXML2.DOMDocument")
   xml_dom.load(request)
   ' retrieve XML node with binary content
   set xml_file1 = xml_dom.selectSingleNode("root/file1")

   ' open stream object and store XML node content into it   
   ado_stream.Type = 1  ' 1=adTypeBinary 
   ado_stream.open 
   ado_stream.Write xml_file1.nodeTypedValue
   ' save uploaded file
   ado_stream.SaveToFile "c:/tmp/upload1.doc",2  ' 2=adSaveCreateOverWrite 
   ado_stream.close

   ' destroy COM object   
   set ado_stream = Nothing 
   set xml_dom = Nothing
   ' write message to browser
   Response.Write "Upload successful!"
%>
 

We can also use the ADO stream to store the uploading file into a blob field of a database table. (See the related link for more information .)

Benefits

This strategy allows a file upload processing with several benefits:

• It does not trigger a context switch on the client.
• No custom ASP components are required.
• We can use this strategy for multiple binary file upload in a single post process.
• This process is totally implemented into a script code. we can easily insert this code into a script Library since no HTML objects are required. we can also implement this algorithm (on the client-side) using any other language that supports the COM interface, such as Visual Basic (VB), Delphi, PowerBuilder, etc.

Security and system consideration

We can use this solution only for an intranet application because it requires an ie5 security setting with Low protection. We must:

• Enable script and ActiveX controls. This parameter allows the execution of the "myobj = new activexobject (...)" jscript statement;
• Enable access to data source through domain. this parameter allows the use of the stream object on the client side. we must also install ms xml dom 3.0 and MDAC 2.5 both on the client and server side.

References

• Read Tiago Halm's article about traditional file-upload processing at http://www.15seconds.com/Issue/001003.htm
• For a description of the data types supported by ms xml parser, see http://msdn.microsoft.com/library/psdk/xmlsdk/xmls1cbp.htm and http://msdn.microsoft.com/library/psdk/xmlsdk/xmls3z1v.htm
• A sample of creating an XML document with binary data in VB is available at http://support.microsoft.com/support/kb/articles/Q254/3/88.ASP
• For a Microsoft reference on the ADO Stream object, see http://msdn.microsoft.com/library/psdk/dasdk/mdao1ajx.htm.
• Another sample for managing blob and binary files can be found at http://support.microsoft.com/support/kb/articles/Q258/0/38.ASP.

About the author

Marco Nanni is an Italian web developer with experience in (d) HTML and XML technology used for implementing enterprise solutions. Marco can be contacted at: mnanni@lycos.it.