Using cloudinary(attachinary) with rails plus jQuery file upload - ruby-on-rails

Question

I am trying to upload my images on cloudinary using the jquery file upload gem.
I followed this tutorial on doing this using attachinary, but I think either I am missing something or the tutorial is incomplete because after following it, I did get a form with a button to upload multiple images on cloudinary but the jquery file upload UI with progress bars are not getting displayed, I just have a simple button with the choose file as label.
Please help me to understand where have I gone wrong and how to get that ui of jQuery file upload gem with the progress bars.
The tutorial that I followed is
https://github.com/assembler/attachinary
Here are my files
/*routes.rb*/
Rails.application.routes.draw do
root 'prime_petz#home'
get 'prime_petz/home'
get 'prime_petz/about'
get 'prime_petz/contact'
resources :listings
mount Attachinary::Engine => "/attachinary"
end
/Listing.rb/
class Listing < ActiveRecord::Base
has_attachments :photos, maximum: 10
end
/Application.js/
//= require jquery
//= require jquery_ujs
//= require turbolinks
// Loads all Semantic javascripts
//= require semantic-ui
//= require jquery-fileupload
//= require jquery-fileupload/vendor/tmpl
//= require cloudinary/jquery.cloudinary
//= require attachinary
//= require_tree
/new.html.erb/
<%=form_for #listing, :html=> { class:'ui form centered black segment' } do |f|%>
<div class="field">
<%= f.attachinary_file_field :photos,class:'ui button gallery' %>
</div>
<%end%>
/gemfile/
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.1.1'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 4.0.3'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .js.coffee assets and views
gem 'coffee-rails', '~> 4.0.0'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use jquery as the JavaScript library
gem 'cloudinary'
gem 'jquery-ui-rails'
gem 'attachinary'
gem 'jquery-rails'
gem "jquery-fileupload-rails"
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc
gem 'semantic-ui-sass', github: 'doabit/semantic-ui-sass', branch: 'v1.0beta'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use unicorn as the app server
# gem 'unicorn'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
# Use debugger
# gem 'debugger', group: [:development, :test]
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin]
/listing.js.coffee/
jQuery ->
$('#new_listing').fileupload
dataType:"script"
add: (e, data) ->
data.context = $(tmpl("template-upload", data.files[0]))
$('#new_listing').append(data.context)
progress: (e, data) ->
if data.context
progress = parseInt(data.loaded / data.total * 100, 10)
data.context.find('.bar').css('width', progress + '%')
With this what I am able to view is just a plain ChooseFiles button.

Answer 1

Have you made sure that you included the following jQuery code in the form view?
$('.attachinary-input').attachinary();

Answer 2

According to the attachinary readme,
Attachinary jquery plugin is based upon jQuery File Upload plugin but without any fancy UI (it leaves it up to you to decorate it).