0

я пытаюсь как сумасшедший, чтобы получить эту функцию JQuery-FileUpload работать с carrierwave:Jquery-FileUpload рельсы не работает с несколькими частями формы

http://railscasts.com/episodes/381-jquery-file-upload?autoplay=true

и его вызывает у меня все виды проблем , У меня есть 3 модели - для проектов, версий и слоев. В рамках проекта я пытаюсь создать как версию, так и несколько связанных слоев в одной и той же форме (из файла new.html.erb в представлениях/версиях). Я следую Ryan Bates Railscast # 381 и просто не могу заставить файлы загружаться автоматически, когда их выбирают прямо в новом представлении. (на странице новой версии, если я выбираю несколько файлов слоев, затем нажмите кнопку «создать версию», связанные файлы слоев загрузятся успешно. Но в учебнике они загружаются сразу после выбора через jquery, не нажимая кнопку «создать», Основная разница между тем, что он делает &, что я пытаюсь сделать, это загрузить все файлы с индексной страницы «картин» ... где я пытаюсь отображать загруженные файлы непосредственно на «new.html». erb '... &, тогда, когда пользователь нажимает кнопку «создать версию», форма будет одновременно создавать как новую версию, так и новые связанные слои.

Надеюсь, это имеет смысл ... мой код заключается в следующем, но, пожалуйста, дайте мне знать, если я буду давать дополнительные объяснения. (Я много обсуждал, но мои примеры кажутся немного более сложными, чем большинство примеров «одной модели» jquery-fileupload, с которыми я столкнулся).

Gemfile

source 'https://rubygems.org' 

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails' 
gem 'rails', '4.0.4' 
gem 'pg' 
gem 'bootstrap-sass', '3.1.1.0' 
gem 'sprockets', '2.11.0' 
# Use ActiveModel has_secure_password 
gem 'bcrypt', '~> 3.1.7' 
gem 'faker' 
gem 'bootstrap_form' 
gem 'will_paginate' 
gem 'bootstrap-will_paginate' 
gem "pundit" 
gem 'rails3-jquery-autocomplete', :git=>'[email protected]:yangbodotnet/rails3-jquery-autocomplete.git' 
gem 'jquery-fileupload-rails' 
gem 'remotipart', '~> 1.2' 

gem 'rmagick', :require => 'RMagick' 
gem 'carrierwave' 

# Use SCSS for stylesheets 
gem 'sass-rails', '~> 4.0.2' 

# 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 & jquery UI 
gem 'jquery-rails' 
gem 'jquery-ui-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', '~> 1.2' 

routes.rb

ProductionApp::Application.routes.draw do 

    resources :users 
    resources :sessions, only: [:new, :create, :destroy] 

    resources :projects do 
    resources :versions 
    match '/settings'=>'projects#settings', :via=>:get, :as=>:settings 
    match '/collaboration'=>'projects#collaboration', :via=>:get, :as=>:collaboration 
    end 

    resources :versions do 
    resources :users 
    end 

end 

new.html.erb (НОВАЯ ВЕРСИЯ СТР & FORM. Это создает новые версии & связанные слои, которые загружены в виде вложений ... Однако файлы должны загружаться и отображаться, как только они будут выбраны ... то есть, прежде чем пользователь нажмет кнопку «создать». Или, если они на самом деле не загружаются сразу, мне просто нужно, чтобы они выступали как что-то вроде предварительного просмотра загружает до фактического клика король создать ...

<% provide(:title, 'New Version') %> 

<div class="row-fluid"> 
    <div class="col-md-5 no-pad"> 
    <h1>Create a new version</h1> 
    <%= bootstrap_form_for @version, :html => {:multipart => true}, :url => project_versions_path, :remote => true do |f| %> 

     <%= render 'shared/error_messages', object: f.object %> 

    <%= f.text_field :title %> 

    <%= f.hidden_field :user_id %> 

    <div class="well"> 
     <h4>Drag your file uploads here:</h4> 
     <%= image_tag("icon-large-grey.png", alt: "add files") %> 

     <%= f.file_field :audio, multiple: true, name: "layer[audio][]", :required=>true %> 

    </div> 

    <%= f.button "Create Now! ", class: "btn btn-lg btn-primary" %> 
    <% end %> 
    </div> 
    <div class="col-md-1 hidden-sm"> 
    <%= image_tag "shadow-vert.png" %> 
    </div> 
    <div class="col-md-6 no-pad"> 

    <!-- ------------ BELOW IS WHERE THE UPLOAD PREVIEWS SHOULD SHOW UP...but they are not ------------------------------------------------ --> 

    <h1>Preview your changes & additions</h1> 
    <div id="layers"> 
     <%= render @version.layers %> 
    </div> 
    </div> 
</div> 

AUDIO_UPLOADER.RB (закачивающие/AUDIO_UPLOADER.RB ... ЭТО CARRIERWAVE UPLOADER FILE)

# encoding: utf-8 

class AudioUploader < CarrierWave::Uploader::Base 

    # Include RMagick or MiniMagick support: 
    # include CarrierWave::RMagick 
    # include CarrierWave::MiniMagick 

    # Choose what kind of storage to use for this uploader: 
    storage :file 
    # storage :fog 

    # Override the directory where uploaded files will be stored. 
    # This is a sensible default for uploaders that are meant to be mounted: 
    def store_dir 
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}" 
    end 
end 

VERSIONS_CONTROLLER

