Dynamic Web TWAIN: How to Upload Images with AJAX

Scenario

Some customers may want to upload images to a web server via form/AJAX. It is supported by Dynamic Web TWAIN.

Solution

Basically, the workflow would be like this:

  1. Scan images to the control.
  2. Use the method GetSelectedImagesSize to pre-calculate the file size of the scanned images.
  3. Use SaveSelectedImagesToBase64Binary to save the selected images in the buffer to a base64 string.
  4. Uploading the string to the server
  5. Since the uploaded images are in the form of a base64-encoded string, you'll need to decode the string and save it back to images. We'll take C# as an example in the code sample below.

Code Sample

Client-Side

// Selecting Files to Upload:
DWObject.SelectedImagesCount = DWObject.HowManyImagesInBuffer;
for (var i = 0; i < DWObject.HowManyImagesInBuffer; i++) { // Loop through each of the images in the viewer.
         DWObject.SetSelectedImageIndex(i, i);
}
// Pre-calculate the size of the images:
DWObject.GetSelectedImagesSize(strImageType);
// Encode the images into a base64 string:
var imagedata = DWObject.SaveSelectedImagesToBase64Binary(); 
// Uploading images to the Server:
var param = encodeURIComponent("ImageName") + "=" + encodeURIComponent(uploadfilename) + "&" + encodeURIComponent("RemoteFile") + "=" + encodeURIComponent(imagedata);
//You can upload the image data from here
makeRequest(strActionPage, param, false);

//AJAX
function makeRequest(url, parameter, flg) {
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();// Set up the request.
}
else {
if (window.ActiveXObject) {
try {
xhr = new ActiveXObject("MSXML2.XMLHTTP.3.0");
}
catch (ex) {
alert(ex);
}
}
}
if (xhr) {
if (flg) {
xhr.open("GET", url, true); // Open the connection.
xhr.onreadystatechange = requestresultCat;
xhr.setRequestHeader("If-Modified-Since", "0");
xhr.send(null);
}
else {
xhr.open("POST", url, false);
if (parameter != null) {
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(parameter); // Send the Data.
}
else {
xhr.send(null);
}
}
}
else {
AppendMessage("<b>Sorry, but I couldn't create an XMLHttpRequest!</b> ");
}
}

function requestresult() {
if (xhr.readyState == 4) {
if (xhr.status == 200) { // File(s) uploaded.
var outMsg;
if (xhr.responseXML && xhr.responseXML.documentElement) {
outMsg = xhr.responseXML;
alert(xhr.responseText);
}
}
}
}

 

 

Server-Side


try
{
  string imageName = HttpContext.Current.Request.Form["ImageName"];
  string imageData = HttpContext.Current.Request.Form["RemoteFile"];
  String Path = System.Web.HttpContext.Current.Request.MapPath(".") + "/ImageScanned/";
  if (!Directory.Exists(Path))
  {
    Directory.CreateDirectory(Path);
  }
  string outputFileName = Path + imageName;
  // Convert the Base64 UUEncoded input into binary output.
  byte[] binaryData;
  try
  {
    binaryData = System.Convert.FromBase64String(imageData);
  }
  catch (System.ArgumentNullException)
  {
    System.Console.WriteLine("Base 64 string is null.");
    return;
  }
  catch (System.FormatException)
  {
    System.Console.WriteLine("Base 64 string length is not " +
      "4 or is not an even multiple of 4.");
    return;
  }

  // Write out the decoded data.
  System.IO.FileStream outFile;
  try
  {
    outFile = new System.IO.FileStream(outputFileName,
    System.IO.FileMode.Create,
    System.IO.FileAccess.Write);
    outFile.Write(binaryData, 0, binaryData.Length);
    outFile.Close();
  }
  catch (System.Exception exp)
  {}
}
catch (Exception exc)
{}
Is this page helpful?

Leave a Reply

Your email address will not be published.