Click here to Skip to main content
11,580,572 members (67,754 online)
Click here to Skip to main content

Image Scanning & Uploading in Web App

, 17 Jan 2013 CPOL 16K 1.1K 9
Image Scanning & Uploading in Web App

Editorial Note

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

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.

License

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

Share

About the Author

Dynamsoft
Canada Canada
Dynamsoft is the leading provider of web/.NET image acquisition SDKs and version control solutions.
www.dynamsoft.com
Group type: Organisation (No members)



You may also be interested in...

Comments and Discussions

 
QuestionIs this code free or trial Pin
Member 104441624-Dec-13 2:07
memberMember 104441624-Dec-13 2:07 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150603.1 | Last Updated 17 Jan 2013
Article Copyright 2013 by Dynamsoft
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid