Note: The "Sample" directory mentioned in the steps below refers to the "Sample" directory shown in the image.

1. Download the server-side ASP.NET code, unzip it and copy the aforementioned "Upload" directory to the "Sample" directory. Under the "Upload" root folder, there is a file "SaveToFile.aspx". This is the backend page that accepts the uploaded data.

2. Modify the client-side upload function in {path}\Sample\Scripts\online_demo_operation.js, modify the "URL" parameter of HTTPUpload() to match the actual path of the upload server you deployed. The "URL" parameter accepts both absolute and relative paths.

   Refer to the following code snippet:

function Upload() {
    if (DWTObject && DWTObject.HowManyImagesInBuffer > 0) {
      //Path to the server-side script. You can adjust it according to the actual path of the upload server you deployed.
      var strUrl = "http://{server-path}/Sample/Upload/SaveToFile.aspx";
      var imgAry = [DWTObject.CurrentImageIndexInBuffer];
      DWTObject.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);
}

3. Copy the "Sample" directory to the IIS website or other web server services.

4. Navigate to http://{server-path}/Sample/index.html in your browser to access the sample.

Note: The "Sample" directory mentioned in the steps below refers to the "Sample" directory shown in the image.

1. Please ensure that Node.js is installed. The recommended version is v20.13.1.

2. Please ensure your web server supports ASP.NET(C#).

1. Download the server-side ASP.NET code, unzip it and copy the "Upload" directory to the "Sample\src\public" directory. Under the "Upload" folder, there is a file "SaveToFile.aspx". This is the backend page that accepts the uploaded data.

2. Modify the client-side upload function In {path}\Sample\src\app\components\tools\dwtService.ts, modify the "URL" parameter of HTTPUpload() to match the actual path of the upload server you deployed. The "URL" parameter accepts both absolute and relative paths.

   Refer to the following code snippet:

Upload(): Promise<any> {
  return new Promise((res, rej) => {
    if (this._dwtObject && this._dwtObject.HowManyImagesInBuffer > 0) {
      //Path to the server-side script. You can adjust it according to the actual path of the upload server you deployed.
      let strUrl = "http://{server-path}/dist/Upload/SaveToFile.aspx";
      let imgAry = [this._dwtObject.CurrentImageIndexInBuffer];
      this._dwtObject.HTTPUpload(
        strUrl, 
        imgAry, 
        Dynamsoft.DWT.EnumDWT_ImageType.IT_PNG,
        Dynamsoft.DWT.EnumDWT_UploadDataFormat.Binary, 
        "WebTWAINImage.png", 
        ()=>{
          res();
        }, (errCode, errString, responseStr) => { 
          rej({
            code: errCode,
            message: errString
          });
        });
    } else {
      rej({
        code: -1,
        message: "There is no image in buffer."
      });
    }
  }
}

3. Build the client-side project

   Open your terminal or Command Prompt and execute the following three commands to build the project:

   1). Navigate to the Sample directory:

   cd [path]/Sample
   

   2). Install the dependencies:

   npm install
   

   3). Build the project:

   npm run build
   

4. Copy the "Sample/dist" directory, which is built, to the web server.

5. Navigate to http://{server-path}/dist/index.html in your browser to access the sample.

Note: The "Sample" directory mentioned in the steps below refers to the "Sample" directory shown in the image.

1. Please ensure that Node.js is installed. The recommended version is v20.13.1.

2. Please ensure your web server supports ASP.NET(C#).

1. Download the server-side ASP.NET code, unzip it and copy the "Upload" directory to the "Sample\public" directory. Under the "Upload" folder, there is a file "SaveToFile.aspx". This is the backend page that accepts the uploaded data.

2. Modify the client-side upload function In {path}\Sample\src\components\tools\dwtService.js, modify the "URL" parameter of HTTPUpload() to match the actual path of the upload server you deployed. The "URL" parameter accepts both absolute and relative paths.

   Refer to the following code snippet:

Upload() {
  return new Promise((res, rej) => {
    if (this._dwtObject && this._dwtObject.HowManyImagesInBuffer > 0) {
      //Path to the server-side script. You can adjust it according to the actual path of the upload server you deployed.
      let strUrl = "http://{server-path}/dist/Upload/SaveToFile.aspx";
      let imgAry = [this._dwtObject.CurrentImageIndexInBuffer];
      this._dwtObject.HTTPUpload(
        strUrl, 
        imgAry, 
        Dynamsoft.DWT.EnumDWT_ImageType.IT_PNG,
        Dynamsoft.DWT.EnumDWT_UploadDataFormat.Binary, 
        "WebTWAINImage.png", 
        ()=>{
          res();
        }, (errCode, errString, responseStr) => { 
          rej({
            code: errCode,
            message: errString
          });
        });
    } else {
      rej({
        code: -1,
        message: "There is no image in buffer."
      });
    }
  }
}

3. Build the client-side project

   Open your terminal or Command Prompt and execute the following three commands to build the project:

   1). Navigate to the Sample directory:

   cd [path]/Sample
   

   2). Install the dependencies:

   npm install
   

   3). Build the project:

   npm run build
   

4. Copy the "Sample/dist" directory, which is built, to the web server.

5. Navigate to http://{server-path}/dist/index.html in your browser to access the sample.

Note: The "Sample" directory mentioned in the steps below refers to the "Sample" directory shown in the image.

1. Please ensure that Node.js is installed. The recommended version is v20.13.1.

