DropzoneJS和Rails 4 - 幾乎有，但我仍然缺少關鍵部分

Question

我試圖實現Dropzone.js到我的Rails應用程序4。我有這個小盒子，但沒有其他東西似乎在工作。雖然我知道這可能是一個人在這裏的一塊蛋糕，但我花了大約2天的時間來試圖弄清楚這一點。

這裏是我已經和迄今所做的：

補充：

gem 'dropzonejs-rails' 

加入的application.js：

//= require dropzone 

Application.scss

*= require dropzone/dropzone 

這裏是我的形式想在Dropzone.JS：

我目前有至今我的窗體頁上：

出現的對話框中，但既不拖放或任何其他功能工作。 ..

更多信息：我使用回形針，我希望能夠多張圖片上傳並保存到我在每一個職位。

我不知道這是否是必要的，但

Post.rb：

post_controller.js

class PostsController < ApplicationController 
before_action :find_posts, only: [:show, :edit, :update, :destroy, :upvote, :downvote] 
before_action :authenticate_user!, except: [:index, :show, :home] 

def home 
end 

def index 
    if params[:category].blank? 
     @posts = Post.all.order("created_at DESC") 
    else 
     @category_id = Category.find_by(name: params[:category]).id 
     @posts = Post.where(category_id: @category_id).order("created_at DESC") 
    end 
end 

def show 
    @inquiries = Inquiry.where(post_id: @post).order("created_at DESC") 
    @random_post = Post.where.not(id: @post).order("RANDOM()").first 
end 

def new 
    @post = current_user.posts.build 
end 

def create 
    @post = current_user.posts.build(post_params) 
    if @post.save 
     redirect_to @post 
    else 
     render 'new' 
    end 
end 

def edit 
end 

def update 
    if @post.update(post_params) 
     redirect_to @post 
    else 
     render 'edit' 
    end 
end 

def destroy 
    @post.destroy 
    redirect_to root_path 
end 

def upvote 
    @post.upvote_by current_user 
    redirect_to @post 
end 

def downvote 
    @post.downvote_by current_user 
    redirect_to @post 
end 

private 
def find_posts 
    @post = Post.find(params[:id]) 
end 

def post_params 
    params.require(:post).permit(:title, :price, :description, :location, :category_name, :contact_number, :image) 
end 

末

我需要什麼幫助：

實施Dropzone.JS這樣我就可以上傳多張圖片到我的帖子_form並讓它出現在我的展後頁面上。

預先感謝您！

---

UPDATE：

這是出現：基於

Answer 1

的DropzoneJS documentation你應該把這個類懸浮窗表單元素上，而不是在文件上傳元素。在此之後，DropzoneJS查找所有文件輸入，並在表單中更改它們。

所以形式代線改爲

= simple_form_for @Post, html: { multipart: true } do |f| 

到

= simple_form_for @Post, html: { multipart: true, class: 'dropzone' } do |f| 

Answer 2

@Loi黃長髮：喜萊！您可以在此網站上看到的例子：http://sudharti.github.io/articles/dropzone-rails/

我有更新嵌套形式...的問題，如果你想我們討論這個問題。 這是我的代碼：

<%= form_for(@product, html: {class: "dropzone", multipart: true}) do |f| %> 
<div id="previews" class="dropzone-previews"> 
<div class="dz-default dz-message" align="center"> 
    <span class="btn btn-primary">Click vào đây để thêm Ảnh</span> 
</div> 
</div> 
<div class="col-md-4 col-md-offset-4" align="center"> 
    <br/> 
    <div class="actions"> 
    <%= f.submit "Hoàn Tất", id: "submit-all", class: "btn btn-primary btn-sm" %> 
    <%= link_to 'Quay về', products_path, class: "btn btn-primary btn-sm" %> 
    </div> 
</div> 

和我products_controllers：

高清創建

@product = Product.new(product_params) 
respond_to do |format| 

    if @product.save 

    format.html { redirect_to products_url, notice: 'Tạo mới thành công.!.' } 
    format.json { render :show, status: :created, location: @product } 
    else 
    render json: { error: @post.errors.full_messages.join(',')}, :status => 400 
    end 
end 

末

和我upload.js

$（」懸浮窗。 「）.dropzone（{

autoProcessQueue : false, 
paramName: "product[photos_attributes][][image]", 
previewsContainer: "#previews", 
init: function() { 
    var myDropzone = this; 
    this.element.querySelector("#submit-all").addEventListener("click", function(e) { 
     e.preventDefault(); 
     e.stopPropagation(); 
     myDropzone.processQueue(); 
    }); 
}, 

}）;