CarrierWave和Dropzonejs＆＃34; param遗失了＃34;

时间：2015-04-24 13:40:31

标签： jquery ruby-on-rails ajax controller

我有两个关联模型，Boats has_many :pictures，图片模型belongs_to :boat，这些是嵌套路线; 

resources :boats, except: :destroy do
      resources :pictures
end

所以，我有新的页面，用户可以上传船只照片。我使用Carrierwave处理图片上传，这很好。然后决定使用Jquery，拖放等我首先尝试使用jquery-file-upload，但对我来说似乎很复杂。所以我决定使用Dropzone.js，它运行正常，但由于我猜#create动作，我收到错误。我也尝试从Here使用它，但我很困惑。

所以这是我的new.html.erb; 

<div class="container">

<%= form_for [@boat, @picture], html: { multipart: true, class: "dropzone", id: "picture-dropzone"} do |f| %>


      <p>
      <div class="fallback">
      <%= f.file_field :image, multiple: true %>
      </div>    
      </p>

      <%= f.submit "Done", class: "btn btn-primary" %>
<% end %>

<p><%= link_to "Back to My Profile",  current_user %></p>


<% if @pictures.present? %>
    <% @pictures.each do |pic| %>
        </br>
        <%= pic.name %>
        <%= image_tag pic.image_url(:thumb).to_s  %>
        <%= link_to "edit", edit_boat_picture_path(@boat, pic) %> |
        <%= link_to 'Destroy', boat_picture_path(@boat, pic), confirm: 'Are you sure?', method: :delete %> | 
        </br>
    <% end %>
<% end %>

<script type="text/javascript">
$(function() {
  var pictureDropzone;
  pictureDropzone = new Dropzone("#picture-dropzone");
  return pictureDropzone.on("success", function(file, responseText) {
    var imageUrl;
    imageUrl = responseText.file_name.url;
  });
});
</script>

这是图片控制器; 

class PicturesController < ApplicationController
  before_action :logged_in_user
  before_filter :load_parent



  def new
    @picture = @boat.pictures.new
    @pictures = @boat.pictures.all 
  end

  def show
    @picture = @boat.pictures.find(params[:id])
  end


  def create #I THINK HERE IS THE PROBLEM

    @picture = @boat.pictures.new(picture_params)

    if @picture.save
       respond_to do |format|
          format.html { redirect_to new_boat_picture_path(@boat, @picture), notice: 'Post was successfully created.' }
       end
    end     
 end



  def edit
    @picture = Picture.find(params[:id])
  end

  def update
    @picture = @boat.pictures.find(params[:id])

    if @picture.update_attributes(picture_params)
      flash[:notice] = "Successfully updated picture."
      render 'index'
    else
      render 'edit'
    end
  end

  def destroy

    @picture = @boat.pictures.find(params[:id])
    @picture.destroy

    flash[:notice] = "Successfully destroyed picture."
    redirect_to new_boat_picture_path(@boat, @picture)
  end


  private

    def picture_params
      params.require(:picture).permit(:name, :image)
    end

    def load_parent
     @boat = Boat.find(params[:boat_id])
    end

end

所以，当我选择图片时， Looks like this

看起来像这样。但是当我点击时，按钮完成;

enter image description here

我收到此错误。先感谢您。

编辑1：

ActionController::ParameterMissing (param is missing or the value is empty: picture):
  app/controllers/pictures_controller.rb:61:in `picture_params'
  app/controllers/pictures_controller.rb:19:in `create'


  Rendered /usr/local/lib/ruby/gems/2.2.0/gems/web-console-2.0.0.beta3/lib/action_dispatch/templates/rescues/_source.erb (10.3ms)
  Rendered /usr/local/lib/ruby/gems/2.2.0/gems/web-console-2.0.0.beta3/lib/action_dispatch/templates/rescues/_trace.html.erb (3.8ms)
  Rendered /usr/local/lib/ruby/gems/2.2.0/gems/web-console-2.0.0.beta3/lib/action_dispatch/templates/rescues/_request_and_response.html.erb (1.5ms)
  Rendered /usr/local/lib/ruby/gems/2.2.0/gems/web-console-2.0.0.beta3/lib/action_dispatch/templates/rescues/_web_console.html.erb (1.2ms)
  Rendered /usr/local/lib/ruby/gems/2.2.0/gems/web-console-2.0.0.beta3/lib/action_dispatch/templates/rescues/diagnostics.html.erb within rescues/layout (75.9ms)

编辑2：

