Ruby on Rails:Dropzone js,正在获取 [object Object],但为什么呢?
Ruby on Rails: Dropzone js, getting [object Object], but why?
我的缩略图上出现了 [object Object](背景图像是您可以点击上传照片的区域...我不确定如何加载类似于示例的普通框在 http://www.dropzonejs.com/)
查看
<%= simple_form_for @project do |f| %>
<div class="dropzone dz-clickable dz-square" id="mydrop">
<div class="dz-default dz-message" data-dz-message=""></div>
<div id="bi_previews"></div>
<div class="fallback">
<%= f.file_field :beautiful_image %></div>
</div>
</div>
<% end %>
CoffeeScript
$(document).on 'ready page:load', ->
Dropzone.autoDiscover = false
$('div#mydrop').dropzone
url: '/projects'
previewsContainer: "#bi_previews"
headers: "X-CSRF-Token" : $('meta[name="csrf-token"]').attr('content')
paramName: "project[beautiful_image]"
init: ->
@on 'success', (file, json) ->
@on 'addedfile', (file) ->
@on 'drop', (file) ->
alert 'file'
return
return
routes.rb
Rails.application.routes.draw do
devise_for :users
resources :projects
控制器
def project_params
params.require(:project).permit(
:user_id, :beautiful_image, :title_name, :remove_project_images_files, project_images_files: [],
project_images_attributes: [:id, :project_id, :photo, :_destroy]).merge(user_id: current_user.id)
end
型号
has_attached_file :beautiful_image, :styles => { :large => "800x800>", :medium => "500x500>", :thumb => "150x150#" }, :default_url => "/images/:style/missing.png"
validates_attachment_content_type :beautiful_image, content_type: /\Aimage\/.*\Z/
编辑
根据评论请求发布控制器
def new
@project = Project.new
@gear = Gear.new
@project.gears.build
@project.project_images.build
end
def edit
@project = Project.find(params[:id])
end
def create
@project = Project.new(project_params)
respond_to do |format|
if @project.save
format.html { redirect_to @project, notice: 'Project was successfully created.' }
format.json { render :show, status: :created, location: @project }
else
format.html { render :new }
format.json { render json: @project.errors, status: :unprocessable_entity }
end
end
end
在 Rails 中,不使用表单就无法 post 数据。 Rails 验证每个请求的 CSRF 令牌,除非 token_authentication
变成 off.In 您的代码,您使用 div ID
初始化了 dropzone
。所以服务器无法验证您的 authenticity token
.
The ApplicationController called protect_from_forgery, as appropriate. All of the controllers inherited from ApplicationController, and it appeared that there were no CSRF vulnerabilities. Through dynamic analysis, however, I discovered that the application was, in fact, vulnerable to CSRF.
所以使用表单的 id 初始化你的 dropzone。
HTML代码
<%= simple_form_for @project, class: 'dropzone', id: 'project-form' do |f| %>
<div class="fallback">
<%= f.file_field :beautiful_image, multiple: true %>
</div>
<% end %>
你的Javascript应该喜欢这个
var objDropZone;
Dropzone.autoDiscover = false;
$("#project-form").dropzone({
acceptedFiles: '.jpeg,.jpg,.png',
maxFilesize: 5, //In MB
maxFiles: 5,
addRemoveLinks: true,
removedfile: function (file) {
if (file.xhr.responseText.length > 0) {
var fileId = JSON.parse(file.xhr.responseText).id;
$.ajax({
url: '/projects/' + fileId,
method: 'DELETE',
dataType: "json",
success: function (result) {
console.log('file deleted successfully');
var _ref;
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
},
error: function () {
console.log('error occured while deleteing files');
}
});
}
},
init: function () {
objDropZone = this;
this.on("success", function (file, message) {
console.log('file uploaded successfully')
});
this.on("error", function (file, message) {
var _ref;
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
});
}
});
我的缩略图上出现了 [object Object](背景图像是您可以点击上传照片的区域...我不确定如何加载类似于示例的普通框在 http://www.dropzonejs.com/)
查看
<%= simple_form_for @project do |f| %>
<div class="dropzone dz-clickable dz-square" id="mydrop">
<div class="dz-default dz-message" data-dz-message=""></div>
<div id="bi_previews"></div>
<div class="fallback">
<%= f.file_field :beautiful_image %></div>
</div>
</div>
<% end %>
CoffeeScript
$(document).on 'ready page:load', ->
Dropzone.autoDiscover = false
$('div#mydrop').dropzone
url: '/projects'
previewsContainer: "#bi_previews"
headers: "X-CSRF-Token" : $('meta[name="csrf-token"]').attr('content')
paramName: "project[beautiful_image]"
init: ->
@on 'success', (file, json) ->
@on 'addedfile', (file) ->
@on 'drop', (file) ->
alert 'file'
return
return
routes.rb
Rails.application.routes.draw do
devise_for :users
resources :projects
控制器
def project_params
params.require(:project).permit(
:user_id, :beautiful_image, :title_name, :remove_project_images_files, project_images_files: [],
project_images_attributes: [:id, :project_id, :photo, :_destroy]).merge(user_id: current_user.id)
end
型号
has_attached_file :beautiful_image, :styles => { :large => "800x800>", :medium => "500x500>", :thumb => "150x150#" }, :default_url => "/images/:style/missing.png"
validates_attachment_content_type :beautiful_image, content_type: /\Aimage\/.*\Z/
编辑
根据评论请求发布控制器
def new
@project = Project.new
@gear = Gear.new
@project.gears.build
@project.project_images.build
end
def edit
@project = Project.find(params[:id])
end
def create
@project = Project.new(project_params)
respond_to do |format|
if @project.save
format.html { redirect_to @project, notice: 'Project was successfully created.' }
format.json { render :show, status: :created, location: @project }
else
format.html { render :new }
format.json { render json: @project.errors, status: :unprocessable_entity }
end
end
end
在 Rails 中,不使用表单就无法 post 数据。 Rails 验证每个请求的 CSRF 令牌,除非 token_authentication
变成 off.In 您的代码,您使用 div ID
初始化了 dropzone
。所以服务器无法验证您的 authenticity token
.
The ApplicationController called protect_from_forgery, as appropriate. All of the controllers inherited from ApplicationController, and it appeared that there were no CSRF vulnerabilities. Through dynamic analysis, however, I discovered that the application was, in fact, vulnerable to CSRF.
所以使用表单的 id 初始化你的 dropzone。
HTML代码
<%= simple_form_for @project, class: 'dropzone', id: 'project-form' do |f| %>
<div class="fallback">
<%= f.file_field :beautiful_image, multiple: true %>
</div>
<% end %>
你的Javascript应该喜欢这个
var objDropZone;
Dropzone.autoDiscover = false;
$("#project-form").dropzone({
acceptedFiles: '.jpeg,.jpg,.png',
maxFilesize: 5, //In MB
maxFiles: 5,
addRemoveLinks: true,
removedfile: function (file) {
if (file.xhr.responseText.length > 0) {
var fileId = JSON.parse(file.xhr.responseText).id;
$.ajax({
url: '/projects/' + fileId,
method: 'DELETE',
dataType: "json",
success: function (result) {
console.log('file deleted successfully');
var _ref;
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
},
error: function () {
console.log('error occured while deleteing files');
}
});
}
},
init: function () {
objDropZone = this;
this.on("success", function (file, message) {
console.log('file uploaded successfully')
});
this.on("error", function (file, message) {
var _ref;
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
});
}
});