Question

我正在尝试将Dropzone.js应用到我的Rails 4应用中。我有小盒子，但似乎没有其他工作。虽然我知道这对我这里的人来说可能是小菜一碟，但我花了大约两天的时间试图解决这个问题。

这是我到目前为止所做的和所做的事情：

添加了：

gem 'dropzonejs-rails'

添加到application.js：

//= require dropzone

Application.scss

 *= require dropzone/dropzone

这是我想要Dropzone.JS的表单：

目前我在表单页面上的内容：

出现该框，但拖放和任何其他功能都不起作用......

其他信息：我正在使用Paperclip，我希望能够将多个图像上传并保存到我拥有的每个帖子中。

我不确定这是否有必要但是

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并让它显示在我的帖子显示页面上。

提前谢谢！

更新：

出现的是：

Answer 1

基于DropzoneJS documentation，您应该将类 dropzone 放在表单元素而不是文件上传元素上。在此之后，DropzoneJS找到所有文件输入并在表单中更改它们。

因此将表单生成行更改为

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

到

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

Answer 2

@Loi Huynh：你好！您可以在此网站上看到示例：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：

def create

@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

$（ “悬浮窗”）。悬浮窗（{

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();
  });
 },

}）;

DropzoneJS和Rails 4 - 几乎在那里，但我仍然缺少关键部分

2 个答案: