--- layout: default-layout needAutoGenerateSidebar: true title: Dynamic Web TWAIN SDK Getting Started - Uploading Images to the Server keywords: Dynamic Web TWAIN, Documentation, Hello World, upload, helloworld breadcrumbText: Uploading documents description: Dynamic Web TWAIN SDK Documentation - Uploading Images to the Server --- # Uploading Images to the Server In the [previous guide]({{site.getstarted}}scanning.html), we incorporated DWT scanning functionality into the HelloWorld web application. Typically, we would like to upload scanned documents to the server. Here, we demonstrate how to use DWT to upload scanned documents as a PNG file by building on HelloWorld. > Prerequisites: Hello World - Scanning Images ## Add an Upload Button Insert this line in the `` element of `HelloWorld.html` to create a button: ```html ``` ## Define the Upload Function Here we define an upload function, as well as its helpers. Insert the following javascript in the existing `
``` ## Run the Application ### Open the Page in Your Browser Open `HelloWorld.html` in your browser, for example by selecting the `HelloWorld.html` file to open with your browser. On the web page, you should see a scan button, an upload button, and an empty preview box: ![Screenshot of web app with no scanned images](../../assets/imgs/HelloWorldUpload0.png) ### Scan a document Initiate a scan by clicking the Scan button in the same way that you did in the previous [scanning](scanning.md#press-the-scan-button) guide. This is a test image acquired from the TWAIN Virtual Scanner for reproducibility: ![Screenshot of web app with scanned sample image](../../assets/imgs/HelloWorldUpload1.png) ### Upload the image Once an image has been acquired, click the upload button.You should receive the successful upload message upon completion: ![Screenshot of web app after successful file upload alert](../../assets/imgs/HelloWorldUpload2.png) >Note: 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** - [Try the Scan Documents + Upload demo](https://demo.dynamsoft.com/Samples/dwt/Scan-Documents-and-Upload-Them/DWT_Scan_Upload_Demo.html){:target="_blank" rel="noreferrer noopener"} - [Get the Scan Documents + Upload demo source code](https://www.dynamsoft.com/web-twain/sample-downloads/?demoSampleId=4){:target="_blank" rel="noreferrer noopener"} # Previous Article You can review scanning an image with DWT [here](/_articles/hello-world/scanning.md). # Next Article Now that HelloWorld can both scan and upload images, the next step is [specifying scan parameters](/_articles/hello-world/scan-settings.md) to control image scanning methods directly through the API.