How to Load, Scan and Upload Files with Ruby on Rails

Have you ever thought about how to create a Web document scanning project with Ruby on Rails? In this tutorial, I’m going to guide you through how to create a Rails project with Dynamic Web TWAIN (DWT) SDK for loading, scanning and uploading document files step by step.


Why not Ruby 2.2? You will see the following error when running the server because nokogiri does not support Ruby 2.2 on Windows.

nokogiri error in Ruby

For detailed information, please refer to GitHub.

Basic Steps of Creating Rails Project on Windows

  1. Install Rails with the command line:
    gem install rails
  2. Create an application:
    rails new dwt
  3. Change directory to dwt.
  4. Start the server:
    rails server
  5. Visit the default page on http://localhost:3000

Integrating DWT with Ruby on Rails

Create a controller:

rails generate controller twainscanning home

Copy Resources folder from < Dynamic Web TWAIN directory >\Resources to < Rails Project >\public\Resources.

Open < Rails Project >\app\views\twainscanning\home.html.erb and add following code:


  <title>DWT with Ruby</title>
  <script type="text/javascript" src="Resources/dynamsoft.webtwain.initiate.js"></script>
  <script type="text/javascript" src="Resources/dynamsoft.webtwain.config.js"></script>
    h1 {
      font-size: 2em;
      font-weight: bold;
      color: #777777;
      text-align: center
    table {
      margin: auto;

            DWT with Ruby
        <!-- dwtcontrolContainer is the default div id for Dynamic Web TWAIN control.
                   If you need to rename the id, you should also change the id in dynamsoft.webtwain.config.js accordingly. -->
        <div id="dwtcontrolContainer"></div>

        <input type="button" value="Load Image" onclick="btnLoad_onclick();" />
        <input type="button" value="Scan Image" onclick="AcquireImage();" />
        <input id="btnUpload" type="button" value="Upload Image" onclick="btnUpload_onclick()">

  <!--Custom script goes here-->
  <script type="text/javascript">
    Dynamsoft.WebTwainEnv.RegisterEvent('OnWebTwainReady', Dynamsoft_OnReady);
    var DWObject;

    function Dynamsoft_OnReady() {
      DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer'); // Get the Dynamic Web TWAIN object that is embeded in the div with id 'dwtcontrolContainer'
      DWObject.Width = 480; // Set the width of the Dynamic Web TWAIN Object
      DWObject.Height = 640; // Set the height of the Dynamic Web TWAIN Object

    function btnLoad_onclick() {
      var OnSuccess = function() {};

      var OnFailure = function(errorCode, errorString) {};

      DWObject.IfShowFileDialog = true;
      DWObject.LoadImageEx("", EnumDWT_ImageType.IT_ALL, OnSuccess, OnFailure);

    function AcquireImage() {
      if (DWObject) {
        DWObject.IfShowUI = false;
        DWObject.IfDisableSourceAfterAcquire = true; // Scanner source will be disabled/closed automatically after the scan.
        DWObject.SelectSource(); // Select a Data Source (a device like scanner) from the Data Source Manager.
        DWObject.OpenSource(); // Open the source. You can set resolution, pixel type, etc. after this method. Please refer to the sample 'Scan' -> 'Custom Scan' for more info.
        DWObject.AcquireImage(); // Acquire image(s) from the Data Source. Please NOTE this is a asynchronous method. In other words, it doesn't wait for the Data Source to come back.

    function btnUpload_onclick() {
      DWObject.HTTPPort = 3000;
      var CurrentPathName = unescape(location.pathname); // get current PathName in plain ASCII
      var CurrentPath = CurrentPathName.substring(0, CurrentPathName.lastIndexOf("/") + 1);
      var strActionPage = CurrentPath + "upload/";
      var strHostIP = "localhost"; // server IP e.g.

      var OnSuccess = function(httpResponse) {
        alert("Succesfully uploaded");

      var OnFailure = function(errorCode, errorString, httpResponse) {

      var date = new Date();
        date.getTime() + ".jpg",
        1, // JPEG
        OnSuccess, OnFailure




Open < Rails Project >\app\controller\application_controler.rb and comment out the following line:

class ApplicationController < ActionController::Base
  # Prevent CSRF attacks by raising an exception.
  # For APIs, you may want to use :null_session instead.
  #protect_from_forgery with: :exception

Open < Rails Project >\config\routes.rb and add mappings:

Rails.application.routes.draw do
  get 'twainscanning/home'
  root 'twainscanning#home'
  post 'upload/' => 'twainscanning#upload'

Open < Rails Project >\app\controller\twainscanning_controller.rb and add following code for uploading images:

class TwainscanningController < ApplicationController
  def home

  def upload
    uploaded_io = params[:RemoteFile]

    upload_dir = Rails.root.join('public', 'upload')
    unless Dir.exist?(upload_dir)
    end'public', 'upload', uploaded_io.original_filename), 'wb') do |file|

    respond_to do |format|
      format.html.any { render text: "Successfully uploaded!"}


Run server again:
Dynamic Web TWAIN with Ruby on Rails

Source Code