Dynamic Web TWAIN Tutorial: Upload Images to a Web Server

Dynamic Web TWAIN is a TWAIN scan recognition control designed for Web applications. By writing a few lines of code on the TWAIN interface, you can scan a document with a TWAIN compatible scanner or get an image from a digital camera/capture card. This article shows you how to upload images to a Web server in Dynamic Web TWAIN.

Upload the image to the Web server

Before we can upload the image, we need to set the server IP/ name, set the port number, and define the path to the action page. The action page refers to the target script that receives HTTP Post requests containing image data and handles all server-side operations, such as saving the data to a hard disk or database. Here’s an example:

Upload and save to the server disk

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 + "actionPage.aspx";
var uploadfilename = "TestImage.pdf";Copy the code

In the code snippet

StrHTTPServer is used to store the server name that specifies which server to upload the image to. You can also use the IP of the server for the same purpose. If you want to upload images to the same server as the current page, we recommend that you use location.hostname to get the hostname runtime.

The HTTPPort attribute specifies the HTTP port used for uploading. Typically, port 80 is used for HTTP and port 443 is used for HTTPS. If you are unsure of the port number, you can use location.port == “”? 80: location.port Gets the current port number at runtime.

CurrentPathName and CurrentPath are used to build relative paths to action pages.

StrActionPage The relative path of the stored action page.

Uploadfilename Specifies the name of the file to store the uploaded image. You should change the filename extension accordingly.

Note:

In version 10.0 and later, we used the browser as the upload agent. Because of browser security restrictions, client-side scripts (for example, JavaScript) are not allowed to make requests to another domain. Therefore, when you try to upload an image to a server with a different domain, subdomain, port or protocol, you need to configure the server to Allow such requests by adding HTTP response headers, namely: access-Control-allow-Origin: *

Take IIS 7 as an example. What you need to do is merge the following code snippets into the web.config file in the application/site root directory:

<? xml version="1.0" encoding="utf-8"? > <configuration> <system.webServer> <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET,PUT"/>
        <add name="Access-Control-Allow-Headers" value="x-requested-with"/>
        <add name="Access-Control-Allow-Credentials" value="true" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration>Copy the code

If you don’t already have a web.config file, just create a new file called “web.config” and add the code snippet above.

methods

Now we can call one of the HTTP upload methods to upload the image. There are 8 ways to do this:

We take this approach HTTPUploadAllThroughPostAsPDF (), for example:

DWObject.HTTPUploadAllThroughPostAsPDF(
    strHTTPServer,
    strActionPage,
    uploadfilename,
    OnHttpUploadSuccess,
    OnHttpUploadFailure
);Copy the code

With this approach, all images in the Dynamic Web TWAIN control are sent to the Web server as a multi-page PDF file.

In the code above, the arguments OnHttpUploadSuccess and OnHttpUploadFailure are optional callback functions. If they exist, the method is asynchronous; Otherwise, the method is synchronous. You can use these methods asynchronously to avoid possible browser hangs.

Here is a simple implementation of the two functions:

function OnHttpUploadSuccess() {
    console.log('successful');
}
function OnHttpUploadFailure(errorCode, errorString, sHttpResponse) {
    alert(errorString + sHttpResponse);
}Copy the code

To upload an image as a single-page file, use HTTPUploadThroughPost() or HTTPUploadThroughPostEx().

Page if you would have a selected image upload multiple files, you can use HTTPUploadThroughPostAsMultiPagePDF () or HTTPUploadThroughPostAsMultiPageTIFF ().

The next article will show how to upload images to FTP, databases, etc