Scan and Upload Documents in ASP.NET MVC App using Dynamic Web TWAIN

• Download sample - 3.7 MB
• Dynamic Web TWAIN 30-Day Free Trial Download

Introduction

More and more organizations are in need of a document imaging solution to convert paper documentation into electronic / digitized documents. The primary purpose organizations look to do this is to more easily and efficiently access and manage their records and data. Such a migration from paper-based to digital-based document management is fast becoming a must for all organizations.

This article will show you how to scan and upload documents in an ASP.NET Model View Controller (MVC) 3 web application. We will be using the Dynamic Web TWAIN scanning SDK which is well used to expedite development and deployment of such an application. 

Dynamic Web TWAIN is a TWAIN scanning SDK specifically optimized for web applications. The SDK allows you to interact with scanners, digital cameras and other TWAIN compatible devices on client machines in JavaScript. You can save/ upload the scanned documents to a local or server disk, database or SharePoint.

Using the Code

If you are interested in using an SDK to make deploying your document scanning application a much faster process, you can download the 30-day free trial of Dynamic Web TWAIN. After installation, you can find the following files under "\Dynamsoft\Dynamic Web TWAIN 9.0 Trial\Resources."

• DynamicWebTWAIN.cab/ DynamicWebTWAINx64.cab – the ActiveX control edition for Internet Explorer (IE) 32 bit and 64 bit
• DynamicWebTWAINPlugIn.msi - the Plugin Edition for Chrome, Firefox, Safari on Windows
• DynamicWebTWAINMacEditionTrial.pkg – the Mac Edition for Chrome, Firefox, Safari on Mac OS X.

To embed Dynamic Web TWAIN into your MVC application, please copy and paste the above 4 Dynamic Web TWAIN plugin files to the Content folder of your MVC application. Below is a screenshot and code to help get you going.

View for document scanning

As you can see below, we’ve added a "Scan" tab in the Index page. When clicking "Scan," users will see the Scan.aspx page using the Dynamic Web TWAIN plugin.

Initiate Dynamic Web TWAIN in JavaScript

function DW_CreateControl(bNeebBack) {
    var objString = "";
    var DWTContainer;

    // For IE, render the ActiveX Object
    if (DW_InIE) {
        objString = "<object id='" + DW_ObjectName + "' style='width:" + DW_Width + "px;height:" + DW_Height + "px'";

        if (DW_InWindowsX86)
            objString += "codebase='" + DW_CABX86Path + "#version=" + DW_VersionCode + "' "; //load 32 bit CAB file for 32 bit Windows
        else
            objString += "codebase='" + DW_CABX64Path + "#version=" + DW_VersionCode + "' "; //load 64 bit CAB file for 64 bit Windows

        var temp = DW_IsTrial ? DW_TRAILCLASSID : DW_FULLCLASSID;
        objString += " classid='clsid:" + temp + "' viewastext>";

        objString += " <param name='Manufacturer' value='DynamSoft Corporation' />";
        objString += " <param name='ProductFamily' value='" + DW_ProductName + "' />";
        objString += " <param name='ProductName' value='" + DW_ProductName + "' />";
        //objString += " <param name='wmode' value='transparent'/>  ";
        objString += " </object>";
    }   
    // For non-IE browsers, render the embed object  
    else {
        objString = " <embed id='" + DW_ObjectName + "'style='display: inline; width:" + DW_Width + "px;height:" + DW_Height + "px' id='" + DW_ObjectName + "' type='" + DW_MIMETYPE + "'";
        objString += " OnPostTransfer='Dynamsoft_OnPostTransfer' OnPostAllTransfers='Dynamsoft_OnPostAllTransfers'";
        objString += " OnMouseClick='Dynamsoft_OnMouseClick'  OnPostLoad='Dynamsoft_OnPostLoadfunction'";
        objString += " OnImageAreaSelected = 'Dynamsoft_OnImageAreaSelected'";
        objString += " OnImageAreaDeSelected = 'Dynamsoft_OnImageAreaDeselected'";
        objString += " OnMouseDoubleClick = 'Dynamsoft_OnMouseDoubleClick'";
        objString += " OnMouseRightClick = 'Dynamsoft_OnMouseRightClick'";
        objString += " OnTopImageInTheViewChanged = 'Dynamsoft_OnTopImageInTheViewChanged'";
        if (DW_InWindows)
            objString += " pluginspage='" + 
else
            objString += " pluginspage='" + DW_PKGPath + "'></embed>"; //load the Mac edition for Chrome, Firefox, Safari on Mac
    }
   

    DWTContainer = document.getElementById(DW_DWTContainerID);
    DWTContainer.innerHTML = objString;
    DWObject = document.getElementById(DW_ObjectName);
}

Scan documents

It is easy to capture images from scanners using Dynamic Web TWAIN scanning SDK. Below is the JavaScript code to set the pixel type, resolution, to choose ADF /duplex scanning, and to do the scanning.

