12

For some reason using the CarrierWave gem with Ajax doesn't seem to be working for me. Am I doing something wrong? I followed the 253 CarrierWave Railscast well and it works without AJAX but in my application I need to use AJAX. Here is my code:

The params list after selecting a jpeg in the image file field:

Parameters: {"item"=>{"remote_image_url"=>""}}

new.html.erb:

<%= form_for(@item, :url => create_item_path, :html => {:id => "create_item_form", :multipart => true}) do |f| %>
    <p>
      <%= f.file_field :image %>
    </p>
    <p>
      <%= f.label :remote_image_url, "or image URL" %><br />
      <%= f.text_field :remote_image_url %>
    </p>
    <%= f.submit "Save", :id => "save_button" %>
<% end %>

application.js

$("#create_item_form").submit(function() {
    $.ajax({
      type: "POST",
      url: $(this).attr("action"),
      dataType: "script",
      data:  $("#destination_item").sortable('serialize') + "&" + $(this).serialize()
      });
      return false;
});

item.rb

class Item < ActiveRecord::Base
  attr_accessible :description, :image, :remote_image_url
  belongs_to :user
  has_many :item_sub
  mount_uploader :image, ImageUploader
end

schema.rb

  create_table "item", :force => true do |t|
    t.integer  "user_id"
    t.string   "title"
    t.string   "image"
    t.datetime "created_at"
    t.datetime "updated_at"
  end

I have the carrierwave gem in my gemfile and I haven't changed anything in the app/uploaders/image_uploader.rb.

Thanks for all your help!

EverTheLearner
  • 7,040
  • 16
  • 57
  • 72

3 Answers3

14

There is nothing that can be done without a using a library like Uploadify. This is because the XMLHttpRequest (AJAX) standard has no support for file uploads. The only way you can really fake this is using an iFrame with Flash. Uploadify is the best of these options, and it has the best documentation. This is what has to be done on the client side (browser). Uploadify really isn't a ruby gem, its a collection of flash and js to allow the browser to 'fake it'.

On the server side, you can use carrierwave to support the uploads, but you need a way to get them there from the client side. Here is an extremely similar question which should give you the instructions that you need.

Rails Carrier Wave with JQuery Uploader

Hope this helps,

Joe

Community
  • 1
  • 1
TheDelChop
  • 7,938
  • 4
  • 48
  • 70
  • 2
    Will you give me my bounty then? – TheDelChop Feb 28 '12 at 02:07
  • 1
    As noted in the other answer below, unless you need to support older browsers [XHR2](http://caniuse.com/#feat=xhr2) has supported `FormData` for some time now. It's worth trying that if it's available to you and only falling back to other libraries for legacy support. – mczepiel Nov 15 '14 at 19:02
  • 3
    At this point this answer is outdated. HTML5 has the FormData and File API's that allow file uploads via AJAX. See [here](http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously/8758614#8758614) for more. – Alex Sharp Sep 07 '15 at 19:01
8

You can now upload files through ajax without the use of external libraries by using FormData()

SEE: LINK 1 & LINK 2

Community
  • 1
  • 1
Darcbar
  • 888
  • 1
  • 8
  • 25
0

You can't upload a file via ajax like that. You'll need something like: http://www.uploadify.com/

tybro0103
  • 48,327
  • 33
  • 144
  • 170
  • Why can't it be done? Is it because CarrierWave doesn't support Ajax submits? I'm trying to use the minimal amount of gems. Thanks – EverTheLearner Feb 27 '12 at 20:28
  • Because XMLHttpRequest doesn't support file uploads. – tybro0103 Feb 28 '12 at 03:52
  • 1
    Care to explain the downvote? My answer is the same as the accepted one, even answered before it. We now know that you can indeed use ajax to do a file upload in modern browsers, but if you want to support older ones (IE8), you'll still need a work-around. – tybro0103 Nov 17 '14 at 19:40