Started POST "/boats/133/pictures" for ::1 at 2015-04-24 17:46:05 +0300
Processing by PicturesController#create as HTML
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"KB9O0g0XZu6lzECCDleo3XE7h9ly6Vz7Yo8UjFCPWeZfwktjHfMvB17yMPqqIHgLt4RbD3CzgwDhwJhbFHFvJw==", "commit"=>"Done", "boat_id"=>"133"}
  User Load (0.2ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ? LIMIT 1  [["id", 1]]
  Boat Load (0.2ms)  SELECT  "boats".* FROM "boats" WHERE "boats"."id" = ? LIMIT 1  [["id", 133]]
Completed 400 Bad Request in 4ms

编辑3： 似乎它不会发送图片，可能是因为<%= form_for [@boat, @picture], html: { multipart: true, class: "dropzone", id: "picture-dropzone"} do |f| %>。就像在例子中一样; <%= form_tag '/media_contents', method: :post, class: "dropzone", id: "media-dropzone" do %>。但我不知道如何为嵌套路线做这件事

编辑4：

这是我尝试过的; 

<%= form_for [@boat, @picture] do |f| %> #I think this is ok.

  <%= fields_for :boat, f.boat do |b| %> #the problem is here*
        <%= b.name %>
        <%= image_tag b.image_url(:thumb).to_s  %>
        <%= link_to "Edit", edit_boat_picture_path(@boat, pic) %> |
        <%= link_to 'Destroy', boat_picture_path(@boat, pic), confirm: 'Are you sure?', method: :delete %> | 
        </br>
  <% end %>
   <%= f.submit %>
<% end %>
  • 如果我尝试<%= fields_for :boat, @boat.picture do |b| %>或@ picture.boat，则会引发错误undefined method图片＆＃39;对于＃. I do not know if thats relevant but picture model belongs_to：boat`

编辑5： 这是我到目前为止所得到的，但它仍然会出现同样的错误; 

param is missing or the value is empty: picture

我的表格; 

<%= form_for [@boat, @picture], html: { multipart: true, class: "dropzone", id: "picture-dropzone"} do |f| %>


      <p>

      <%= f.fields_for :pictures do |p| %>  
      <div class="fallback">
      <%= p.file_field :image, multiple: true, name: "picture[image][]" %> 
      </div>    
      <% end %>

      </p>

      <%= f.submit "Done", class: "btn btn-primary" %>
<% end %>

#create行动; 

def create

    @picture = @boat.pictures.new(picture_params)


    if @picture.save
      respond_to do |format|
      params[:picture]['image'].each do |a|
        @picture = @boat.pictures.create!(:image => a, :boat_id => @boat.id)
      end

      format.html { redirect_to new_boat_picture_path(@boat, @picture), notice: 'Post was successfully created.' }
     else
       format.html { render action: 'new' }
    end
   end  
  end

如果有人可以提供帮助，我真的很感激。

编辑6 几乎所有解决方案：

好的，我现在已经更改了代码，但是只有当我点击删除图片时才会出现问题，它会从服务器中删除但不会从页面中删除。所以它应该是ajax问题。

我会把它放在这里也许对某人有帮助。

#new.html.erb
    <div class="container">

    <%= form_for [@boat, @picture], html: { multipart: true, class: "dropzone", id: "picture-dropzone"} do |f| %>


          <p>

          <div class="fallback">
          <%= f.file_field :image %> 

          </div>    

          </p>

    <% end %>

    <p><%= link_to "Back to My Profile",  current_user %></p>




    <script type="text/javascript">
    $(document).ready(function(){
        // disable auto discover
        Dropzone.autoDiscover = false;

        // grap our upload form by its id
        $("#picture-dropzone").dropzone({
            // restrict image size to a maximum 5MB
            maxFilesize: 5,
            // changed the passed param to one accepted by
            // our rails app
            paramName: "picture[image]",

            acceptedFiles: "image/*", //CALISIYOR MU BILMIYORUm
            // show remove links on each image upload
            addRemoveLinks: true,
            // if the upload was successful
            success: function(file, response){
                // find the remove button link of the uploaded file and give it an id
                // based of the fileID response from the server
                $(file.previewTemplate).find('.dz-remove').attr('id', response.fileID);
                $(file.previewTemplate).find('.dz-remove').attr('boat_id', response.boatID);
                // add the dz-success class (the green tick sign)
                $(file.previewElement).addClass("dz-success");
            },
            //when the remove button is clicked
            removedfile: function(file){

                // grap the id of the uploaded file we set earlier
                var id = $(file.previewTemplate).find('.dz-remove').attr('id'); 
                var boat_id = $(file.previewTemplate).find('.dz-remove').attr('boat_id'); 
                // make a DELETE ajax request to delete the file
                $.ajax({
                    type: 'DELETE',
                    url: '/boats/' + boat_id + '/pictures/' + id,
                    success: function(file){


                    }
                });
            }
        }); 
    });
</script>

#create和#destroy行动

def create

    @picture = @boat.pictures.new(picture_params)

    if @picture.save
    render json: { message: "success", fileID: @picture.id, boatID: @boat.id }, :status => 200

    else
      render json: { error: @picture.errors.full_messages.join(',')}, :status => 400

    end

  end

  def destroy

    @picture = @boat.pictures.find(params[:id])
    if @picture.destroy
     render json: { message: "File deleted from server" }
    else
      render json: { message: @picture.errors.full_messages.join(',') }
    end
  end

0 个答案:

没有答案
相关问题
最新问题