I am editing a resource - @article - and whenever I submit it I get the following error:
JSON::ParserError in ArticlesController#update
783: unexpected token at '#<ImageUploader::UploadedFile:0x00007fb154adb508>'
It has highlighted this line:
if @article.update(article_params)
Which is the normal Rails boilerplate code in my Article#Update action:
def update
respond_to do |format|
if @article.update(article_params)
format.html { redirect_to @article, notice: 'Article was successfully updated.' }
format.json { render :show, status: :ok, location: @article }
else
format.html { render :edit }
format.json { render json: @article.errors, status: :unprocessable_entity }
end
end
end
Here is the full output from the server logs (including the params):
Started PATCH "/articles/welcome-to-ftja" for ::1 at 2020-05-04 02:11:43 -0500
Processing by ArticlesController#update as HTML
Parameters: {"authenticity_token"=>"0pO56DaVEiWLX3iE3HNHRKsAPOK2z4RmUaH3jal5rOZjk7zYeoaSru9xOE9GYzLckTbnrVrz4ihXrc1hWcXzXA==", "article"=>{"title"=>"Welcome to FTJA!!", "featured"=>"true", "image"=>"#<ImageUploader::UploadedFile:0x00007fb154adb508>", "body"=>"<h1>Yet another great article.</h1><div>Test <strong>bold</strong> <em>italic</em> <del>strikethrough<br><br></del><figure data-trix-attachment=\"{"content":"<figure class=\\"attachment attachment--preview attachment--jpg\\">\\n <img src=\\"http://localhost:3000/rails/active_storage/representations/eyJfcJ2YXJpYXRpb24ifX0=--5b3d481c22cafd1ff8db36c1b24e57d8788d2217/cowork-4.jpg\\" />\\n\\n <figcaption class=\\"attachment__caption\\">\\n Coworking.\\n </figcaption>\\n</figure>\\n","contentType":"image/jpeg","filename":"cowork-4.jpg","filesize":82497,"height":768,"previewable":true,"sgid":"_ZXhwaXJlc19pbgY7AFRJIgxwdXJwb3NlBjsAVEkiD2F0dGFjaGFibGUGOwBUSSIPZXhwaXJlc19hdAY7AFQw--e56d2e422","url":"http://localhost:3000/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBEUT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--6d89ec207ef10c8e48577a5e9a170a8d178a9338/cowork-4.jpg","width":752}\" data-trix-content-type=\"image/jpeg\" data-trix-attributes=\"{"caption":"Coworking.","presentation":"gallery"}\" class=\"attachment attachment--content attachment--jpg\"><figure class=\"attachment attachment--preview attachment--jpg\">\r\n <img src=\"http://localhost:3000/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBEUT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--6d89ec207ef10c8e48577a5e9a170a8d178a9338/cowork-4.jpg\" width=\"752\" height=\"768\">\r\n\r\n <figcaption class=\"attachment__caption\">\r\n Coworking.\r\n </figcaption>\r\n</figure>\r\n<figcaption class=\"attachment__caption attachment__caption--edited\">Coworking.</figcaption></figure><br><br><br><figure data-trix-attachment=\"{"content":"<figure class=\\"attachment attachment--preview attachment--jpg\\">\\n <img src=\\"http://localhost:3000/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2F-5b3d481c22cafd1ff8db36c1b24e57d8788d2217/article-1.jpg\\" />\\n\\n <figcaption class=\\"attachment__caption\\">\\n Working, working, working.\\n </figcaption>\\n</figure>\\n","contentType":"image/jpeg","filename":"article-1.jpg","filesize":83730,"height":800,"previewable":true,"sgid":"BAh7CEkiCGdpZAY6BkVU--d99eadb00dd5ae6bb4220f5781b2946c2171604f","url":"http://localhost:3000/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBEZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--5c31ee2db4a2660d4a674dfb54375fda30251d3d/article-1.jpg","width":1200}\" data-trix-content-type=\"image/jpeg\" data-trix-attributes=\"{"caption":"Working, working, working.","presentation":"gallery"}\" class=\"attachment attachment--content attachment--jpg\"><figure class=\"attachment attachment--preview attachment--jpg\">\r\n <img src=\"http://localhost:3000/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBEZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9i6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQWdBRWFRSUFBdz09IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--5b3d481c22cafd1ff8db36c1b24e57d8788d2217/article-1.jpg\">\r\n\r\n <figcaption class=\"attachment__caption\">\r\n Working, working, working.\r\n </figcaption>\r\n</figure>\r\n<figcaption class=\"attachment__caption attachment__caption--edited\">Working, working, working.</figcaption></figure><br><br><br></div>", "user_id"=>"1", "category_list"=>["", "Business", "Real Estate"]}, "commit"=>"Update Article", "id"=>"welcome-to-ftja"}
Article Load (2.1ms) SELECT "articles".* FROM "articles" WHERE "articles"."slug" = $1 LIMIT $2 [["slug", "welcome-to-ftja"], ["LIMIT", 1]]
↳ app/controllers/articles_controller.rb:73:in `set_article'
(2.1ms) BEGIN
↳ app/controllers/articles_controller.rb:50:in `block in update'
ActionText::RichText Load (4.0ms) SELECT "action_text_rich_texts".* FROM "action_text_rich_texts" WHERE "action_text_rich_texts"."record_id" = $1 AND "action_text_rich_texts"."record_type" = $2 AND "action_text_rich_texts"."name" = $3 LIMIT $4 [["record_id", 1], ["record_type", "Article"], ["name", "body"], ["LIMIT", 1]]
↳ app/controllers/articles_controller.rb:50:in `block in update'
(1.3ms) ROLLBACK
↳ app/controllers/articles_controller.rb:50:in `block in update'
Completed 500 Internal Server Error in 27ms (ActiveRecord: 9.4ms | Allocations: 5092)
JSON::ParserError (783: unexpected token at '#<ImageUploader::UploadedFile:0x00007fb154adb508>'):
app/controllers/articles_controller.rb:50:in `block in update'
app/controllers/articles_controller.rb:49:in `update'
If you notice the category_list in the params, I believe that may be causing it:
"category_list"=>["", "Business", "Real Estate"]},
Based on some Googling I have done, it could be the empty string "" that is throwing some JSON Parsing for a loop.
One suggestion I found was to change the Cookie Serializer to :hybrid, like so:
Rails.application.config.action_dispatch.cookies_serializer = :hybrid
I tried that and restarted the server and no luck.
What could be causing this and how can I fix it?
Edit 1
At the console on the error page, I tried the following as well:
>> article_params[:category_list]
=> ["", "Business", "Real Estate"]
>> article_params[:category_list].to_json
=> "[\"\",\"Business\",\"Real Estate\"]"
>> @article.image
=> #<ImageUploader::UploadedFile storage=:store id="3b96dc3198098a9f57ff2b00a2cdb252.jpg" metadata={"filename"=>"article-3.jpg", "size"=>99083, "mime_type"=>"image/jpeg"}>
Edit 2
I am using SimpleForm to handle my forms and the truncated version of this particular form looks like this:
<%= simple_form_for article, html: {multipart: true} do |f| %>
<%= f.input_field :title, placeholder: "Title", class: "form-control" %>
<%= f.rich_text_area :body, class: 'form-control customized-min-height', placeholder: "Enter your article body here..." %>
<%= f.input :user_id, as: :hidden, input_html: { value: current_user.id } %>
<%= f.input_field :category_list, collection: ActsAsTaggableOn::Tag.all.pluck(:name), input_html: { value: article.category_list.join(","), class: "custom-control-input" }, as: :check_boxes %>
<%= f.button :submit, class:"btn btn-primary" %>
<% end %>
The above form only produces the "" when I go to Articles#Edit
This is my Articles#Edit controller action:
# GET /articles/1/edit
def edit
end
How do I fix this?
Edit 3
Ok I eventually got the form to not return that empty string by adding include_blank: false and include_hidden: false like so:
<%= f.input_field :category_list, collection: ActsAsTaggableOn::Tag.all.pluck(:name), input_html: { value: article.category_list.join(","), class: "custom-control-input" }, as: :check_boxes, include_blank: false, include_hidden: false %>
Which generates params that look like this:
>> article_params
=> <ActionController::Parameters {"title"=>"Welcome!!", "body"=>"<h1>Yet another great article.</h1><div>Test <strong>bold</strong> <em>italic</em> <del>strikethrough<br><br></del><figure data-trix-attachment=\"{"content":"<figure class=\\"attachment attachment--preview attachment--jpg\\">\\n <img src=\\"http://localhost:3000/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBd2217/cowork-4.jpg\\" />\\n\\n <figcaption class=\\"attachment__caption\\">\\n Coworking.\\n </figcaption>\\n</figure>\\n","contentType":"image/jpeg","filename":"cowork-4.jpg","filesize":82497,"height":768,"previewable":true,"sgid":"BAhaac","url":"http://localhost:3000/rails/active_storage/blobs/eya9338/cowork-4.jpg","width":752}\" data-trix-content-type=\"image/jpeg\" data-trix-attributes=\"{"caption":"Coworking.","presentation":"gallery"}\" class=\"attachment attachment--content attachment--jpg\"><figure class=\"attachment attachment--preview attachment--jpg\">\r\n <img src=\"http://localhost:3000/rails/active_storage/representations/e88d2217/cowork-4.jpg\">\r\n\r\n <figcaption class=\"attachment__caption\">\r\n Coworking.\r\n </figcaption>\r\n</figure>\r\n<figcaption class=\"attachment__caption attachment__caption--edited\">Coworking.</figcaption></figure><br><br><br><figure data-trix-attachment=\"{"content":"<figure class=\\"attachment attachment--preview attachment--jpg\\">\\n <img src=\\"http://localhost:3000/rails/active_storage/representations/eyJ8d2217/article-1.jpg\\" />\\n\\n <figcaption class=\\"attachment__caption\\">\\n Working, working, working.\\n </figcaption>\\n</figure>\\n","contentType":"image/jpeg","filename":"article-1.jpg","filesize":83730,"height":800,"previewable":true,"sgid":"B1604f","url":"http://localhost:3000/rails/active_storage/blobs/eyd3d/article-1.jpg","width":1200}\" data-trix-content-type=\"image/jpeg\" data-trix-attributes=\"{"caption":"Working, working, working.","presentation":"gallery"}\" class=\"attachment attachment--content attachment--jpg\"><figure class=\"attachment attachment--preview attachment--jpg\">\r\n <img src=\"http://localhost:3000/rails/active_storage/blobs/eyd3d/article-1.jpg\" width=\"1200\" height=\"800\">\r\n\r\n <figcaption class=\"attachment__caption\">\r\n Working, working, working.\r\n </figcaption>\r\n</figure>\r\n<figcaption class=\"attachment__caption attachment__caption--edited\">Working, working, working.</figcaption></figure><br><br><br></div>", "featured"=>"true", "user_id"=>"1", "image"=>"#<ImageUploader::UploadedFile:0x00007fd18d61b1e0>", "category_list"=>["Business", "Real Estate", "Investing"]} permitted: true>
But I am still getting the same error. So it seems there is another culprit.
After much researching and what feels like infinity trial and error I stumbled upon the fix.
Basically, what seems to be happening is whenever the form currently has an image and is being edited, if the existing image isn't handled properly then it converts the cached_image data into a string. You can see a better explanation here.
The culprit turned out to be this line in my form:
<%= f.input :image, as: :hidden, value: f.object.cached_image_data %>
Once I changed it to the following it worked like a charm:
<%= f.input :image, as: :hidden, input_html: { value: f.object.cached_image_data } %>