Get JSON ParserError when trying to edit a record

[Alex Deering]

So everything works when creating a record in the database for the first time, but if I go to edit and submit changes i get an error on the image.  Here is my form code:

<%= simple_form_for recipe, validate: true, html: {multipart: true} do |f| %>
    <div>
    <%= f.input :image, as: :hidden, value: recipe.cached_image_data, input_html: {id: 'image-data__field'} %>
    </div>
    <div class="row add-recipe__title">
      <div class="col-xs-12">
        <h3>Recipe Title</h3>
        <div class="mdl-textfield mdl-js-textfield">
          <%= f.input :name, label_html: {class: 'mdl-textfield__label'}, input_html: {class: 'mdl-textfield__input'}, required: true %>
        </div>
      </div>
    </div>
    <div class="row center-xs middle-xs submit-row">
      <%= f.button :submit, "Save Recipe", class: 'mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent' %>
    </div>
<% end %>

the error is JSON::ParseError in RecipesController#update, with 765: unexpected token at .....shows the long output of the cached image data

[Janko Marohnić]

Does this happen when you update the image, or update other fields and the image stays intact? Because if you update other fields, `recipe.cached_image_data` should actually return `nil` on the update action, because it only returns the cached attachment if it has changed and the changes have not been saved (e.g. when edit form is re-rendered when validation failed).

Can you copy-paste the "recipe[image]" param value from the Rails logs that was submitted in the form? If you're seeing the regular Shrine JSON data, I'm wondering why it's not parsing correctly.

Kind regards,

Janko

--
You received this message because you are subscribed to the Google Groups "Shrine" group.
To unsubscribe from this group and stop receiving emails from it, send an email to ruby-shrine+unsubscribe@googlegroups.com.
To post to this group, send email to ruby-...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/ruby-shrine/a5004fd7-2938-4f76-a39a-01d7811f6da7%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Alex Deering]

So it happens when i update other fields.  It seems to be returning info in the recipe image.  Here is the param that is being sent (highlighted the image part):