2. Please ensure your web server supports ASP.NET(C#).

1. Download the server-side ASP.NET code, unzip it and copy the "Upload" directory to the "Sample\public" directory. Under the "Upload" folder, there is a file "SaveToFile.aspx". This is the backend page that accepts the uploaded data.

2. Modify the client-side upload function In {path}\Sample\src\components\tools\dwtService.ts, modify the "URL" parameter of HTTPUpload() to match the actual path of the upload server you deployed. The "URL" parameter accepts both absolute and relative paths.

   Refer to the following code snippet:

Upload(): Promise<any> {
  return new Promise((res, rej) => {
    if (this._dwtObject && this._dwtObject.HowManyImagesInBuffer > 0) {
      //Path to the server-side script. You can adjust it according to the actual path of the upload server you deployed.
      let strUrl = "http://{server-path}/dist/Upload/SaveToFile.aspx";
      let imgAry = [this._dwtObject.CurrentImageIndexInBuffer];
      this._dwtObject.HTTPUpload(
        strUrl, 
        imgAry, 
        Dynamsoft.DWT.EnumDWT_ImageType.IT_PNG,
        Dynamsoft.DWT.EnumDWT_UploadDataFormat.Binary, 
        "WebTWAINImage.png", 
        ()=>{
          res();
        }, (errCode, errString, responseStr) => { 
          rej({
            code: errCode,
            message: errString
          });
        });
     } else {
      rej({
        code: -1,
        message: "There is no image in buffer."
      });
    }
  }
}

3. Build the client-side project

   Open your terminal or Command Prompt and execute the following three commands to build the project:

   1). Navigate to the Sample directory:

   cd [path]/Sample
   

   2). Install the dependencies:

   npm install
   

   3). Build the project:

   npm run build
   

4. Copy the "Sample/dist" directory, which is built, to the web server.

5. Navigate to http://{server-path}/dist/index.html in your browser to access the sample.

Note: The "Sample" directory mentioned in the steps below refers to the "Sample" directory shown in the image.

1. Please ensure that Node.js is installed. The recommended version is v20.13.1.

2. Please ensure your web server supports ASP.NET(C#).

1. Download the server-side ASP.NET code, unzip it and copy the "Upload" directory to the "Sample\public" directory. Under the "Upload" folder, there is a file "SaveToFile.aspx". This is the backend page that accepts the uploaded data.

2. Modify the client-side upload function In {path}\Sample\src\components\tools\dwtService.js, modify the "URL" parameter of HTTPUpload() to match the actual path of the upload server you deployed. The "URL" parameter accepts both absolute and relative paths.

   Refer to the following code snippet:

Upload() {
  return new Promise((res, rej) => {
    if (this._dwtObject && this._dwtObject.HowManyImagesInBuffer > 0) {
      //Path to the server-side script. You can adjust it according to the actual path of the upload server you deployed.
      let strUrl = "http://{server-path}/dist/Upload/SaveToFile.aspx";
      let imgAry = [this._dwtObject.CurrentImageIndexInBuffer];
      this._dwtObject.HTTPUpload(
        strUrl, 
        imgAry, 
        Dynamsoft.DWT.EnumDWT_ImageType.IT_PNG,
        Dynamsoft.DWT.EnumDWT_UploadDataFormat.Binary, 
        "WebTWAINImage.png", 
        ()=>{
          res();
        }, (errCode, errString, responseStr) => { 
          rej({
            code: errCode,
            message: errString
          });
        });
     } else {
      rej({
        code: -1,
        message: "There is no image in buffer."
      });
    }
  }
}

3. Build the client-side project

   Open your terminal or Command Prompt and execute the following three commands to build the project:

   1). Navigate to the Sample directory:

   cd [path]/Sample
   

   2). Install the dependencies:

   npm install
   

   3). Build the project:

   npm run build
   

4. Copy the "Sample/dist" directory, which is built, to the web server.

5. Navigate to http://{server-path}/dist/index.html in your browser to access the sample.

Note: The "Sample" directory mentioned in the steps below refers to the "Sample" directory shown in the image.

1. Please ensure that Node.js is installed. The recommended version is v20.13.1.

2. Please ensure your web server supports ASP.NET(C#).

1. Download the server-side ASP.NET code, unzip it and copy the "Upload" directory to the "Sample\public" directory. Under the "Upload" folder, there is a file "SaveToFile.aspx". This is the backend page that accepts the uploaded data.

2. Modify the client-side upload function In {path}\Sample\src\components\tools\dwtService.ts, modify the "URL" parameter of HTTPUpload() to match the actual path of the upload server you deployed. The "URL" parameter accepts both absolute and relative paths.

   Refer to the following code snippet:

Upload(): Promise<any> {
  return new Promise((res, rej) => {
    if (this._dwtObject && this._dwtObject.HowManyImagesInBuffer > 0) {
      //Path to the server-side script. You can adjust it according to the actual path of the upload server you deployed.
      let strUrl = "http://{server-path}/dist/Upload/SaveToFile.aspx";
      let imgAry = [this._dwtObject.CurrentImageIndexInBuffer];
      this._dwtObject.HTTPUpload(
        strUrl, 
        imgAry, 
        Dynamsoft.DWT.EnumDWT_ImageType.IT_PNG,
        Dynamsoft.DWT.EnumDWT_UploadDataFormat.Binary, 
        "WebTWAINImage.png", 
        ()=>{
          res();
        }, (errCode, errString, responseStr) => { 
          rej({
            code: errCode,
            message: errString
          });
        });
     } else {
      rej({
        code: -1,
        message: "There is no image in buffer."
      });
    }
  }
}

3. Build the client-side project

   Open your terminal or Command Prompt and execute the following three commands to build the project:

   1). Navigate to the Sample directory:

   cd [path]/Sample
   

   2). Install the dependencies:

   npm install
   

   3). Build the project:

   npm run build
   

4. Copy the "Sample/dist" directory, which is built, to the web server.

5. Navigate to http://{server-path}/dist/index.html in your browser to access the sample.

https://demo.dynamsoft.com/web-twain/

Note: The "Sample" directory mentioned in the steps below refers to the "Sample" directory shown in the image.

