Cetuscript Systems

Updated My Website a Bit

2008-04-08T16:33:00.001-06:00

www.cetuscript.com

Come and check it out.

Simple Upload with Classic ASP/jscript

2008-01-24T19:45:00.000-07:00

A project of mine, sitting on classic ASP, needed to upload a file. I've uploaded files with php and WebObjects - this, I thought, would be easy with ASP. Famous last words.

I suppose it would be easy if I installed or paid for a 3rd party solution. But I didn't want to do that. And I felt a bit peeved that ASP was requiring me to have to install 3rd party software to do something as fundamental as uploading a file. What were the guys at Microsoft thinking?

Anyhow, this leads us to the second problem. Finding good documentation about ASP, and good documentation about ASP using jscript is an extraordinarily frustrating task. So, for you, here is my solution. It's pretty basic. But it shows how it can be done.

Upload Sample

In this sample, the form just returns one value. Trying to handle more than one value is problematic because of the limits in jscript and how ASP communicates with it.

Solution goes as follows...

Take the binary object returned by Request.binaryRead stuff it into an ADODB.RecordSet field. The type of the field is text.
Pull out the text so we can find the start and end positions of the data of the uploaded file.
Slice the header information for the uploaded data.
Take the binary object and write it to a binary ADODB.Stream. Offset to the start and read off (end-start) bytes.

Now we have, in an array, the binary data for the file, number of bytes of the data, and the header info for the file. From here, we can write the data to a file or add it to a database.

So. To just get the data, I have to bounce the data to a RecordSet then to a string object to find out where the data is. Then stuff it into a binary Stream to pull out the part I want. The "multipart/form-data" encoding is not complicated. But the ASP nonsense is.

<%@ Language=JScript %>
<html>
 <head>
   <title>Test Upload</title>
 </head>
 <body>
   <center>
     <div align='left' style='width:400px;padding:10px;border:2px solid gray'>
       <div>
         <div>
           <%
             var  info = simpleUpload();
            
             if( null != info )
               {
                 type      = contentTypeFromHeader( info[2] );
                 filename  = filenameFromHeader( info[2] );

                 Response.write( "<div style='background:lightgray;border:1px dashed black;margin:0 0 10px;padding:3px'>" );
                 Response.write( "<span style='font-weight:bold'>Upload Report</span>" );
                 Response.write( "<pre style='font-family:monospace'>" );
                 Response.write( "length   = " + info[1] + "\n" );
                 Response.write( "type     = " + type + "\n" );
                 Response.write( "filename = " + filename );
                 Response.write( "</pre>" );
                 Response.write( "</div>" );
                
                 var  stream      = Server.CreateObject( "ADODB.Stream" );
                 stream.open();
                 stream.type      = 1;
                 stream.position  = 0;
                
                 stream.write( info[0] );
                 stream.saveToFile( Server.MapPath( "./dump/" + filename ), 2 );
                 stream.close();

                 if( null != filename )
                   {
                     Response.write( "<div>" );
                     Response.write( "<img src='./dump/" + filename + "' />" );
                     Response.write( "</div>" );
                   }
               }
           %>
         </div>
       </div>
    
       <div style='clear:both;margin-top:10px'>
         <form style='padding:0;margin:0' method='POST' enctype='multipart/form-data'>
           <div>
             <input type='file' name='source' />
           </div>
           <div style='margin-top:10px'>
             <input type='submit' value='Upload' />
           </div>
         </form>
       </div>
     </div>
   </center>
 </body>
</html>
<%
function simpleUpload()
{
 if( 0 == Request.totalBytes )
   return null;

 var  blob       = Request.binaryRead( Request.totalBytes );
 var  recordSet  = Server.CreateObject( "ADODB.RecordSet" );

 //' 201 = adLongVarChar
 recordSet.fields.append( "raw", 201, Request.totalBytes );
 recordSet.open();
 recordSet.addNew();
 recordSet.fields(0).appendChunk( blob );

 var  str  = "" + recordSet.fields(0);
 var  eol      = "\r\n";
 var  blank    = "\r\n\r\n";
 var  marker  = str.substr( 0, str.indexOf( eol ) + eol.length );

 var  start    = str.indexOf( blank, marker.length );
 start += blank.length;
 //' the last marker has a "--" at the end of it
 var  end      = str.length - (marker.length + 2); 
 var  length  = end - start;

 var  header  = str.slice( marker.length, start - blank.length ).split( eol );

 var  data  = Server.CreateObject("ADODB.Stream");
 data.open();
 data.type      = 1;
 data.position  = 0;
 data.write( blob );
 data.position = start;

 return new Array( data.read( length ), end-start, header );
}

