将 cloudinary(attachinary) 与 rails 和 jQuery 文件上传一起使用

Question

我正在尝试使用 jquery 文件上传 gem 将我的图片上传到 cloudinary。

我按照本教程使用附件执行此操作，但我认为要么我遗漏了一些东西，要么本教程不完整，因为在按照它之后，我确实得到了一个带有按钮的表单，可以在 cloudinary 上上传多个图像，但是 jquery 文件上传没有显示带有进度条的 UI，我只有一个带有选择文件作为标签的简单按钮。

请帮助我了解我哪里出了问题以及如何使用进度条获取 jQuery 文件上传 gem 的 ui。

我遵循的教程是 https://github.com/assembler/attachinary

这是我的文件

/*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 + '%')

有了这个，我能看到的只是一个普通的 ChooseFiles 按钮。

Answer 1

您是否确定在表单视图中包含以下 jQuery 代码？

$('.attachinary-input').attachinary();

Answer 2

根据附件自述文件，

附加的 jquery 插件基于 jQuery File Upload 插件，但没有任何花哨的 UI（它留给你装饰它）。