1. Download the server-side JSP code, unzip it and copy the aforementioned "Upload" directory to the "Sample" directory. Under the "Upload" root folder, there is a file "SaveToFile.jsp". This is the backend page that accepts the uploaded data.

2. Modify the client-side upload function In {path}\Sample\Scripts\online_demo_operation.js, modify the "URL" parameter of HTTPUpload() to match the actual path of the upload server you deployed. The "URL" parameter accepts both absolute and relative paths.

   Refer to the following code snippet:

function Upload() {
    if (DWTObject && DWTObject.HowManyImagesInBuffer > 0) {
      //Path to the server-side script. You can adjust it according to the actual path of the upload server you deployed.
      var strUrl = "http://{server-path}/Sample/Upload/SaveToFile.jsp";
      var imgAry = [DWTObject.CurrentImageIndexInBuffer];
      DWTObject.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);
}

3. Copy the "Sample" directory to the web server. For example, if you are using Tomcat 10.1.16, copy it to "{Tomcat-installed-path}/webapps".

4. Restart the web server.

5. Navigate to http://{server-path}/Sample/index.html in your browser to access the sample.

Note: The "Sample" directory mentioned in the steps below refers to the "Sample" directory shown in the image.

1. Please ensure that Node.js is installed. The recommended version is v20.13.1.

2. Please ensure your web server that has the Java Development Kit (JDK) installed and supports Java Server Pages (JSP).

1. Download the server-side JSP code, unzip it and copy the "Upload" directory to the "Sample\src\public" directory. Under the "Upload" folder, there is a file "SaveToFile.jsp". This is the backend page that accepts the uploaded data.

2. Modify the client-side upload function In {path}\Sample\src\app\components\tools\dwtService.ts, modify the "URL" parameter of HTTPUpload() to match the actual path of the upload server you deployed. The "URL" parameter accepts both absolute and relative paths.

   Refer to the following code snippet:

Upload(): Promise<any> {
  return new Promise((res, rej) => {
    if (this._dwtObject && this._dwtObject.HowManyImagesInBuffer > 0) {
      //Path to the server-side script. You can adjust it according to the actual path of the upload server you deployed.
      let strUrl = "http://{server-path}/dist/Upload/SaveToFile.jsp";
      let imgAry = [this._dwtObject.CurrentImageIndexInBuffer];
      this._dwtObject.HTTPUpload(
        strUrl, 
        imgAry, 
        Dynamsoft.DWT.EnumDWT_ImageType.IT_PNG,
        Dynamsoft.DWT.EnumDWT_UploadDataFormat.Binary, 
        "WebTWAINImage.png", 
        ()=>{
          res();
        }, (errCode, errString, responseStr) => {
          rej({
            code: errCode,
            message: errString
          });
        });
    } else {
      rej({
         code: -1,
         message: "There is no image in buffer."
      });
    }
  }
}

3. Build the client-side project

   Open your terminal or Command Prompt and execute the following three commands to build the project:

   1). Navigate to the Sample directory:

   cd [path]/Sample
   

   2). Install the dependencies:

   npm install
   

   3). Build the project:

   npm run build
   

4. Copy the "Sample/dist" directory to the web server. For example, if you are using Tomcat 10.1.16, copy it to "{Tomcat-installed-path}/webapps".

5. Restart the web server.

6. Navigate to http://{server-path}/dist/index.html in your browser to access the sample.

Note: The "Sample" directory mentioned in the steps below refers to the "Sample" directory shown in the image.

1. Please ensure that Node.js is installed. The recommended version is v20.13.1.

2. Please ensure your web server that has the Java Development Kit (JDK) installed and supports Java Server Pages (JSP).

1. Download the server-side JSP code, unzip it and copy the "Upload" directory to the "Sample\public" directory. Under the "Upload" folder, there is a file "SaveToFile.jsp". This is the backend page that accepts the uploaded data.

2. Modify the client-side upload function In {path}\Sample\src\components\tools\dwtService.js, modify the "URL" parameter of HTTPUpload() to match the actual path of the upload server you deployed. The "URL" parameter accepts both absolute and relative paths.

   Refer to the following code snippet:

Upload() {
  return new Promise((res, rej) => {
    if (this._dwtObject && this._dwtObject.HowManyImagesInBuffer > 0) {
      //Path to the server-side script. You can adjust it according to the actual path of the upload server you deployed.
      let strUrl = "http://{server-path}/dist/Upload/SaveToFile.jsp";
      let imgAry = [this._dwtObject.CurrentImageIndexInBuffer];
      this._dwtObject.HTTPUpload(
      strUrl, 
      imgAry, 
      Dynamsoft.DWT.EnumDWT_ImageType.IT_PNG,
      Dynamsoft.DWT.EnumDWT_UploadDataFormat.Binary, 
      "WebTWAINImage.png", 
      ()=>{
        res();
      }, (errCode, errString, responseStr) => { 
        rej({
           code: errCode,
           message: errString
        });
      });
    } else {
      rej({
        code: -1,
        message: "There is no image in buffer."
      });
    }
  }
}

3. Build the client-side project

   Open your terminal or Command Prompt and execute the following three commands to build the project:

   1). Navigate to the Sample directory:

   cd [path]/Sample
   

   2). Install the dependencies:

   npm install
   

   3). Build the project:

   npm run build
   

4. Copy the "Sample/dist" directory to the web server. For example, if you are using Tomcat 10.1.16, copy it to "{Tomcat-installed-path}/webapps".

5. Restart the web server.

6. Navigate to http://{server-path}/dist/index.html in your browser to access the sample.

Note: The "Sample" directory mentioned in the steps below refers to the "Sample" directory shown in the image.

1. Please ensure that Node.js is installed. The recommended version is v20.13.1.

2. Please ensure your web server that has the Java Development Kit (JDK) installed and supports Java Server Pages (JSP).

