Click here to Skip to main content
15,867,568 members
Articles / Web Development / ASP.NET
Article

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

10 Jul 2013CPOL3 min read 60.3K   4.3K   11   5
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.

This article is in the Product Showcase section for our sponsors at CodeProject. These articles are intended to provide you with information on products and services that we consider useful and of value to developers.

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.

Image 1

Image 2

Initiate Dynamic Web TWAIN in JavaScript

C#
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.

C#
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.

C#
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

C#
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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Canada Canada
Dynamsoft has more than 15 years of experience in TWAIN SDKs, imaging SDKs and version control solutions.

Our products include:

TWAIN SDK
- Dynamic Web TWAIN: a TWAIN scanning SDK optimized for web document management applications.
- Dynamic .NET TWAIN: a .NET TWAIN and Directshow Image Capture SDK for WinForms/WPF applications.

Imaging SDKs
- Barcode Reader for Windows, Linux, macOS, iOS, Android and Raspberry Pi.
- OCR addon for both web and .NET TWAIN SDKs

Version Control
- SourceAnywhere: a SQL server-based source control solution. Both on-premise and hosting options are provided.

http://www.dynamsoft.com/
This is a Organisation

21 members

Comments and Discussions

 
QuestionGetting a 404 error while loading the js file. Pin
Badhon Jain23-Dec-15 18:40
professionalBadhon Jain23-Dec-15 18:40 
Suggestion[My vote of 2] My vote of 2 - Misleading title! Pin
Andreas Kroll10-Jul-13 6:03
Andreas Kroll10-Jul-13 6:03 
Question[My vote of 2] Title Pin
Corey Fournier10-Jul-13 5:22
Corey Fournier10-Jul-13 5:22 
The title should read, "Use 3rd Party Plugin To Scan and Upload Documents...."
AnswerRe: [My vote of 2] Title Pin
Rachel Jia10-Jul-13 16:21
Rachel Jia10-Jul-13 16:21 
AnswerRe: [My vote of 2] Title Pin
Sohaib Javed27-Dec-15 2:07
Sohaib Javed27-Dec-15 2:07 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.