class VersionsController < ApplicationController 
    before_action :find_project 

    def new 
    @version = @project.versions.build(user_id: current_user.id) 
    end 

    def show 
    @project = Project.find(params[:project_id]) 
    @version = Version.find(params[:id]) 
    end 

    def index 
    # @user = User.where(:id => @version.user_id) first figure out how to set user_id on new versions (its nil now) 
    @versions = Version.paginate(page: params[:page]) 
    end 

    def create 
    @project = Project.find(params[:project_id]) 
    @version = @project.versions.build(version_params) 
    if @version.save 
     @version.create_layers_with_audio(layer_audio_params) if params[:layer] 
     flash[:success] = "Created successfully" 
     redirect_to project_path(@project) 
    else 
     render 'new' 
    end 
    end 

    private 

    def find_project 
    @project = Project.find(params[:project_id]) 
    end 

    def version_params 
    params.require(:version).permit(:title, :project_id, :user_id) 
    end 

    def layer_audio_params 
    params.require(:layer).require(:audio) 
    end 
end 

VERSION.RB (МОДЕЛЬ ВЕРСИИ)

class Version < ActiveRecord::Base 
    belongs_to :project 
    belongs_to :user 
    has_many :layers, dependent: :destroy 
    validates :title, presence: true, length: { maximum: 140 } 

    default_scope -> { order('created_at DESC') } 

    def create_layers_with_audio(audios) 
    audios.each do |au| 
     self.layers.create(:audio=>au, :project_id=> self.project_id) 
    end 
    end 
end 

LAYERS_CONTROLLER.RB (СЛОИ CONTROLLER)

class LayersController < ApplicationController 
    def index 
    @layers = Layer.all 
    end 

    def new 
    @layer = Layer.new 
    end 

    def show 
    @layer = Layer.find(params[:id]) 
    end 

    def create 
    @project = Project.find(params[:project_id]) 
    @version = Version.find(params[:version_id]) 
    @layer = @version.layers.create(layer_params) 
    # if @layer.save 
     # flash[:success] = "Audio layers have been added successfully" 
     # redirect_to @project 
    # else 
     # render 'new' 
    # end 
    end 

    def update 

    end 

    def destroy 

    end 

    private 

    # def layer_params 
    # params.require(:layer).permit(:audio, :project_id, :version_id) 
    # end 
end 

LAYER.RB (СЛОЙ МОДЕЛЬ)

class Layer < ActiveRecord::Base 
    belongs_to :project 
    belongs_to :version 

    validates :project_id, presence: true 
    validates :version_id, presence: true 
    validates :audio, presence: true 

    mount_uploader :audio, AudioUploader 
end 

CREATE.JS.ERB (ВЕРЮ Этот файл может быть куда я клоню НЕПРАВИЛЬНО!)

<% if @layer.new_record? %> 
    alert("failed to upload layer: <%= j @layer.errors.full_messages.join(', ').html_safe %>"); 
<% else %> 
    $("#layers").append("<%= j render(@layer) %>"); 
<% end %> 

_LAYER.HTML.ERB (_LAYER ЧАСТИЧНАЯ)

<li> 

    <div class="bg-add"> 
    <%= layer.audio %> 
    </div> 

</li> 

application.js (АКТИВЫ/JavaScripts)

//= require jquery 
//= require jquery_ujs 
//= require jquery.remotipart 
//= require jquery-fileupload/basic 
//= require jquery.ui.all 
//= require autocomplete-rails 
//= require bootstrap 
//= require turbolinks 
//= require bootstrapValidator/dist/js/bootstrapValidator.min 
//= require_tree . 

APPLICATION.CSS (активы/StyleSheets)

*= require_self 
*= require jquery.ui.all 
*= require bootstrapValidator/dist/css/bootstrapValidator.min 
*= require_tree . 

VERSIONS.JS.COFFEE (АРР/АКТИВЫ/JAVASCRIPTS ...)

# Place all the behaviors and hooks related to the matching controller here. 
# All this logic will automatically be available in application.js. 
# You can use CoffeeScript in this file: http://coffeescript.org/ 
jQuery -> 
    $('#new_layer').fileupload() 
    dataType: "script" 

LAYERS.JS.COFFEE (APP/Assets/JavaScripts ... не был уверен, что если это Js должна идти в слоях или версиях, так как форма создает как ... поэтому я попытался в том числе в обоих)

# Place all the behaviors and hooks related to the matching controller here. 
# All this logic will automatically be available in application.js. 
# You can use CoffeeScript in this file: http://coffeescript.org/ 
jQuery -> 
    $('#new_layer').fileupload() 
    dataType: "script" 

ответ

1

вместо использования загрузки файла jquery просто попробуйте remotepart gem, который сделает нашу удаленную форму rails для переноса файла. Обратитесь к http://os.alfajango.com/remotipart/.

+0

спасибо Mohanraj, есть ли демо-версия этого, что я вижу в браузере? (например, jquery-fileupload demos - функциональность прямо из http://blueimp.github.io/jQuery-File-Upload/) – BB500

+0

Когда вы добавляете // = требуется jquery.remotipart line к application.js автоматически, ваша форма получит возможность для поддержки файлового поля. В вышеприведенном URL-адресе также содержится демонстрационное приложение – Mohanraj

+0

Mohanraj, добавлено жемчужина remotipart и добавлен требуемый файл в application.js. Он по-прежнему не загружается автоматически. Я добавил: remote => true также в соответствии с документацией. Можете ли вы указать, где мне нужно добавить код? – BB500