1. Download the server-side JSP code, unzip it and copy the "Upload" directory to the "Sample\public" directory. Under the "Upload" folder, there is a file "SaveToFile.jsp". This is the backend page that accepts the uploaded data.

2. Modify the client-side upload function In {path}\Sample\src\components\tools\dwtService.ts, modify the "URL" parameter of HTTPUpload() to match the actual path of the upload server you deployed. The "URL" parameter accepts both absolute and relative paths.

   Refer to the following code snippet:

Upload(): Promise<any> {
  return new Promise((res, rej) => {
    if (this._dwtObject && this._dwtObject.HowManyImagesInBuffer > 0) {
      //Path to the server-side script. You can adjust it according to the actual path of the upload server you deployed.
      let strUrl = "http://{server-path}/dist/Upload/SaveToFile.jsp";
      let imgAry = [this._dwtObject.CurrentImageIndexInBuffer];
      this._dwtObject.HTTPUpload(
      strUrl, 
      imgAry, 
      Dynamsoft.DWT.EnumDWT_ImageType.IT_PNG,
      Dynamsoft.DWT.EnumDWT_UploadDataFormat.Binary, 
      "WebTWAINImage.png", 
      ()=>{
        res();
      }, (errCode, errString, responseStr) => { 
        rej({
           code: errCode,
           message: errString
        });
      });
    } else {
      rej({
         code: -1,
         message: "There is no image in buffer."
      });
    }
  }
}

3. Build the client-side project

   Open your terminal or Command Prompt and execute the following three commands to build the project:

   1). Navigate to the Sample directory:

   cd [path]/Sample
   

   2). Install the dependencies:

   npm install
   

   3). Build the project:

   npm run build
   

4. Copy the "Sample/dist" directory to the web server. For example, if you are using Tomcat 10.1.16, copy it to "{Tomcat-installed-path}/webapps".

5. Restart the web server.

6. Navigate to http://{server-path}/dist/index.html in your browser to access the sample.

Note: The "Sample" directory mentioned in the steps below refers to the "Sample" directory shown in the image.

1. Please ensure that Node.js is installed. The recommended version is v20.13.1.

2. Please ensure your web server that has the Java Development Kit (JDK) installed and supports Java Server Pages (JSP).

1. Download the server-side JSP code, unzip it and copy the "Upload" directory to the "Sample\public" directory. Under the "Upload" folder, there is a file "SaveToFile.jsp". This is the backend page that accepts the uploaded data.

2. Modify the client-side upload function In {path}\Sample\src\components\tools\dwtService.js, modify the "URL" parameter of HTTPUpload() to match the actual path of the upload server you deployed. The "URL" parameter accepts both absolute and relative paths.

   Refer to the following code snippet:

Upload() {
  return new Promise((res, rej) => {
    if (this._dwtObject && this._dwtObject.HowManyImagesInBuffer > 0) {
      //Path to the server-side script. You can adjust it according to the actual path of the upload server you deployed.
      let strUrl = "http://{server-path}/dist/Upload/SaveToFile.jsp";
      let imgAry = [this._dwtObject.CurrentImageIndexInBuffer];
      this._dwtObject.HTTPUpload(
      strUrl, 
      imgAry, 
      Dynamsoft.DWT.EnumDWT_ImageType.IT_PNG,
      Dynamsoft.DWT.EnumDWT_UploadDataFormat.Binary, 
      "WebTWAINImage.png", 
      ()=>{
        res();
      }, (errCode, errString, responseStr) => { 
        rej({
          code: errCode,
          message: errString
        });
      });
    } else {
      rej({
        code: -1,
        message: "There is no image in buffer."
      });
    }
  }
}

3. Build the client-side project

   Open your terminal or Command Prompt and execute the following three commands to build the project:

   1). Navigate to the Sample directory:

   cd [path]/Sample
   

   2). Install the dependencies:

   npm install
   

   3). Build the project:

   npm run build
   

4. Copy the "Sample/dist" directory to the web server. For example, if you are using Tomcat 10.1.16, copy it to "{Tomcat-installed-path}/webapps".

5. Restart the web server.

6. Navigate to http://{server-path}/dist/index.html in your browser to access the sample.

Note: The "Sample" directory mentioned in the steps below refers to the "Sample" directory shown in the image.

1. Please ensure that Node.js is installed. The recommended version is v20.13.1.

2. Please ensure your web server that has the Java Development Kit (JDK) installed and supports Java Server Pages (JSP).

1. Download the server-side JSP code, unzip it and copy the "Upload" directory to the "Sample\public" directory. Under the "Upload" folder, there is a file "SaveToFile.jsp". This is the backend page that accepts the uploaded data.

2. Modify the client-side upload function In {path}\Sample\src\components\tools\dwtService.ts, modify the "URL" parameter of HTTPUpload() to match the actual path of the upload server you deployed. The "URL" parameter accepts both absolute and relative paths.

   Refer to the following code snippet:

Upload(): Promise<any> {
  return new Promise((res, rej) => {
    if (this._dwtObject && this._dwtObject.HowManyImagesInBuffer > 0) {
      //Path to the server-side script. You can adjust it according to the actual path of the upload server you deployed.
      let strUrl = "http://{server-path}/dist/Upload/SaveToFile.jsp";
      let imgAry = [this._dwtObject.CurrentImageIndexInBuffer];
      this._dwtObject.HTTPUpload(
      strUrl, 
      imgAry, 
      Dynamsoft.DWT.EnumDWT_ImageType.IT_PNG,
      Dynamsoft.DWT.EnumDWT_UploadDataFormat.Binary, 
      "WebTWAINImage.png", 
      ()=>{
        res();
      }, (errCode, errString, responseStr) => { 
        rej({
          code: errCode,
          message: errString
        });
      });
    } else {
      rej({
        code: -1,
        message: "There is no image in buffer."
      });
    }
  }
}

3. Build the client-side project

   Open your terminal or Command Prompt and execute the following three commands to build the project:

   1). Navigate to the Sample directory:

   cd [path]/Sample
   

   2). Install the dependencies:

   npm install
   

   3). Build the project:

   npm run build
   

