javascript - DropzoneJS 和 Rails 4 - 差不多了,但我仍然缺少关键部分

标签 javascript ruby-on-rails ruby-on-rails-4 paperclip dropzone.js

我正在尝试将 Dropzone.js 实现到我的 Rails 4 应用程序中。我有那个小盒子,但其他似乎都不起作用。虽然我知道这对于这里的人来说可能是小菜一碟,但我花了大约 2 天的时间试图解决这个问题。

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

添加:

gem 'dropzonejs-rails'

添加到application.js:

//= require dropzone

应用程序.scss

 *= require dropzone/dropzone

这是我想要使用 Dropzone.JS 的表单:

enter image description here

目前我的表单页面上有什么:

enter image description here

出现了该框,但拖放或任何其他功能都不起作用...

其他信息:我正在使用 Paperclip,并且我希望能够将多个图像上传并保存到我的每篇帖子中。

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

帖子.rb:

enter image description here

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,以便我可以将多个图像上传到我的帖子表单,并将其显示在我的帖子显示页面上。

enter image description here

提前谢谢您!

<小时/>

更新:

这就是出现的内容: enter image description here

最佳答案

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

因此将表单生成行更改为

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

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

关于javascript - DropzoneJS 和 Rails 4 - 差不多了,但我仍然缺少关键部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32159259/

相关文章:

ruby-on-rails - class_methods 在关注中做了什么?

ruby-on-rails - 如何为在 Rails 中发帖的按钮创建路线

ruby-on-rails - Foursquare 和 Heroku : certificate verify failed

ruby-on-rails - 如何使用 rails 中的序列化程序将深层嵌套的关联渲染到 json?

ruby-on-rails - 在基本 Controller 中的操作之前跳过不起作用

javascript - 自定义属性不起作用

javascript - 如何在 javascript 函数中使用 PHP 生成的 JSON 数组?

javascript - jQuery 一键单击,但在某些情况下多次执行

javascript - 将 php 中的标记添加到 map 中

ruby-on-rails - 切勿使用 Turbolinks 加载特定路线