Image Scanning & Uploading in Web App
Image Scanning & Uploading in Web App
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.