Scan and Upload Documents in ASP.NET MVC3 Application Using Dynamic Web TWAIN SDK

Scan and Upload Documents in ASP.NET MVC Application

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 document library.

Using the Code

To embed Dynamic Web TWAIN into your MVC application, please add /Resources/ folder into your MVC application. That folder can be found in the installation directory. Below is a screenshot to help get you going.

Dynamic Web TWAIN Resources

NOTE: /Resources/ should be copied from the installation directory of Dynamic Web TWAIN. The items in that folder will help you get component running for you.

View for document scanning

In the Index page, let’s add a

and a button.

<div id="dwtcontrolContainer"></div>

 
<input type="button" value="Scan" onclick="AcquireImage();" />

Our JS files in the /Resources/ folder will find above

and embed the control. So please don’t forget to include them. Just like this.

<script src="~/Resources/dynamsoft.webtwain.initiate.js"></script>
<script src="~/Scripts/DWTSample_ScanAndUpload.js"></script>
<script src="~/Resources/dynamsoft.webtwain.config.js"></script>

In this case, please create a new JS file called ‘DWTSample_ScanAndUpload.js’. We will add some customized code (e.g. function AcquireImage()) to manipulate the control. You can rename it as you like.

Scan documents

It is easy to capture images from scanners using Dynamic Web TWAIN scanning SDK. Below is the JavaScript code to for scanning. Let’s add it into ‘DWTSample_ScanAndUpload.js’.

function AcquireImage() {    
    if (DWObject) {
        DWObject.IfDisableSourceAfterAcquire = true;
        DWObject.IfShowUI = false;
        if (DWObject.SourceCount > 0) {
            DWObject.SelectSource();
            DWObject.AcquireImage();
        }
    }
}

By running the MVC application, you will be able to acquire images from your device. If you don’t have any TWAIN compliant device, you can try with the Virtual TWAIN Scanner.

Please have a try by running the application. You will find how easy it is to make a web scan solution with Dynamic Web TWAIN.

Auto Upload documents

After scanning the images into Dynamic Web TWAIN, you can upload the scanned images to a web server using HTTP Post methods. Please create a new folder /UploadedImages/ in the project.

In this article, we will upload the image automatically after acquisition through an event called onPostAllTransfers. How to register it? That’s easy. Open ‘dynamsoft.webtwain.config.js’ and de-comment the line like the following.

//'onPreTransfer':Dynamsoft_OnPreTransfer,      
//'onPostLoad':Dynamsoft_OnPostLoad,   
//'onPostTransfer':Dynamsoft_OnPostTransfer,   
'onPostAllTransfers':Dynamsoft_OnPostAllTransfers,                       
//'onSourceUIClose':Dynamsoft_OnSourceUIClose,

Afterwards, open ‘DWTSample_ScanAndUpload.js’ and add the function below. In this way, the function will be triggered at the end of image acquisition (i.e. all transfers completed).

function Dynamsoft_OnPostAllTransfers() {
    if (DWObject) {
        if (DWObject.HowManyImagesInBuffer > 0) {
            var strHTTPServer = location.hostname;
            DWObject.HTTPPort = location.port == "" ? 80 : location.port;
            var CurrentPathName = unescape(location.pathname); 
            var CurrentPath =
             CurrentPathName.substring(0, CurrentPathName.lastIndexOf("/") + 1);
            var strActionPage = CurrentPath + "Home/SaveToFile"; 
            var uploadfilename = "WebTWAINImage.pdf";

            DWObject.HTTPUploadAllThroughPostAsPDF(strHTTPServer, strActionPage, uploadfilename);
        }
    }
}

In the Controller, please add code to manage the uploaded data. Please don’t forget to create a new folder /UploadedImages/ for uploaded images.

        public ActionResult SaveToFile()
        {
            try
            {
                String strImageName;
                HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;
                HttpPostedFile uploadfile = files["RemoteFile"];
                strImageName = uploadfile.FileName;
                uploadfile.SaveAs(Server.MapPath("/") + "\\UploadedImages\\" + strImageName);
            }
            catch(Exception ex)
            {
            }
            return null;             
        }

Please run the MVC application to see how the scan & upload work for you. Scanned image(s) should be sent to server folder /UploadedImages/ automatically now.

Save documents

Following is a function for saving acquired image on local drive. Please check. Let’s add it into ‘DWTSample_ScanAndUpload.js’.

function SaveImage() {
    if (DWObject) {
        DWObject.IfShowFileDialog = true;
        if (DWObject.HowManyImagesInBuffer > 0)
            DWObject.SaveAllAsMultiPageTIFF("WebTWAINImage.tiff");
    }
}

Likewise, you need to add a button to call this function.

<input type="button" value="Save" onclick="SaveImage();" />

Here is what the application looks like:

Run or deploy the application on a web server

The complete source code can be downloaded from this article.

There is a “dynamsoft.webtwain.config.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.
Get 30-Day Free Trial

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

This article was originally posted on CodeProject.

Subscribe Newsletter

Subscribe to our mailing list to get the monthly update.

Subscribename@email.com