How to Scan Documents and Upload Images to SQL Server in Web Browser

Jun 17, 2021
 Tutorials

The ability to easily store and retrieve digitized documents is an important feature of any document management system. In this article, we demonstrate how to use Dynamic Web TWAIN to expedite the development of a web document management application. You will see how to acquire documents from a document scanner, and how to upload document images to SQL Server in ASP.NET.

SDK Download

https://www.dynamsoft.com/web-twain/downloads

Key Features of Dynamic Web TWAIN

First, it’s important to point out key features within Dynamic Web TWAIN that streamline the development process:

  • Compatible with the mainstream browsers including IE, Firefox, Chrome, Safari and Opera on Windows, macOS, and Linux
  • Capable of scanning images from scanners and other TWAIN/WIA/SANE compatible devices
  • Support for BMP, JPEG, PNG, single/multi-page PDF and single/multi-page TIFF
  • Support for HTTPS uploading
  • Support for cookies & sessions
  • Support for uploading extra text alongside respective images

API Reference

Dynamic Web TWAIN API Reference

Document Scanning and SQL Server Uploading

Document Scanning

Dynamic Web TWAIN is a client-side SDK written in JavaScript. With the SDK, you can customize the scan settings such as resolution, pixel type, brightness, contrast, page size, etc. Let’s glimpse the code for scanning documents.

function acquireImage() {
 if (_divDWTSourceContainerID == "")
  DWObject.SelectSource();
 else
  DWObject.SelectSourceByIndex(document.getElementById(_divDWTSourceContainerID).selectedIndex); //select a TWAIN scanner
 DWObject.CloseSource(); //make sure the source is closed before using it
 DWObject.OpenSource();
 DWObject.IfShowUI = document.getElementById("ShowUI").checked; //show or hide the user interface of the TWAIN scanner
 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 acquired images, B/W, gray or color
 DWObject.Resolution = document.getElementById("Resolution").value; //set the resolution
 DWObject.IfFeederEnabled = document.getElementById("ADF").checked; //scan images from auto feeder
 DWObject.IfDuplexEnabled = document.getElementById("Duplex").checked; //enable duplex scanning
 appendMessage("Pixel Type: " + DWObject.PixelType + "<br />Resolution: " + DWObject.Resolution + "<br />");
 DWObject.IfDisableSourceAfterAcquire = true;
 DWObject.AcquireImage(); //start document scanning
 }

Save Scanned Images as a Multi-Page PDF to SQL Server

After scanning documents, you can save images with different formats: BMP, PNG, JPG, TIF and PDF. Multi-page TIF and PDF are also supported. In the following code, we will save the images as a multi-page PDF file:

function btnUpload_onclick() {
 if (!checkIfImagesInBuffer()) {
 return;
 }
 var i, strHTTPServer, strActionPage, strImageType;
 _txtFileName.className = "";
 if (!strre.test(_txtFileName.value)) {
 _txtFileName.className += " invalid";
 _txtFileName.focus();
 appendMessage("Please input file name./*Currently only English names are allowed.*/");
 return;
 }
 //DWObject.MaxInternetTransferThreads = 5;
 strHTTPServer = _strServerName;
 DWObject.HTTPPort = _strPort;
 var CurrentPathName = unescape(location.pathname); // get current PathName in plain ASCII
 var CurrentPath = CurrentPathName.substring(0, CurrentPathName.lastIndexOf("/") + 1);
 strActionPage = CurrentPath + _strActionPage; // the aspx page for receiving image data on the server side
 var redirectURLifOK = CurrentPath + "online_demo_list.aspx";
 var uploadfilename = _txtFileName.value + "." + document.getElementsByName("ImageType").item(i).value;
 DWObject.HTTPUploadAllThroughPostAsPDF(
 strHTTPServer,
 strActionPage,
 uploadfilename
 ); //upload images as multi-page PDF file
 _strTempStr = _strTempStr + "Upload: ";
 if (checkErrorString()) {
 if (strActionPage.indexOf("SaveToFile") != -1)
 alert(DWObject.ErrorString)//if save to file.
 else
 window.location = redirectURLifOK;
 }
 }

Create the action page for inserting uploaded images to SQL Server:

<%@ Page Language="C#"%>
<%
try
{
    String strImageName;
    int iFileLength;
    HttpFileCollection files = HttpContext.Current.Request.Files;
    HttpPostedFile uploadfile = files["RemoteFile"];
    strImageName = uploadfile.FileName;
    iFileLength = uploadfile.ContentLength;

    Byte[] inputBuffer = new Byte[iFileLength];
    System.IO.Stream inputStream;

    inputStream = uploadfile.InputStream;
    inputStream.Read(inputBuffer, 0, iFileLength);

    String strConnString;

    strConnString = Common.DW_ConnString;

    System.Data.SqlClient.SqlConnection sqlConnection = new System.Data.SqlClient.SqlConnection(strConnString);

    String SqlCmdText = "INSERT INTO " + Common.DW_SaveTable + " (strImageName,imgImageData) VALUES (@ImageName,@Image)";
    System.Data.SqlClient.SqlCommand sqlCmdObj = new System.Data.SqlClient.SqlCommand(SqlCmdText, sqlConnection);

    sqlCmdObj.Parameters.Add("@Image", System.Data.SqlDbType.Binary, iFileLength).Value = inputBuffer;
    sqlCmdObj.Parameters.Add("@ImageName", System.Data.SqlDbType.VarChar, 255).Value = strImageName;

    sqlConnection.Open();
    sqlCmdObj.ExecuteNonQuery();
    sqlConnection.Close();
}
catch
{
} 
%>

Sample Code

Check the full sample code of scanning documents and upload as PDF into SQL Server in Code Gallery.

https://www.dynamsoft.com/web-twain/resources/code-gallery/?SampleID=4

Explore Our Developer Hub for Guides, API References, and More.