Image Scanning & Uploading in Web App

• Download Sample Code - 8 KB
• Dynamic Web TWAIN Online Demo

Once you have your documents scanned through your web application, the next step would be edit and save the images, probably along with some other extra information, such as the patient ID and the comments. During the image uploading process, you may need to address the following problems:

• How to handle the image formats;
• Whether multi-page is involved;
• What if I need to upload extra texts along with the scanned images;
• How to ensure the image data security over the network;
• Where to store the images/documents.

I’ve uploaded a simple sample along with the article. After deploying the application to your web server, you can try out the features of image scanning and uploading by yourself. The sample is developed based on a third-party component provided by Dynamsoft – Dynamic Web TWAIN. You can read on to learn more about the source code and how the component solves the above listed problems.

About Dynamic Web TWAIN

Dynamsoft’s Dynamic Web TWAIN is a browser plug-in that allows you to scan images from scanners and other TWAIN compliant devices. After scanning, you can edit and upload images to your local folder, web server, FTP site, SharePoint and databases without leaving your browser. You can check out the online demo to get a general idea of the image acquisition SDK.

Key Features

• Compatible with the main-stream browsers including IE, Firefox, Chrome, Safari and Opera
• Capable of scanning images from scanners and other TWAIN compatible devices
• Support for BMP, JPEG, PNG, single/multi-page PDF and single/multi-page TIFF
• Support for SSL
• Support for cookie & session
• Support for uploading extra texts along with the images

Image Scanning

Able to work with the main-stream browsers and capable of scanning images from scanners in a neat way are the shiny features provided by Dynamsoft. Since we focus on image uploading in this article, I provide a simple one that allows you to scan multiple images at a time.

function DWT_AcquireImage() {
    if (DWT_DWTSourceContainerID == "")
        WebTWAIN.SelectSource();
    else
        WebTWAIN.SelectSourceByIndex(document.getElementById(DWT_DWTSourceContainerID).selectedIndex);
    WebTWAIN.CloseSource();
    WebTWAIN.OpenSource();

    WebTWAIN.IfFeederEnabled = true;
    WebTWAIN.IfShowUI = false;
    WebTWAIN.PixelType = 2;
    WebTWAIN.Resolution =200;
    WebTWAIN.AcquireImage();
}

By setting IfFeederEnabled to true, the documents will be scanned from the Automatic Document Feeder (ADF). Besides the pixel type and resolution hard coded in the sample, more properties, such as page size and brightness, are available to help you standardize (or customize) the image features.

Upload Scanned Images

The following sample shows you how to upload the scanned images to your web server. According to your requirements, you can also upload the images to your database, local folder, or even send them to someone through email.

Whether to upload images over SSL

When IfSSL is set to true, the images will be uploaded over SSL to secure your image data.

    strHTTPServer = location.hostname;
    if (window.location.protocol != "https:") {
        WebTWAIN.HTTPPort = location.port == "" ? 80 : location.port;
        WebTWAIN.IfSSL = false; // if 55302 is the port number of non-secure port
    }
    else {
        WebTWAIN.HTTPPort = 443;
        WebTWAIN.IfSSL = true; // if 443 is the port number of secure port
    }

Upload Extra Info

Create a text box "txt_Directory". Use the following lines of code to upload extra information along with the images.

WebTWAIN.ClearAllHTTPFormField();
WebTWAIN.SetHTTPFormField("Directory",   document.getElementById("txt_Directory").value);

Upload the scanned images to your web server

Upload all the scanned images or the selected ones to your web server, and save them in multi-page PDF format.

DWT_ScanAndUpload.js

    if (!DWT_CheckIfImagesInBuffer()) {
        return;
    }
    var i, strHTTPServer, strActionPage, strImageType;
    var ID_txt_fileName = document.getElementById("txt_fileName");
    ID_txt_fileName.value = ID_txt_fileName.value.trim();
    ID_txt_fileName.className = "";
    if (!strre.test(ID_txt_fileName.value)) {
        ID_txt_fileName.className += " invalid";
        ID_txt_fileName.focus();
        AppendMessage("Please input file name.Currently only English names are allowed.");
        return;
    }

    var CurrentPathName = unescape(location.pathname); // get current PathName in plain ASCII	
    var CurrentPath = CurrentPathName.substring(0, CurrentPathName.lastIndexOf("/") + 1);
    strActionPage = CurrentPath + "SaveToFile.aspx"; //the ActionPage's file path

    var uploadfilename = ID_txt_fileName.value + ".pdf";

    if ((WebTWAIN.SelectedImagesCount == 1) || (WebTWAIN.SelectedImagesCount == WebTWAIN.HowManyImagesInBuffer)) {
        WebTWAIN.HTTPUploadAllThroughPostAsPDF(
            strHTTPServer,
            strActionPage,
            uploadfilename
        );
    }
    else {
        WebTWAIN.HTTPUploadThroughPostAsMultiPagePDF(
            strHTTPServer,
            strActionPage,
            uploadfilename
        );
    }
    DWT_CheckErrorString();
}

SaveToFile.aspx.cs

using System;
using System.IO;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;


public partial class SaveToFile : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        String strExc = "";
        try
        {
            HttpFileCollection files = HttpContext.Current.Request.Files;
            HttpPostedFile uploadfile = files["RemoteFile"];
            string directoryPath = System.Web.HttpContext.Current.Request.MapPath(".") + "/ImageScanned/" + HttpContext.Current.Request.Form["Directory"] + "/";
            if (!System.IO.Directory.Exists(directoryPath)) System.IO.Directory.CreateDirectory(directoryPath);
            string filePath = directoryPath + uploadfile.FileName;
            uploadfile.SaveAs(filePath);
        }
        catch (Exception exc)
        {
            strExc = exc.ToString();
            String strField1Path = HttpContext.Current.Request.MapPath(".") + "/" + "log.txt";
            if (strField1Path != null)
            {
                StreamWriter sw1 = File.CreateText(strField1Path);
                sw1.Write(strExc);
                sw1.Close();
            }
            Response.Write(strExc);
        }
    }
}

Supported image formats include BMP, JPEG, PNG, (Multi-page) TIFF and (Multi-page) PDF.

Download the Sample

More samples of Dynamic Web TWAIN can be found below:
Dynamic Web TWAIN Samples

If you’d like to evaluate Dynamic Web TWAIN, you can download the free trial here:
Dynamic Web TWAIN 30-day Free Trial

If you have any questions, you can contact our support team at twainsupport@dynamsoft.com.