4. Copy the "Sample/dist" directory to the web server. For example, if you are using Tomcat 10.1.16, copy it to "{Tomcat-installed-path}/webapps".

5. Restart the web server.

6. Navigate to http://{server-path}/dist/index.html in your browser to access the sample.

https://demo.dynamsoft.com/web-twain/

Note: The "Sample" directory mentioned in the steps below refers to the "Sample" directory shown in the image.

1. Download the server-side Node.js code, unzip it. Under the "Upload" folder, there is a file "server.js". This is the backend page that accepts the uploaded data.

2. Run the server-side project

   Open your terminal or Command Prompt and execute the following three commands to start the project:

   1). Navigate to the server-side Sample directory:

   cd [path]/Upload
   

   2). Install the dependencies:

   npm install
   

   3). Run the application:

   npm start
   

3. Modify the client-side upload function In {path}\Sample\Scripts\online_demo_operation.js, modify the "URL" parameter of HTTPUpload() to match the actual path of the upload server you deployed. The "URL" parameter accepts both absolute and relative paths.

   Refer to the following code snippet:

function Upload() {
  if (DWTObject && DWTObject.HowManyImagesInBuffer > 0) {
    //Path to the server-side script. You can adjust it according to the actual path of the upload server you deployed.
    var strUrl = "http://localhost:2020/Upload";
    var imgAry = [DWTObject.CurrentImageIndexInBuffer];
    DWTObject.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);
}

4. Copy the "Sample" directory to the web server.

5. Navigate to http://{server-path}/Sample/index.html in your browser to access the sample.

Note: The "Sample" directory mentioned in the steps below refers to the "Sample" directory shown in the image.

1. Download the server-side Node.js code, unzip it. Under the "Upload" folder, there is a file "server.js". This is the backend page that accepts the uploaded data.

2. Run the server-side project

   Open your terminal or Command Prompt and execute the following three commands to start the project:

   1). Navigate to the server-side Sample directory:

   cd [path]/Upload
   

   2). Install the dependencies:

   npm install
   

   3). Run the application:

   npm start
   

3. Modify the client-side upload function In {path}\Sample\src\app\components\tools\dwtService.ts, modify the "URL" parameter of HTTPUpload() to match the actual path of the upload server you deployed. The "URL" parameter accepts both absolute and relative paths.

   Refer to the following code snippet:

Upload(): Promise<any> {
  return new Promise((res, rej) => {
    if (this._dwtObject && this._dwtObject.HowManyImagesInBuffer > 0) {
      //Path to the server-side script. You can adjust it according to the actual path of the upload server you deployed.
      let strUrl = "http://localhost:2020/Upload";
      let imgAry = [this._dwtObject.CurrentImageIndexInBuffer];
      this._dwtObject.HTTPUpload(
        strUrl, 
        imgAry, 
        Dynamsoft.DWT.EnumDWT_ImageType.IT_PNG,
        Dynamsoft.DWT.EnumDWT_UploadDataFormat.Binary, 
        "WebTWAINImage.png", 
        ()=>{
          res();
        }, (errCode, errString, responseStr) => { 
          rej({
            code: errCode,
            message: errString
          });
        });
     } else {
      rej({
        code: -1,
        message: "There is no image in buffer."
      });
    }
  }
}

4. Run the client-side project

   Open your terminal or Command Prompt and execute the following three commands to start the project:

   1). Navigate to the Sample directory:

   cd [path]/Sample
   

   2). Install the dependencies:

   npm install
   

   3). Run the application:

   npm start
   

5. Navigate to http://localhost:4200 in your browser to launch the sample.

Note: The "Sample" directory mentioned in the steps below refers to the "Sample" directory shown in the image.

1. Download the server-side Node.js code, unzip it. Under the "Upload" folder, there is a file "server.js". This is the backend page that accepts the uploaded data.

2. Run the server-side project

   Open your terminal or Command Prompt and execute the following three commands to start the project:

   1). Navigate to the server-side Sample directory:

   cd [path]/Upload
   

   2). Install the dependencies:

   npm install
   

   3). Run the application:

   npm start
   

3. Modify the client-side upload function In {path}\Sample\src\components\tools\dwtService.js, modify the "URL" parameter of HTTPUpload() to match the actual path of the upload server you deployed. The "URL" parameter accepts both absolute and relative paths.

   Refer to the following code snippet:

Upload() {
  return new Promise((res, rej) => {
    if (this._dwtObject && this._dwtObject.HowManyImagesInBuffer > 0) {
      //Path to the server-side script. You can adjust it according to the actual path of the upload server you deployed.
      let strUrl = "http://localhost:2020/Upload";
      let imgAry = [this._dwtObject.CurrentImageIndexInBuffer];
      this._dwtObject.HTTPUpload(
        strUrl, 
        imgAry, 
        Dynamsoft.DWT.EnumDWT_ImageType.IT_PNG,
        Dynamsoft.DWT.EnumDWT_UploadDataFormat.Binary, 
        "WebTWAINImage.png", 
        ()=>{
          res();
        }, (errCode, errString, responseStr) => { 
          rej({
            code: errCode,
            message: errString
          });
        });
     } else {
      rej({
        code: -1,
        message: "There is no image in buffer."
      });
    }
  }
}

4. Run the client-side project

   Open your terminal or Command Prompt and execute the following three commands to start the project:

   1). Navigate to the Sample directory:

   cd [path]/Sample
   

   2). Install the dependencies:

   npm install
   

   3). Run the application:

   npm start
   

