Using respond_to ... format.json and jQuery Form Plugin by malsup

Question

Hello all,

I'm having a tad bit of trouble getting the jQuery Form Plugin to work properly with a file-upload field. When I use the plugin to submit the form without a file-upload field, the format.json portion of the respond_to do |format| block is called properly. However, by adding the file-upload field, it only executes the format.html portion which makes my javascript code think that an error has occurred.

Has anyone run into this before or know a way to force the plugin to always use json? Alternatively, can I modify the url that the plugin uses to force Rails to render the json?

Thanks very much for any help! Code below:

# app/controllers/details_controller.rb
def create
  @detail = Detail.new(params[:detail])

  style = params[:detail_style].to_sym || :thumb
  data = { :id => '5', :url => 'test.rails' }

  respond_to do |format|
    if @detail.save
      flash[:notice] = 'Your image has been saved.'
      data = { :id => @detail.id, :url => @detail.data.url(style) }

      format.html { redirect_to :action => 'index' }
      format.json { render :json => "<textarea>#{data.to_json}</textarea>", :status => :created }
    else
      format.html { render :action => 'new' }
      format.json { render :json => @detail.errors, :status => :unprocessable_entity }
    end
  end
end

/* app/views/sidebar/_details.html.erb (excerpt) */

<% form_for(Detail.new, :html => { :multipart => true } ) do |f| %>
  <%= hidden_field_tag 'detail_style', 'thumb' %>

  <%= f.label :image, "Recent Images" %>
  <%= f.file_field :image%>

  <p> 
    <%= f.submit "Upload" %>
  </p>
<% end %>

<script>
$(document).ready(function() {
  var options = {
    dataType: 'json',

    success: function(json, statusText) {
      console.log("success: " + json);
    },

    error: function(xhr, statusText, errorThrown) {
      console.log("error: " + xhr.responseText);
    }
  };

  $('#new_detail').ajaxForm(options);
});

Answer 1

Can you examine the post to the server with firebug, and paste the request headers here. We're looking to see that the Accept header is set to json. Also, what version of rails are you using?

Answer 2

I'm still not sure why it doesn't work, but I tried many things and finally found the solution.

I tried changing the url by adding .json to the end which forced Rails to render the format.json block, but it confused my browser by making it think I wanted to download a file.

So, I then tried modifying the url by passing the parameter ?format=json which unfortunately did the exact same thing.

Eventually, I tried changing the format.json to just format.js (Javascript) and adding .js to the url, but still using the same render :json => ... that I had before along with setting the dataType parameter in my jQuery call to json. This appears to work even though it's not the most optimal solution.

I hope somebody else finds this useful. I'll post again if I find a proper answer. In the meantime, if anybody else has a proper answer, let me know and I'll accept yours!

Answer 3

Apparently, setting Accept header is not possible when ajaxSubmit is used and a file is uploaded.

See malsup's answer in this thread here.

He says:

File uploads don't use ajax, the form plugin only makes it appear that way. A true browser submit takes place when uploading a file.

Answer 4

Several things are needed to make jQuery Form plugin work for file uploads with a JSON response. In the javascript, the options for .ajaxForm should have:

dataType: 'json', // evaluate return as JSON

The browser needs to tell the Rails action to return content as JSON, one way to do this is add a hidden format input field in the file upload form template:

<%= hidden_field_tag 'format', 'json' %>

The Rails action will then run the format.json method inside the respond_to block.

In the server action

• encapsulate JSON in a tag, .ajaxForm will unwrap the string and eval JSON correctly
• set return content type to “text/html”, otherwise some browsers (Firefox) will try to download the return into a file.

e.g.

  respond_to do |format|
    format.json {
          render :json => "<textarea>#{data.to_json}</textarea>", :content_type => "text/html"
    }
  }

Answer 5

I am seeing this problem too, or a very similar one.

Only happens in firefox, where I do all my JavaScript testing, Safari, Chrome, and Stainless work just like I want.

In firefox the accepts header has the default value, regardless of the options.dataType and the browser acts like the json is a file download.

Firefox works fine if I don't have a file attachment. I am sure there are people who can explain why ajax cannot do multipart, I am not one of them and don't need to be. But I do want to know why I can't get jquery.forms to set the accept header in firefox.