将我的 dropzone 文件与 rails 中的 table 用户链接

Question

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

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

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

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

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

autoProcessQueue:false

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

但即便如此，它也不起作用。

谁能帮帮我。

我使用 carrierwave 和 cloudinary 进行文件上传，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

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

Answer 1

为什么不为用户创建一个 table，为图像创建一个 table，为每个保存的用户创建一个关系！这样每个用户都有很多图像。您可以使用 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

Answer 2

在这种情况下，您可以使用远程表单保存列表，这将使用 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();

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

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

将我的 dropzone 文件与 rails 中的 table 用户链接

Linking my dropzone files with my users table in rails

ruby-on-rails

dropzone.js