5. Navigate to http://localhost:4200 in your browser to launch the sample.

Note: The "Sample" directory mentioned in the steps below refers to the "Sample" directory shown in the image.

1. Download the server-side Node.js code, unzip it. Under the "Upload" folder, there is a file "server.js". This is the backend page that accepts the uploaded data.

2. Run the server-side project

   Open your terminal or Command Prompt and execute the following three commands to start the project:

   1). Navigate to the server-side Sample directory:

   cd [path]/Upload
   

   2). Install the dependencies:

   npm install
   

   3). Run the application:

   npm start
   

3. Modify the client-side upload function In {path}\Sample\src\components\tools\dwtService.ts, modify the "URL" parameter of HTTPUpload() to match the actual path of the upload server you deployed. The "URL" parameter accepts both absolute and relative paths.

   Refer to the following code snippet:

Upload(): Promise<any> {
  return new Promise((res, rej) => {
    if (this._dwtObject && this._dwtObject.HowManyImagesInBuffer > 0) {
      //Path to the server-side script. You can adjust it according to the actual path of the upload server you deployed.
      let strUrl = "http://localhost:2020/Upload";
      let imgAry = [this._dwtObject.CurrentImageIndexInBuffer];
      this._dwtObject.HTTPUpload(
        strUrl, 
        imgAry, 
        Dynamsoft.DWT.EnumDWT_ImageType.IT_PNG,
        Dynamsoft.DWT.EnumDWT_UploadDataFormat.Binary, 
        "WebTWAINImage.png", 
        ()=>{
          res();
        }, (errCode, errString, responseStr) => { 
          rej({
            code: errCode,
            message: errString
          });
        });
     } else {
      rej({
        code: -1,
        message: "There is no image in buffer."
      });
    }
  }
}

4. Run the client-side project

   Open your terminal or Command Prompt and execute the following three commands to start the project:

   1). Navigate to the Sample directory:

   cd [path]/Sample
   

   2). Install the dependencies:

   npm install
   

   3). Run the application:

   npm start
   

5. Navigate to http://localhost:4200 in your browser to launch the sample.

Note: The "Sample" directory mentioned in the steps below refers to the "Sample" directory shown in the image.

1. Download the server-side Node.js code, unzip it. Under the "Upload" folder, there is a file "server.js". This is the backend page that accepts the uploaded data.

2. Run the server-side project

   Open your terminal or Command Prompt and execute the following three commands to start the project:

   1). Navigate to the server-side Sample directory:

   cd [path]/Upload
   

   2). Install the dependencies:

   npm install
   

   3). Run the application:

   npm start
   

3. Modify the client-side upload function In {path}\Sample\src\components\tools\dwtService.js, modify the "URL" parameter of HTTPUpload() to match the actual path of the upload server you deployed. The "URL" parameter accepts both absolute and relative paths.

   Refer to the following code snippet:

Upload() {
  return new Promise((res, rej) => {
    if (this._dwtObject && this._dwtObject.HowManyImagesInBuffer > 0) {
      //Path to the server-side script. You can adjust it according to the actual path of the upload server you deployed.
      let strUrl = "http://localhost:2020/Upload";
      let imgAry = [this._dwtObject.CurrentImageIndexInBuffer];
      this._dwtObject.HTTPUpload(
        strUrl, 
        imgAry, 
        Dynamsoft.DWT.EnumDWT_ImageType.IT_PNG,
        Dynamsoft.DWT.EnumDWT_UploadDataFormat.Binary, 
        "WebTWAINImage.png", 
        ()=>{
          res();
        }, (errCode, errString, responseStr) => { 
          rej({
            code: errCode,
            message: errString
          });
        });
     } else {
      rej({
        code: -1,
        message: "There is no image in buffer."
      });
    }
  }
}

4. Run the client-side project

   Open your terminal or Command Prompt and execute the following three commands to start the project:

   1). Navigate to the Sample directory:

   cd [path]/Sample
   

   2). Install the dependencies:

   npm install
   

   3). Run the application:

   npm start
   

5. Navigate to http://localhost:4200 in your browser to launch the sample.

Note: The "Sample" directory mentioned in the steps below refers to the "Sample" directory shown in the image.

1. Download the server-side Node.js code, unzip it. Under the "Upload" folder, there is a file "server.js". This is the backend page that accepts the uploaded data.

2. Run the server-side project

   Open your terminal or Command Prompt and execute the following three commands to start the project:

   1). Navigate to the server-side Sample directory:

   cd [path]/Upload
   

   2). Install the dependencies:

   npm install
   

   3). Run the application:

   npm start
   

3. Modify the client-side upload function In {path}\Sample\src\components\tools\dwtService.ts, modify the "URL" parameter of HTTPUpload() to match the actual path of the upload server you deployed. The "URL" parameter accepts both absolute and relative paths.

   Refer to the following code snippet:

Upload(): Promise<any> {
  return new Promise((res, rej) => {
    if (this._dwtObject && this._dwtObject.HowManyImagesInBuffer > 0) {
      //Path to the server-side script. You can adjust it according to the actual path of the upload server you deployed.
      let strUrl = "http://localhost:2020/Upload";
      let imgAry = [this._dwtObject.CurrentImageIndexInBuffer];
      this._dwtObject.HTTPUpload(
        strUrl, 
        imgAry, 
        Dynamsoft.DWT.EnumDWT_ImageType.IT_PNG,
        Dynamsoft.DWT.EnumDWT_UploadDataFormat.Binary, 
        "WebTWAINImage.png", 
        ()=>{
          res();
        }, (errCode, errString, responseStr) => { 
          rej({
            code: errCode,
            message: errString
          });
        });
     } else {
      rej({
        code: -1,
        message: "There is no image in buffer."
      });
    }
  }
}

4. Run the client-side project

   Open your terminal or Command Prompt and execute the following three commands to start the project:

   1). Navigate to the Sample directory:

   cd [path]/Sample
   

   2). Install the dependencies:

   npm install
   

   3). Run the application:

   npm start
   

