Submitting a form with remote truth in Rails 4

Question

I have a form for updating an image from

<%= form_for current_user, url: update_image_user_path(current_user), method: :post, html: {multipart: :true, remote: true}, :authenticity_token => true do |f| %> 

action has

 respond_to do |format| format.js format.html end 

but I get the following error:

 ActionView::MissingTemplate - Missing template users/update_image, application/update_image with {:locale=>[:en], :formats=>[:html], :handlers=>[:erb, :builder, :raw, :ruby, :coffee]}. 

I do not have update_image.html.erb template, but from the error I find out that the request is not sent as js format

What am I missing?

Answer 1

There are a few things you should know.

• Ajax uses something called xmlhttprequest to send your data. Unfortunately, xmlhttprequests cannot send files. Remotipart may work, but there is much more documentation on jqueryfileupload, as well as rails with rollers. It is used by many sites (many that do not even use rails). I would suggest using jqueryfileupload-rails gem with rails:

  but. https://github.com/tors/jquery-fileupload-rails
  B. http://railscasts.com/episodes/381-jquery-file-upload

• remote: true is not an html attribute. Change your tho code:

   <%= form_for current_user, url: update_image_user_path(current_user), method: :post, html: {multipart: :true}, remote: true, :authenticity_token => true do |f| %> 

The most important part of the error you encounter is this:

 :formats=>[:html] 

That should say:

 :formats=>[:js] 

With remote: true in the right place, the error should disappear.

Answer 2

rails remote true will not work to load an image. You cannot upload an image using ajax using only remote true. You need jquery.form.js file for user ajaxForm. To do this, turn on

  <script src="http://malsup.github.com/jquery.form.js"></script> 

and snap the form

  $("#formid").ajaxForm() 

Alternatively you can use jqueryfileupload-rails gem

https://github.com/tors/jquery-fileupload-rails

Answer 3

What about html: {multipart: :true}, remote: true instead of html: {multipart: :true, remote: true} ?