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.
Prerequisites
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.
For detailed information, please refer to GitHub.
Basic Steps of Creating Rails Project on Windows
-
Install Rails with the command line:
gem install rails
-
Create an application:
rails new dwt
- Change directory to dwt.
-
Start the server:
rails server
- 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:
<html>
<head>
<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>
<style>
h1 {
font-size: 2em;
font-weight: bold;
color: #777777;
text-align: center
}
table {
margin: auto;
}
</style>
</head>
<body>
<h1>
DWT with Ruby
</h1>
<table>
<tr>
<td>
<!-- 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>
</td>
</tr>
<tr>
<td>
<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()">
</td>
</tr>
</table>
<!--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. 192.168.8.84
var OnSuccess = function(httpResponse) {
alert("Succesfully uploaded");
};
var OnFailure = function(errorCode, errorString, httpResponse) {
alert(httpResponse);
};
var date = new Date();
DWObject.HTTPUploadThroughPostEx(
strHostIP,
DWObject.CurrentImageIndexInBuffer,
strActionPage,
date.getTime() + ".jpg",
1, // JPEG
OnSuccess, OnFailure
);
}
</script>
</body>
</html>
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
end
Open < Rails Project >\config\routes.rb and add mappings:
Rails.application.routes.draw do
get 'twainscanning/home'
root 'twainscanning#home'
post 'upload/' => 'twainscanning#upload'
end
Open < Rails Project >\app\controller\twainscanning_controller.rb and add following code for uploading images:
class TwainscanningController < ApplicationController
def home
end
def upload
uploaded_io = params[:RemoteFile]
upload_dir = Rails.root.join('public', 'upload')
unless Dir.exist?(upload_dir)
Dir.mkdir(upload_dir)
end
File.open(Rails.root.join('public', 'upload', uploaded_io.original_filename), 'wb') do |file|
file.write(uploaded_io.read)
end
respond_to do |format|
format.html.any { render text: "Successfully uploaded!"}
end
end
end