ActionController::UnknownFormat error with Ajax request in Rails 6.0.1

Question

I've found many similar questions, but none that have been able to fix my error so far.

In my recipes.show.html.haml file I have

= simple_form_for @recipe, url: upload_photo_recipe_url, remote: true do |f|
  = f.file_field :photo, id: 'photo-uploader', class: 'd-none'
  = f.submit id: 'submit-photo', class: 'd-none'

This is submitted in my show.js file with

$('#photo-uploader').change(function() {
  $(`#edit_recipe_${recipeId}`).submit()
})

What I want is to then display this photo once it finishes uploading without refreshing the page, so in recipes_controller.rb have

def upload_photo
  @recipe = Recipe.find(params[:id])
  if @recipe.update(recipe_params)
    respond_to do |format|
      format.js
    end
  else

  end
end

The intended behaviour is to then run the upload_photo.js.erb file (currently only contains a console.log), but it never gets there.

As soon as the photo finishes uploading, I get an error page: 'ActionController::UnknownFormat in RecipesController#upload_photo', highlighting the 'respond_to do |format|' line.

What is going wrong that I cannot display reach the upload_photo.js.erb file?

Clicking through the error, I get a No route matches [GET] "/recipes/11/upload_photo" error.

Any help would be really appreciated! I've been trying to fix this for a couple of days now.

Thanks for reading!

In your form you have written `remote: true` but in the `.js` you're submitting it with jQuery. Can you make sure that submitting via jQuery isn't submitting as an html form, but as an ajax call — Moiz Mansur, Jun 18 '20 at 20:58
This post might be of help to you. What you need is an ajax request for it to reach the `format.js` https://stackoverflow.com/a/18485054/5671433 — Moiz Mansur, Jun 18 '20 at 21:08
Thanks for the help Moiz Mansur. Thanks to that link you gave, I found that updating to use $('#submit-photo').click() meant it got through to my upload_photo.js.erb file. I really appreciate the advice! — user2475306, Jun 19 '20 at 19:59
Happy to help, why are you submitting via javascript though. Why cant you let the user click in the button? — Moiz Mansur, Jun 20 '20 at 20:20
I'm doing a bit of an experimental project, that's not really the 'rails way'. There is no edit page, there's just a show page, that is editable depending on if you're the owner of the recipe on that page or not. And every element on that page is updatable via ajax, so you can add a photo, add/update/delete ingredients, and update the method without leaving the page. I didn't want to use a flow, because that doesn't give you the freedom to jump between sections like this. I work as a rails dev, but never get to develop like this (my boss would have a fit if he saw this code)... — user2475306, Jun 21 '20 at 17:51

score 0 · Accepted Answer · answered Jun 19 '20 at 19:57

The problem was with the middle line in my show.js function:

$('#photo-uploader').change(function() {
  $(`#edit_recipe_${recipeId}`).submit()
})

By updating my show.js to 'click' the form instead, as in

$('#photo-uploader').change(function() {
  $('#submit-photo').click()
})

I got through to my upload_photo.js.erb file once the photo uploaded.

ActionController::UnknownFormat error with Ajax request in Rails 6.0.1

1 Answers1