function findValueForKeyFromHeader( header, key )
{
 key = key.toLowerCase();
 var  i;
 for( i=0; i<header.length; ++i )
   {
     line = header[i].split( ": " );  //' again, weak.
     if( key == line[0].toLowerCase() )
       return line[1];
   }
 return null;
}

function contentTypeFromHeader( header )
{
 return findValueForKeyFromHeader( header, "Content-Type" );
}

function filenameFromHeader( header )
{
 var  params = findValueForKeyFromHeader( header, "Content-Disposition" );
 if( null == params )
   return null;

 var  kvs = params.split( "; " );  //' I know this is weak
 var  i;
 for( i=0; i<kvs.length; ++i )
   {
     kv = kvs[i].split( "=" );
     if( "filename" == kv[0].toLowerCase() )
       {
         var  filename  = kv[1].substr( 1, kv[1].length-2 );  //' remove the quotes
         var  slash      = filename.lastIndexOf( "\\" );  //' only IE eh.
         if( -1 != slash )
           filename = filename.substring( slash + 1, filename.length );
        
         return filename;
       }
   }
 return null;
}
%>

Javascript - queryForInnerHTML

2008-01-24T19:00:00.000-07:00

I wrote a little set of functions to help me do asynchronous http queries. This set is really lightweight but handy when you want to fill out a part of your page with something that might take a long time or if you want to update something without the user having to reload the page.

queryForInnerHTML( query, elementId [, postQueryFunc, postArgs] );

query is an http query like "http://host.com/query/lookup.php?stuff=this"

elementId is the id of the element whose innerHTML will be replaced with the response from the query.

postQueryFunc and postArgs are used after the innerHTML is replaced. This provides you with a sort of callback.

var  global_AJAX_Array  = new Array();
var  global_AJAX_Count  = 0;

function makeNewAjax()
  {
    if( window.XMLHttpRequest ) 
      {
        return new XMLHttpRequest(); 
      } 
    else 
      {
        return  new ActiveXObject("MSXML2.XMLHTTP");
      }
  }
function findAjaxIndex()
  {
    var  index;
    for( index = 0; index < global_AJAX_Count; ++index )
      if( null == global_AJAX_Array[index] )
        return index;
    ++global_AJAX_Count;
    return index;
  }


function queryForInnerHTML( query, elementId, postQueryFunc, postArgs )
  {
    var  body;
    var  index = findAjaxIndex();
    global_AJAX_Array[index] = makeNewAjax();
        
    body   = "var ajax = global_AJAX_Array[" + index + "];\n";
    body  += "if( 4 == ajax.readyState )\n";
    body  += "{ document.getElementById(\"" + elementId + "\").innerHTML = ajax.responseText;\n";
    if( null != postQueryFunc )
      {
        body += postQueryFunc;
        
        if( null == postArgs )
          body += "();\n";
        else
          body += "(" + postArgs + ");\n"
      }
    body  += "global_AJAX_Array[" + index + "] = null;\n";
    body  += " }\n";
    
    global_AJAX_Array[index].onreadystatechange = new Function( body );
    
    global_AJAX_Array[index].open( "GET", query, true );
    global_AJAX_Array[index].send(null);
  }

There's more stuff that could be done here like formatting the response with xml/xsl. But for what I've needed for something quick, this has worked well.

I'm going to be moving stuff here

2008-01-18T11:19:00.000-07:00

I've been writing a lot of my software development posts to another blog. I'm going to be moving them here and keep the focus here for that sort of thing and the focus of the other blog more general ramblings.

MovieMerge

2007-04-13T20:22:00.000-06:00

MovieMerge is a simple little application that you can use to blend images over top of movies. You can use it to quickly add text or watermarks to your movies.

Using Photoshop, you could create interesting borders for your movie. A good place to learn how to create Photoshop magic is www.photoshopbasics.com.

The impetus for the application was that a friend of mine took some videos of his dog playing in the snow. However he took the videos in a portrait orientation. He wanted rotate the video plus make it 4x3 (rather than 3x4). The tools that I have kicking on my Mac could do the rotation easy enough. But when I tried to make it 4x3, invariably the movie got stretched.

With Cocoa, Core Data, and QuickTime, writing a custom application is very easy and very quick. Well.... okay. QuickTime and threads can be a real pain. Really great technology, QuickTime, but it shows its age when it comes to threads.

The software is released as Donationware. If you like it, donate some money to me, if you wish.