function AcquireImageInner() {
    if (DW_DWTSourceContainerID == "")
        DWObject.SelectSource();
    else
        DWObject.SelectSourceByIndex(document.getElementById(DW_DWTSourceContainerID).selectedIndex); //select from the available TWAIN devices
    DWObject.CloseSource();
    DWObject.OpenSource();
    DWObject.IfShowUI = document.getElementById("ShowUI").checked;

    var i;
    for (i = 0; i < 3; i++) {
        if (document.getElementsByName("PixelType").item(i).checked == true)
            DWObject.PixelType = i;
    } //set the pixel type of the image
    DWObject.Resolution = Resolution.value;
    DWObject.IfFeederEnabled = document.getElementById("ADF").checked; //whether scan from ADF or flatbed
    DWObject.IfDuplexEnabled = document.getElementById("Duplex").checked; //whether do duplex scan

    DWObject.IfDisableSourceAfterAcquire = true;
    DWObject.AcquireImage();  //acquire images from the scanner
}

Upload documents

After scanning the images into Dynamic Web TWAIN, you can upload the scanned images to a web server using HTTP Post methods.

var DW_ActionPage = "SaveToFile"; //call SaveToFile controller

function btnUpload_onclick(){
    var i, strHTTPServer, strActionPage, strImageType;
    strHTTPServer = DW_ServerName;
    DWObject.HTTPPort = DW_strPort;
    var CurrentPathName = unescape(location.pathname);  // get current PathName in plain ASCII  
    var CurrentPath = CurrentPathName.substring(0, CurrentPathName.lastIndexOf("/") + 1);           
    strActionPage = CurrentPath + DW_ActionPage; //the ActionPage's file path
   
    for(i=0;i<4;i++){
        if(document.getElementsByName("ImageType").item(i).checked == true){
            strImageType  = i + 1;
            break;
        }
    } //choose the image type, JPEG, TIFF, PNG or PDF
    var uploadfilename = txt_fileName.value + "." + document.getElementsByName("ImageType").item(i).value;
   
    if (strImageType == 2 && document.getElementById("MultiPageTIFF").checked) {
        if ((DWObject.SelectedImagesCount == 1) || (DWObject.SelectedImagesCount == DWObject.HowManyImagesInBuffer)) {
            DWObject.HTTPUploadAllThroughPostAsMultiPageTIFF(
                strHTTPServer,
                strActionPage,
                uploadfilename
            );
{
            DWObject.HTTPUploadThroughPostAsMultiPageTIFF(
                strHTTPServer,
                strActionPage,
                uploadfilename
            );
        }
    } //whether to upload the images as a multi-page TIFF file
  
    else if (strImageType == 4 && document.getElementById("MultiPagePDF").checked) {
        if ((DWObject.SelectedImagesCount == 1) || (DWObject.SelectedImagesCount == DWObject.HowManyImagesInBuffer)) {
            DWObject.HTTPUploadAllThroughPostAsPDF(
                strHTTPServer,
                strActionPage,
                uploadfilename
            );
        }
        else {
            DWObject.HTTPUploadThroughPostAsMultiPagePDF(
                strHTTPServer,
                strActionPage,
                uploadfilename
            );
        }
    } //whether to upload the images as a multi-page PDF file
    else {
        DWObject.HTTPUploadThroughPostEx(
            strHTTPServer,
            DWObject.CurrentImageIndexInBuffer,
            strActionPage,
            	          uploadfilename,            
            strImageType
        );
    }

Controller.cs

public String SaveToFile()
        {
            String strImageName;
            HttpFileCollectionBase files = Request.Files;
            HttpPostedFileBase uploadfile = files["RemoteFile"];
            strImageName = uploadfile.FileName;

            uploadfile.SaveAs(Server.MapPath("~") + "\\UploadedImages\\" + strImageName);

            return "";
        }

Run or deploy the application on a web server

The complete source code can be downloaded from this article.

There is a "Scripts\ProductKey.js" file with a temporary trial product key. If you get a license error when running the sample code, you can download Dynamic Web TWAIN from Dynamsoft’s website to get a valid trial license:  Dynamic Web TWAIN 30-Day Free Trial Download

To test document scanning and uploading from different client machines, you can simply copy the sample code files to your web server (IIS, Apache or Tomcat). Users only need to download and install the ActiveX/Plugin in the browser on their first visit to the scan page. 

The online demo is also available for your reference: Dynamic Web TWAIN Online Demo

Support

Is your organization currently undergoing a project to digitize documents? Have you deployed the SDK and how has it helped? Let us know in the comments or by contacting us. You can also contact us if you need any help to get this sample code up and running. To do so, reach us by email at support@dynamsoft.com. For pricing or licensing questions, call us at 1-877-605-5491 or email our sales team at sales@dynamsoft.com.