Parameters: {"utf8"=>"✓", "authenticity_token"=>"YjR5EXeYhAYgtyP22mAFyYsImdt/CLy9CNmKBRktAcm7jmCDxrC20B8fEpGorZgGnk3GnOCvsfyVXuG+Cv2+FA==", "recipe"=>{"image"=>"{:original=>#<ImageUploader::UploadedFile:0x007f048ae677c0 @data={\"id\"=>\"a8dd1480a9114cca8fac3d31745ccdb2.jpg\", \"storage\"=>\"store\", \"metadata\"=>{\"size\"=>92403, \"filename\"=>[\"20100309-small-plates-Japan-karaage-large-thumb-625xauto-80202.jpg\"], \"mime_type\"=>\"image/jpeg\", \"width\"=>625, \"height\"=>469}}>, :thumb=>#<ImageUploader::UploadedFile:0x007f048ae67658 @data={\"id\"=>\"3b52946308b38fbdacdf884ed9f0bc2a.jpg\", \"storage\"=>\"store\", \"metadata\"=>{\"filename\"=>\"shrine-s320170808-1-dsfr34.jpg\", \"size\"=>15810, \"mime_type\"=>\"binary/octet-stream\", \"width\"=>200, \"height\"=>150}}>, :browse=>#<ImageUploader::UploadedFile:0x007f048ae674f0 @data={\"id\"=>\"3c60244f8d1e53a6b3dfde431742e197.jpg\", \"storage\"=>\"store\", \"metadata\"=>{\"filename\"=>\"shrine-s320170808-1-1v7v8e2.jpg\", \"size\"=>66838, \"mime_type\"=>\"binary/octet-stream\", \"width\"=>500, \"height\"=>375}}>, :show=>#<ImageUploader::UploadedFile:0x007f048ae67388 @data={\"id\"=>\"388a60dc423f73e34fda460ccc200e41.jpg\", \"storage\"=>\"store\", \"metadata\"=>{\"filename\"=>\"shrine-s320170808-1-1f183qo.jpg\", \"size\"=>92354, \"mime_type\"=>\"binary/octet-stream\", \"width\"=>625, \"height\"=>469}}>}", "name"=>"Japanese Fried Chicken Karaage", "servings"=>"4.0", "minutized_active_time"=>"31 mins", "minutized_total_time"=>"1 hr 0 mins", "course_id"=>"1", "description"=>"Karaage is Japanese-style fried chicken made with a flavorful soy-based marinade. It comes out light, crispy, and full of flavor. If you've never cooked with potato starch, this recipe will convince you that you must keep it in your pantry at all times. Once you've tried this, you will never make fried chicken any other way.", "recipe_ingredients_attributes"=>{"0"=>{"order"=>"1", "ingredient"=>"1/2 cups buttermilk", "_destroy"=>"false", "id"=>"15"}, "1"=>{"order"=>"2", "ingredient"=>"2 inch piece fresh ginger, thinly sliced", "_destroy"=>"false", "id"=>"16"}, "2"=>{"order"=>"3", "ingredient"=>"2 cloves garlic, thinly sliced", "_destroy"=>"false", "id"=>"17"}, "3"=>{"order"=>"4", "ingredient"=>"3 scallions, thinly sliced", "_destroy"=>"false", "id"=>"18"}, "4"=>{"order"=>"5", "ingredient"=>"2 tablespoons sesame oil", "_destroy"=>"false", "id"=>"19"}, "5"=>{"order"=>"6", "ingredient"=>"2 tablespoons soy sauce", "_destroy"=>"false", "id"=>"20"}, "6"=>{"order"=>"7", "ingredient"=>"1 tablespoon light brown sugar", "_destroy"=>"false", "id"=>"21"}, "7"=>{"order"=>"8", "ingredient"=>"1/4 teaspoons fine sea salt", "_destroy"=>"false", "id"=>"22"}, "8"=>{"order"=>"9", "ingredient"=>"6 medium chicken thighs", "_destroy"=>"false", "id"=>"23"}, "9"=>{"order"=>"10", "ingredient"=>"3 cups potato starch", "_destroy"=>"false", "id"=>"24"}, "10"=>{"order"=>"11", "ingredient"=>"Peanut oil for frying", "_destroy"=>"false", "id"=>"25"}}, "recipe_steps_attributes"=>{"0"=>{"order"=>"1", "step"=>"Put buttermilk, ginger, garlic, scallions, soy sauce, sesame oil, brown sugar, and salt in a medium bowl and whisk until smooth.", "id"=>"10"}, "1"=>{"order"=>"2", "step"=>"Lay one chicken thigh skin side down on a cutting board, with the bone running vertically, and use a sharp paring knife to cut down the center to the bone, from top to bottom. Gently slide the knife horizontally to the left to butterfly the meat, being careful not to cut all the way through it. Carefully open the flap and lightly score the meat in a crosshatch pattern, being careful not to cut all the way through the meat. Repeat on the right side of the thigh. Add the thigh to the bowl with the marinade and repeat with the remaining 5 thighs.", "id"=>"11"}, "2"=>{"order"=>"3", "step"=>"Mix the thighs and marinade together, coating each piece thoroughly. Transfer the meat and marinade to a large zipper-lock bag, press out as much air as possible, and seal the bag. Put the bag in a shallow bowl in the refrigerator and marinate for 12 to 24 hours, turning the bag occasionally to distribute the marinade evenly.", "id"=>"12"}, "3"=>{"order"=>"4", "step"=>"Preheat the oven to 200°F (95°C). Line a baking sheet with parchment paper. Set a wire rack on another baking sheet. Put the potato starch in a large bowl.", "id"=>"13"}, "4"=>{"order"=>"5", "step"=>"Remove one chicken thigh from the marinade, brushing off any pieces of garlic, ginger, or scallion, and add to the potato starch. The marinade clinging to the chicken will help the starch adhere to the meat. Roll the thigh in the potato starch, coating it thoroughly, then put it on the parchment-lined baking sheet. Repeat with the remaining thighs. Then, beginning with the first thigh, dredge each one a second time in the potato starch and return it to the parchment-lined pan.", "id"=>"14"}, "5"=>{"order"=>"6", "step"=>"Set a large cast iron skillet on the stovetop and add 1 1/2 inches of oil. Heat over medium-high heat until the oil reaches 375°F (190°C). Once the oil has come to temperature, add 2 or 3 chicken thighs to the skillet, depending on its size (be careful not to crowd the pan), and fry for about 8 minutes, until the bottom sides are golden brown. Flip the thighs and cook for another 8 minutes, or until they are a deep golden brown on the other side. Transfer to the rack set over the baking sheet and slide into the oven to keep warm. Fry the remaining chicken thighs, transferring them to the oven as they are done. If not serving immediately, turn off the oven and prop the oven door open a crack so that the thighs remain warm and crisp.", "id"=>"15"}, "6"=>{"order"=>"7", "step"=>"Put the fried chicken on a platter and serve family style, with your favorite accompaniments.", "id"=>"16"}}, "equipment_list"=>["", "Deep Fryer", "cast iron skillet"], "cuisine_list"=>["", "Japanese"], "technique_list"=>["", "Frying"]}, "commit"=>"Save Recipe", "id"=>"20"}

Enter code here...

To unsubscribe from this group and stop receiving emails from it, send an email to ruby-shrine...@googlegroups.com.

[Alex Deering]

So I figured out what was happening.  I had renamed the id of the input for use with dropzone, but since it was no longer recipe_image it wasnt processing right.  left the id alone and adjusted the dropzone code and now it all works fine.

On Tuesday, August 8, 2017 at 11:12:57 AM UTC-7, Janko Marohnić wrote:

To unsubscribe from this group and stop receiving emails from it, send an email to ruby-shrine...@googlegroups.com.

[Janko Marohnić]

If you see from the Rails logs, the param that is being sent is not the JSON data, it's a Ruby object converted into a string (you can see an "ImageUploader::UploadedFile" instance there). This means that `recipe.cached_image_data` wasn't applied as the value of that field, but rather SimpleForm still populated the field value with the model attribute value converted to a string (which is SimpleForm's default behaviour). This happened because with SimpleForm you actually have to set the field value with `input_html: {value: ...}` instead of just `value: ...` (SimpleForm doesn't recognize `:value`).

Kind regards,

Janko

To unsubscribe from this group and stop receiving emails from it, send an email to ruby-shrine+unsubscribe@googlegroups.com.

To post to this group, send email to ruby-...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/ruby-shrine/30f1f18f-89e5-4cac-a071-6adc5d7248bd%40googlegroups.com.