如何使用Dropzone.js和Rails 4重定向提交页面

how to redirect page on submit with Dropzone.js and Rails 4?

本文关键字：重定向 提交 Rails 何使用 Dropzone js      更新时间：2023-09-26

我使用Rails 4，与Paperclip和Dropzone.js。我有一个表单，用户填写一切，可以上传照片，然后提交表单没有Dropzone自动上传它。所以，使用下面的js，它会"暂停"，直到我点击提交按钮。

项目/_form.html.erb 

<%= form_for(@item, html: {class: 'form-horizontal form dropzone', multipart: true}) do |f| %>
    <%= token_tag(nil) %>
    <%= f.file_field :image, class: 'img-input', accept: 'image/png, image/jpeg, image/jpg', multiple: false %>
    <%= f.submit 'Done', class: 'btn btn-primary btn-lg btn-block item-submit' %>
<% end %>

items.js 

$(document).ready(function() {
  // disable auto discover
  Dropzone.autoDiscover = false;
  var dropzone = new Dropzone (".dropzone", {
    maxFiles: 1, 
    maxFilesize: 1, 
    paramName: "item[image]",
    addRemoveLinks: true, 
    clickable:'#dropzonePreview',
    previewsContainer: '#dropzonePreview',
    thumbnailWidth: 300,
    thumbnailHeight: 300,
    autoProcessQueue: false,
    uploadMultiple: false
  });
  $(".item-submit").click(function (e) {
    e.preventDefault();
    e.stopPropagation();
      dropzone.processQueue();
    }
  );
});

路线

resources :items

ItemsController 

  def new
    @item = current_user.items.build
  end
  def create
    @item = current_user.items.build(item_params)
    if @item.save
      redirect_to @item, notice: "item was successfully created"
    else
      render 'new'
    end
  end

我遇到的问题是，我可以创建一个新项目并拖放照片，但在我提交表单后，而不是重定向到项目/显示，它将保持在同一页面上并呈现错误:

编辑
Started POST "/items" for 127.0.0.1 at 2015-09-02 15:19:36 -0700
Processing by ItemsController#create as JSON
  Parameters: {"utf8"=>"✓", "authenticity_token"=>............  
  [1m[35m (11.6ms)[0m  COMMIT
  [1m[33mItem Store (45.9ms)[0m  {"id":16}
Redirected to http://localhost:3000/items/16
Completed 302 Found in 2153ms (Searchkick: 45.9ms | ActiveRecord: 13.8ms)

Started GET "/items/16" for 127.0.0.1 at 2015-09-02 15:19:38 -0700
Processing by ItemsController#show as JSON
  Parameters: {"id"=>"16"}
  [1m[36mItem Load (0.4ms)[0m  [1mSELECT  "items".* FROM "items" WHERE "items"."id" = $1 LIMIT 1[0m  [["id", 16]]
Completed 500 Internal Server Error in 5ms (ActiveRecord: 0.4ms)
ActionView::MissingTemplate - Missing template items/show, application/show with {:locale=>[:en], :formats=>[:json], :variants=>[], :handlers=>[:erb, :builder, :raw, :ruby, :coffee, :jbuilder]}. Searched in:
  * "/home/user/dummyappone/app/views"

我怎样才能使它，当我的表单提交，它去到显示页面，仍然允许显示flash消息和错误，如果不保存?

基于注释:只需将此添加到您的js:

dropzone.on("success", function(file, responseText) {
  window.location.href = ("/items/"+responseText.id)
});

这里假设dropzone是您在之前的JS中初始化的dropzone

相关文章：