3

Railsアプリでajax画像のアップロードを機能させようとしています。私は通常の画像のアップロードに Paperclip を使用していますが、うまく動作しますが、ajax メソッドを接続できないようです。Rack RawUpload と File Uploaderプラグインを使用しています。ここの一般的な手順に従いましたが、作成時に新しいオブジェクトに実際に画像を添付することに行き詰まっています。ここに私のコントローラコードがあります:

@bottle = Bottle.new(params[:bottle])
    @bottle.user_id = current_user.id
#file = params[:qqfile].is_a?(ActionDispatch::Http::UploadedFile) ? params[:qqfile] : params[:file]
is_qq = params.has_key?(:qqfile)

if is_qq
    params[:bottle][:image] = params.delete(:file)
    render :json => { "success" => true }
else
        respond_to do |format|
            if @bottle.save
                    format.html { redirect_to '/bottles', notice: 'Bottle was successfully created.' }
                    format.json { render json: @bottle, status: :created, location: @bottle }
            else
                    format.html { render action: "new" }
                    format.json { render json: @bottle.errors, status: :unprocessable_entity }
            end
        end
    end

ビューコードは次のとおりです。

<%= simple_form_for(@bottle, :html => { :multipart => true }) do |f| %>
    <%= f.error_notification %>

    <div class="form-inputs">
        <%= f.input :brand, :placeholder => 'Brand', :label => false %>
        <%= f.input :region, :placeholder => 'Region', :label => false %>
        <%= f.input :age, :collection => 5..35, :prompt => "Bottle Age", :label => false %>
        <%= f.input :price, :placeholder => 'Price', :label => false, :as => :currency, :input_html => { :class => 'span2' } %>
        <%= f.input :image_id, :as => :hidden %>
        <%= f.text_area :notes, :placeholder => 'Tasting notes...', :size => "160x5"  %>
    </div>  
</div>
<div class="span3 offset2">
Drag a file from your desktop here...
    <div class="well" height="105" style="width:200px;height:300px;">
    <!-- <img src="http://placehold.it/200x300" alt="" class="temp_image"> -->
        <div id="file-uploader"></div>
    </div>
    or...
    <%= f.file_field :image %>
</div>
<div class="span8 offset2">
    <%= f.button :submit, :class => 'btn-primary' %>
    &nbsp;
    <%= link_to bottles_path, :class => 'btn btn-danger' do %>
        Cancel
    <% end %>
</div>
<% end %>

次のように File Uploader でアップロードしています。

var uploader = new qq.FileUploader({
debug: false,

/* Do not use the jQuery selector here */
element: document.getElementById("file-uploader"),

action: '/bottles',

allowedExtensions: ["jpg", "png"],

/*
 * This uploads via browser memory. 1 MB example.
 */
sizeLimit: 1048576,

/* Set Article category on submit */
onSubmit: function(id, fileName) {
  uploader.setParams({
    authenticity_token: $("input[name='authenticity_token']").attr("value")
  });
},
onComplete: function(id, fileName, responseJSON){
    url = responseJSON.image.image.url;
    $('.well').html('<img src="'+url+'" />');
    $('input#bottle_image_id').val(responseJSON.image.id);
}

});

Rack を使用してアップロードしたようで、:file パラメータをメソッドに渡しますが、param[:bottle][:image] を param[:file] に割り当てることができません。エラーが発生します:

undefined method `[]=' for nil:NilClass

どんな助けでも大歓迎です。

編集:
だから私は ajax アップロードを取得してペーパークリップのアップロードにフックし、適切なパラメーターを追加することができますが、新しいオブジェクトを作成するのではなく、残りのフォームを送信するときに同じオブジェクトを更新する必要があります。すべての画像コンテンツを含む ajax アップロードによって作成されたオブジェクトを保存し、完全なフォームが送信されたら更新するにはどうすればよいですか?

編集2：保存時に発生するエラーは

undefined method `save' for #<ActiveSupport::HashWithIndifferentAccess:0x007ff961d08e48>

これは、フォームデータを取得して同じ @bottle オブジェクトに入れようとしていて、ハッシュが一致していないためだと思います。

4

1 に答える 1