将我的 dropzone 文件与我在 rails 中的用户表链接答案

【问题标题】：Linking my dropzone files with my users table in rails将我的 dropzone 文件与我在 rails 中的用户表链接
【发布时间】：2015-04-20 00:43:57
【问题描述】：

所以在修改了我的代码 100 多次之后，我终于让 dropzone 正常工作了。

现在的问题是我有一个列表和一个照片表。将有一个表单，用户将在其中创建列表，并且在该表单内将有一个放置区来放置您的图像。

我想要的是，我应该能够以某种方式将这些图像与我当前的列表相关联。

所以 dropzone 的问题在于，当您放下图像时，它会触发 post 操作并在数据库中插入一个条目，因为那时还没有点击列表表单提交按钮，所以我没有任何列表 id在图像和列表之间创建关联。

我可以解决这个问题的一种方法是设置

autoProcessQueue:false

然后在提交时将其设置为 true。

但即使那样它也不起作用。

谁能帮帮我。

我正在使用带有 cloudinary 的carrierwave 来上传文件，并使用 dropzone.js 来制作精美的 UI。

所有代码如下： /new.html.erb/

<%=form_for @listing, :html=> { class:'ui form centered black segment'} do |f|%>

   <div class="required field">
     <label>Title</label>  
     <%=f.text_field :title,placeholder:'Title of the listing'%>
   </div>

   <div class="field ui segment dropzone dropzone-previews" id='my-dropzone'>
     <p class="dz-message">You can drop an image here or click to upload."
     </p>
   </div>

   <script type="text/javascript">
   Dropzone.autoDiscover=false;
   var myDropzone=new Dropzone("#my-dropzone",
   {
     autoProcessQueue:false,
     url:'/listings',
     paramName:"file",
     addRemoveLinks:true,
     previewsContainer:'.dropzone-previews',
     headers: 
     {
        'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
     }


    });
    $('.ui.submit').click(function(e){

       myDropzone.autoProcessQueue();
    });
    </script>

 <%end%>

在我的列表控制器中，我正在尝试做这样的事情。这是我试图让这个工作，但我需要有人建议我一个更好的方法来做到这一点，

/上市控制器/

def create
        @listing=Listing.create(listing_params)
        @photo=@listing.photos.create(file_name: params[:file])
        redirect_to root_url
end

即使这不适用于任何图像上传，但它设置了列表 ID，但图像文件名仍然为空。

/Listing.rb/

class Listing < ActiveRecord::Base

    has_many :photos
end

/Photo.rb/

class Photo < ActiveRecord::Base
    mount_uploader :file_name, PhotoUploader
    belongs_to :listing
end

/*------------------Photos schema---------------------*/
id   |    file_name  |  listing_id

我应该怎么做才能在上传的图片和列表之间创建某种链接。

【问题讨论】：

我没有时间写一个完整的答案——但是您需要将 listing.id 从 rails 传递给 javascript 发布请求，然后返回到 rails 以分配给 listing_id（例如，通过将帖子网址从“listings”更改为“listings/id_number”）。如果这没有帮助，稍后会尝试提供更好的信息。
但是首先检查你的 Rails 控制器，看看是否listing_id 已经通过发布请求传递——如果是，你只需要添加类似@photo.listing_id = params[:listing_id] 然后@photo.save 的东西。
约瑟夫，如果我尝试你的方法，如果我上传多张图片会发生什么。在这种情况下会创建多个列表，因为这不是我想要的。因为一个列表最多可以有 4 个与之关联的图像。因此在这种情况下，列表表将有一个条目，照片表将有 4 个具有相同列表 ID 的条目。当前代码是否可以实现。
是的，我明白了。抱歉，我之前只有几分钟的时间发表评论，并没有考虑整个工作流程。不过，看起来你在下面得到了一个很好的答案！您还可以编辑 create 方法以首先检查列表是否存在，如果不存在则仅创建一个新的。

标签： ruby-on-rails dropzone.js

【解决方案1】：

在这种情况下，您可以使用远程表单保存列表，该表单将使用 ajax 而不是正常机制提交表单。在列表保存后的创建操作中，将 id 存储在会话变量中。在将要处理的 create.js.erb 中，您可以使用 myDropzone.processQueue() 函数处理照片。当照片在控制器操作中得到处理时，将其绑定到会话变量中的列表并保存。

class ListingsController < ApplicationController 
  def create
    @listing = Listing.new(listing_params)
    if @listing.save
      session[:listing] = @listing.id
      respond_to do |format|
        format.js
      end
    end
  end

  def media
    @listing = Listing.find(session[:listing])
    @media = Media.new(file_name: params[:file], listing: @listing)
    if @media.save!
      respond_to do |format|
        format.json{ render :json => @media }
      end
    end
   end
 end

使用 javascript 以编程方式创建 Dropzone，然后引用 create.js.erb 中的变量

 $(document).ready(function(){
   Dropzone.options.mediaDropzone = false;
   mediaDropzone = new Dropzone('div#media-dropzone', { 
     url: "/listings/media",
     autoProcessQueue: false
   });

   mediaDropzone.on("success", function(file, responseText) {
     console.log(responseText.file_name.url);
     console.log(responseText);
   });
 });

在 create.js.erb 中

 mediaDropzone.processQueue();

为了简短起见，我们保存列表，并在回调中保存照片并将两者关联起来。

您可以在此处https://github.com/sudharti/dropzone-rails-demo/tree/formsubmitrepo 的 formsubmit 分支中查看示例

【讨论】：

这正是我一直在寻找的。非常适合我。非常感谢。

【解决方案2】：

为什么不为用户创建一个表，为图像创建一个表，为每个保存的用户创建一个关系！这样每个用户都有很多图像。您可以使用 has_many 和 beglons_to。抱歉有任何语法错误，我的母语是葡萄牙语。

table users
id | name
1  | Josh
2  | Pedro

table images
id | user_id
1  | 1
2  | 1
3  | 1
4  | 2

【讨论】：