Ajaxy file upload issue in Rails using jQuery / Javascript

Question

I'm having problems in uploading a file using Rails and jQuery, I'm using attachment_fu plugin.

I'm trying to upload(create) a photo resource that belongs to album. And album has many photos.

Here's the jQuery code i've written in application.js

 $("#new_photo").submit(function(){
   $.post($(this).attr("action")+'.js', $(this).serialize(), null, "script");
   return false;
 });

BUT, the similar jQuery code to create new album works fine! Here's the jQuery code to create new album written inside application.js

$("#new_album").submit(function(){
$.post($(this).attr("action")+'.js', $(this).serialize(), null, "script");
return false;
});

The views/photos/new.html.erb

 <h1>New photo</h1>
 <% form_for([@album, @photo], :html => {:multipart => true}) do |f| %>
 <%= f.error_messages %>
 <%= render :partial => "form", :object => f %>
 <%= f.submit "Create"%>
 <% end %>
 <%= link_to 'Back', [@album, @photo], :method => :get %>

And here's the error I get in the log when I try to create a new photo:

Processing PhotosController#create to js (for 127.0.0.1 at 2011-04-01 17:41:52) [POST]
  Parameters: {"format"=>"js", "album_id"=>"1",    
  "action"=>"create",                        
   "authenticity_token"=>"k1Y1ILWbLFWYFaCwpkwW/W13aPe8UPoV0Fd+naO8bxU=", "controller"
    =>"photos"}
   User Columns (0.0ms)   SHOW FIELDS FROM `users`
   User Load (0.0ms)   SELECT * FROM `users` WHERE (`users`.`id` = 1) LIMIT 1
   Album Columns (0.0ms)   SHOW FIELDS FROM `albums`
   Album Load (15.6ms)   SELECT * FROM `albums` WHERE (`albums`.`id` = 1)
   Photo Columns (15.6ms)   SHOW FIELDS FROM `photos`
   SQL (0.0ms)   BEGIN
   Photo Create (0.0ms)   Mysql::Error: Column 'filename' cannot be null: INSERT INTO  
  `photos` (`size`, `created_at`, `content_type`, `tag_id`, `album_id`,  
  `thumbnail`, `updated_at`, `filename`, `height`, `parent_id`, `width`) VALUES(NULL, 
  '2011-04-01 12:11:52', NULL, NULL, 1, NULL, '2011-04-01 12:11
  :52', NULL, NULL, NULL, NULL)
  SQL (0.0ms)   ROLLBACK

  ActiveRecord::StatementInvalid (Mysql::Error: Column 'filename' cannot be null:  
  INSERT INTO `photos` (`size`, `created_at`, `content_type`, `tag_id`,
 `album_id`, `thumbnail`, `updated_at`, `filename`, `height`, `parent_id`, `width`)  
  VALUES(NULL, '2011-04-01 12:11:52', NULL, NULL, 1, NULL, '2011-04-0
  12:11:52', NULL, NULL, NULL, NULL)):

  Rendered rescues/_trace (203.1ms)
  Rendered rescues/_request_and_response (0.0ms)
  Rendering rescues/layout (internal_server_error)
  Problems loading RmagickProcessor: no such file to load -- RMagick2.so
  escues/layout (internal_server_error)
  SQL (0.0ms)   SET NAMES 'utf8'
  SQL (0.0ms)   SET SQL_AUTO_IS_NULL=0

I've also enabled the use_accept_header to accept .js formats in my config/environment.rb file as config.action_controller.use_accept_header = true

Marcel Jackwerth · Accepted Answer · 2011-04-01 12:58:09Z

1

JavaScript cannot access the file-system / serialize file fields (HTML5 allows a different approach, but I don't think that this solution is what you are looking for). You have to use a real form in an iframe to achieve an AJAXy upload - or use flash (best used with an uploader like SWFUpload or Plupload).

I advise you to read this article. Most relevant for you is the section Step 6. Using iframes and responds_to_parent.

answered Apr 1, 2011 at 12:58

Marcel Jackwerth

54.9k9 gold badges78 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vineeth Pradhan Over a year ago

I had a doubt on that serialize thing. You are probably right. I'll give both Plupload and SWFupload a try

Kelly · Accepted Answer · 2011-04-01 12:59:01Z

You are trying to upload a file via an XMLHTTPRequest, which is not doable. I use plupload to do an AJAX-like upload. Here are my settings for rails -- make sure to pass in the authenticity token:

settings = $.extend({
  runtimes : 'gears,html5,flash,silverlight,browserplus',
  browse_button : this.attr('id'),
  max_file_size : '20mb',
  unique_names : true,
  flash_swf_url : '/javascripts/plupload/plupload.flash.swf',
  silverlight_xap_url : '/javascripts/plupload/plupload.silverlight.xap',
  filters : [
    {title : "Image files", extensions : "jpg,gif,png"},
    {title : "Zip files", extensions : "zip,gz,bz2,tar"}
  ],
  multipart: true,
  multipart_params: {
     "authenticity_token" : $("input[name=authenticity_token]").val(),
     "_method" : "put",
     "field" : 'file'
    }
}, settings);

Collectives™ on Stack Overflow

Ajaxy file upload issue in Rails using jQuery / Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related