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:
HowManyImagesInBuffer
CurrentImageIndexInBuffer
HTTPUpload()
Dynamsoft.DWT.EnumDWT_ImageType
Dynamsoft.DWT.EnumDWT_UploadDataFormat
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
Scan a document
Upload the image
After uploading, you should receive the Upload successful message
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
Previous Article
To get the image you are uploading, review scanning an image
Next article
Now that you have completed your HelloWorld application and uploaded your first file, it is now time to explore setting scan parameters.