5. Navigate to http://localhost:4200 in your browser to launch the sample.

https://demo.dynamsoft.com/web-twain/

Note: The "Sample" directory mentioned in the steps below refers to the "Sample" directory shown in the image.

1. Download the server-side PHP code, unzip it and copy the aforementioned "Upload" directory to the "Sample" directory. Under the "Upload" root folder, there is a file "SaveToFile.php". This is the backend page that accepts the uploaded data.

2. Modify the client-side upload function In {path}\Sample\Scripts\online_demo_operation.js, modify the "URL" parameter of HTTPUpload() to match the actual path of the upload server you deployed. The "URL" parameter accepts both absolute and relative paths.

   Refer to the following code snippet:

function Upload() {
  if (DWTObject && DWTObject.HowManyImagesInBuffer > 0) {
    //Path to the server-side script. You can adjust it according to the actual path of the upload server you deployed.
    var strUrl = "http://{server-path}/Sample/Upload/SaveToFile.php";
    var imgAry = [DWTObject.CurrentImageIndexInBuffer];
    DWTObject.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);
}

3. Copy the "Sample" directory to the web server.

4. Navigate to http://{server-path}/Sample/index.html in your browser to access the sample.

Note: The "Sample" directory mentioned in the steps below refers to the "Sample" directory shown in the image.

1. Please ensure that Node.js is installed. The recommended version is v20.13.1.

2. Please ensure your web server supports PHP.

1. Download the server-side PHP code, unzip it and copy the "Upload" directory to the "Sample\src\public" directory. Under the "Upload" folder, there is a file "SaveToFile.php". This is the backend page that accepts the uploaded data.

2. Modify the client-side upload function In {path}\Sample\src\app\components\tools\dwtService.ts, modify the "URL" parameter of HTTPUpload() to match the actual path of the upload server you deployed. The "URL" parameter accepts both absolute and relative paths.

   Refer to the following code snippet:

Upload(): Promise<any> {
  return new Promise((res, rej) => {
    if (this._dwtObject && this._dwtObject.HowManyImagesInBuffer > 0) {
      //Path to the server-side script. You can adjust it according to the actual path of the upload server you deployed.
      let strUrl = "http://{server-path}/dist/Upload/SaveToFile.php";
      let imgAry = [this._dwtObject.CurrentImageIndexInBuffer];
      this._dwtObject.HTTPUpload(
        strUrl, 
        imgAry, 
        Dynamsoft.DWT.EnumDWT_ImageType.IT_PNG,
        Dynamsoft.DWT.EnumDWT_UploadDataFormat.Binary, 
        "WebTWAINImage.png", 
        ()=>{
          res();
        }, (errCode, errString, responseStr) => { 
          rej({
            code: errCode,
            message: errString
          });
        });
     } else {
      rej({
        code: -1,
        message: "There is no image in buffer."
      });
    }
  }
}

3. Build the client-side project

   Open your terminal or Command Prompt and execute the following three commands to build the project:

   1). Navigate to the Sample directory:

   cd [path]/Sample
   

   2). Install the dependencies:

   npm install
   

   3). Build the project:

   npm run build
   

4. Copy the "Sample/dist" directory to the web server.

5. Navigate to http://{server-path}/dist/index.html in your browser to access the sample.

Note: The "Sample" directory mentioned in the steps below refers to the "Sample" directory shown in the image.

1. Please ensure that Node.js is installed. The recommended version is v20.13.1.

2. Please ensure your web server supports PHP.

1. Download the server-side PHP code, unzip it and copy the "Upload" directory to the "Sample\public" directory. Under the "Upload" folder, there is a file "SaveToFile.php". This is the backend page that accepts the uploaded data.

2. Modify the client-side upload function In {path}\Sample\src\components\tools\dwtService.js, modify the "URL" parameter of HTTPUpload() to match the actual path of the upload server you deployed. The "URL" parameter accepts both absolute and relative paths.

   Refer to the following code snippet:

Upload() {
  return new Promise((res, rej) => {
    if (this._dwtObject && this._dwtObject.HowManyImagesInBuffer > 0) {
      //Path to the server-side script. You can adjust it according to the actual path of the upload server you deployed.
      let strUrl = "http://{server-path}/dist/Upload/SaveToFile.php";
      let imgAry = [this._dwtObject.CurrentImageIndexInBuffer];
      this._dwtObject.HTTPUpload(
        strUrl, 
        imgAry, 
        Dynamsoft.DWT.EnumDWT_ImageType.IT_PNG,
        Dynamsoft.DWT.EnumDWT_UploadDataFormat.Binary, 
        "WebTWAINImage.png", 
        ()=>{
          res();
        }, (errCode, errString, responseStr) => { 
          rej({
             code: errCode,
             message: errString
          });
        });
     } else {
      rej({
         code: -1,
         message: "There is no image in buffer."
      });
    }
  }
}

3. Build the client-side project

   Open your terminal or Command Prompt and execute the following three commands to build the project:

   1). Navigate to the Sample directory:

   cd [path]/Sample
   

   2). Install the dependencies:

   npm install
   

   3). Build the project:

   npm run build
   

4. Copy the "Sample/dist" directory to the web server.

5. Navigate to http://{server-path}/dist/index.html in your browser to access the sample.

Note: The "Sample" directory mentioned in the steps below refers to the "Sample" directory shown in the image.

1. Please ensure that Node.js is installed. The recommended version is v20.13.1.

2. Please ensure your web server supports PHP.

