Thanks for Downloading Dynamic Web TWAIN 30-Day Trial!

Your download will start shortly. If your download does not begin, click here to retry.

Uploading Images to the Server

After scanning your document, you may want to upload the scanned documents to a server. In the previous guide, you created the scanning component of your HelloWorld, now you will add the code to perform an upload scanned documents as a PNG file.

Add an Upload button in HTML

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

Write the Upload function and the associated callback functions

function Upload() {
    if (DWObject && DWObject.HowManyImagesInBuffer > 0) {
        var strUrl = "https://demo.dynamsoft.com/sample-uploads/";
        var imgAry = [DWObject.CurrentImageIndexInBuffer];
        DWObject.HTTPUpload(
            strUrl, 
            imgAry, 
            Dynamsoft.DWT.EnumDWT_ImageType.IT_PNG,
            Dynamsoft.DWT.EnumDWT_UploadDataFormat.Binary, 
            "WebTWAINImage.png", 
            onUploadSuccess, 
            onUploadFailure);
    } else {
        alert("There is no image in buffer.");
    }
}

function onUploadSuccess() {
    alert('Upload successful');
}

function onUploadFailure(errorCode, errorString, sHttpResponse) {
    alert(sHttpResponse.length > 0 ? sHttpResponse : errorString);
}

Links to API Reference:

Review the code

<html>

<head>
    <title>Hello World</title>
    <script src="Resources/dynamsoft.webtwain.initiate.js"></script>
    <script src="Resources/dynamsoft.webtwain.config.js"></script>
</head>

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

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

    <script type="text/javascript">
        var DWObject;

        function Dynamsoft_OnReady() {
            DWObject = Dynamsoft.DWT.GetWebTwain("dwtcontrolContainer");
        }

        function AcquireImage() {
            if (DWObject) {
                DWObject.SelectSourceAsync().then(function () {
                    return DWObject.AcquireImageAsync({ 
                        IfCloseSourceAfterAcquire: true 
                    });
                }).catch(function (exp) {
                    alert(exp.message);
                });
            }
        }
        function Upload() {
            if (DWObject && DWObject.HowManyImagesInBuffer > 0) {
                var strUrl = "https://demo.dynamsoft.com/sample-uploads/";
                var imgAry = [DWObject.CurrentImageIndexInBuffer];
                DWObject.HTTPUpload(strUrl, imgAry, Dynamsoft.DWT.EnumDWT_ImageType.IT_PNG,
                    Dynamsoft.DWT.EnumDWT_UploadDataFormat.Binary, "WebTWAINImage.png", onUploadSuccess, onUploadFailure);
            } else {
                alert("There is no image in buffer.");
            }
        }

        function onUploadSuccess() {
            alert('Upload successful');
        }

        function onUploadFailure(errorCode, errorString, sHttpResponse) {
            alert(sHttpResponse.length > 0 ? sHttpResponse : errorString);
        }

    </script>
</body>

</html>

Run the application

Open the application in your browser

HelloWorldUpload0

Scan a document

HelloWorldUpload1

Upload the image

After uploading, you should receive the Upload successful message

HelloWorldUpload2

Additional information

For the purposes of this guide, a Dynamsoft hosted end point is used, but for your own application you will need to create your own end point.

Sample Applications

To get the image you are uploading, review scanning an image

Now that you have completed your HelloWorld application and uploaded your first file, it is now time to explore setting scan parameters.