1. Download the server-side PHP code, unzip it and copy the "Upload" directory to the "Sample\public" directory. Under the "Upload" folder, there is a file "SaveToFile.php". This is the backend page that accepts the uploaded data.

2. Modify the client-side upload function In {path}\Sample\src\components\tools\dwtService.ts, modify the "URL" parameter of HTTPUpload() to match the actual path of the upload server you deployed. The "URL" parameter accepts both absolute and relative paths.

   Refer to the following code snippet:

Upload(): Promise<any> {
  return new Promise((res, rej) => {
    if (this._dwtObject && this._dwtObject.HowManyImagesInBuffer > 0) {
      //Path to the server-side script. You can adjust it according to the actual path of the upload server you deployed.
      let strUrl = "http://{server-path}/dist/Upload/SaveToFile.php";
      let imgAry = [this._dwtObject.CurrentImageIndexInBuffer];
      this._dwtObject.HTTPUpload(
        strUrl, 
        imgAry, 
        Dynamsoft.DWT.EnumDWT_ImageType.IT_PNG,
        Dynamsoft.DWT.EnumDWT_UploadDataFormat.Binary, 
        "WebTWAINImage.png", 
        ()=>{
          res();
        }, (errCode, errString, responseStr) => { 
          rej({
            code: errCode,
            message: errString
          });
        });
     } else {
      rej({
        code: -1,
        message: "There is no image in buffer."
      });
    }
  }
}

3. Build the client-side project

   Open your terminal or Command Prompt and execute the following three commands to build the project:

   1). Navigate to the Sample directory:

   cd [path]/Sample
   

   2). Install the dependencies:

   npm install
   

   3). Build the project:

   npm run build
   

4. Copy the "Sample/dist" directory to the web server.

5. Navigate to http://{server-path}/dist/index.html in your browser to access the sample.

Note: The "Sample" directory mentioned in the steps below refers to the "Sample" directory shown in the image.

1. Please ensure that Node.js is installed. The recommended version is v20.13.1.

2. Please ensure your web server supports PHP.

1. Download the server-side PHP code, unzip it and copy the "Upload" directory to the "Sample\public" directory. Under the "Upload" folder, there is a file "SaveToFile.php". This is the backend page that accepts the uploaded data.

2. Modify the client-side upload function In {path}\Sample\src\components\tools\dwtService.js, modify the "URL" parameter of HTTPUpload() to match the actual path of the upload server you deployed. The "URL" parameter accepts both absolute and relative paths.

   Refer to the following code snippet:

Upload() {
  return new Promise((res, rej) => {
    if (this._dwtObject && this._dwtObject.HowManyImagesInBuffer > 0) {
      //Path to the server-side script. You can adjust it according to the actual path of the upload server you deployed.
      let strUrl = "http://{server-path}/dist/Upload/SaveToFile.php";
      let imgAry = [this._dwtObject.CurrentImageIndexInBuffer];
      this._dwtObject.HTTPUpload(
        strUrl, 
        imgAry, 
        Dynamsoft.DWT.EnumDWT_ImageType.IT_PNG,
        Dynamsoft.DWT.EnumDWT_UploadDataFormat.Binary, 
        "WebTWAINImage.png", 
        ()=>{
          res();
        }, (errCode, errString, responseStr) => { 
          rej({
            code: errCode,
            message: errString
          });
        });
     } else {
      rej({
        code: -1,
        message: "There is no image in buffer."
      });
    }
  }
}

3. Build the client-side project

   Open your terminal or Command Prompt and execute the following three commands to build the project:

   1). Navigate to the Sample directory:

   cd [path]/Sample
   

   2). Install the dependencies:

   npm install
   

   3). Build the project:

   npm run build
   

4. Copy the "Sample/dist" directory to the web server.

5. Navigate to http://{server-path}/dist/index.html in your browser to access the sample.

Note: The "Sample" directory mentioned in the steps below refers to the "Sample" directory shown in the image.

1. Please ensure that Node.js is installed. The recommended version is v20.13.1.

2. Please ensure your web server supports PHP.

1. Download the server-side PHP code, unzip it and copy the "Upload" directory to the "Sample\public" directory. Under the "Upload" folder, there is a file "SaveToFile.php". This is the backend page that accepts the uploaded data.

2. Modify the client-side upload function In {path}\Sample\src\components\tools\dwtService.ts, modify the "URL" parameter of HTTPUpload() to match the actual path of the upload server you deployed. The "URL" parameter accepts both absolute and relative paths.

   Refer to the following code snippet:

Upload(): Promise<any> {
  return new Promise((res, rej) => {
    if (this._dwtObject && this._dwtObject.HowManyImagesInBuffer > 0) {
      //Path to the server-side script. You can adjust it according to the actual path of the upload server you deployed.
      let strUrl = "http://{server-path}/dist/Upload/SaveToFile.php";
      let imgAry = [this._dwtObject.CurrentImageIndexInBuffer];
      this._dwtObject.HTTPUpload(
        strUrl, 
        imgAry, 
        Dynamsoft.DWT.EnumDWT_ImageType.IT_PNG,
        Dynamsoft.DWT.EnumDWT_UploadDataFormat.Binary, 
        "WebTWAINImage.png", 
        ()=>{
          res();
        }, (errCode, errString, responseStr) => { 
          rej({
            code: errCode,
            message: errString
          });
        });
     } else {
      rej({
        code: -1,
        message: "There is no image in buffer."
      });
    }
  }
}

3. Build the client-side project

   Open your terminal or Command Prompt and execute the following three commands to build the project:

   1). Navigate to the Sample directory:

   cd [path]/Sample
   

   2). Install the dependencies:

   npm install
   

   3). Build the project:

   npm run build
   

4. Copy the "Sample/dist" directory to the web server.

5. Navigate to http://{server-path}/dist/index.html in your browser to access the sample.

https://demo.dynamsoft.com/web-twain/