how do I render @photo.errors with json (using dropzone.js in Rails 4)

Question

Heroku Console:

Started POST "/photos"
Processing by PhotosController#create as JSON
Parameters: {"utf8"=>"✓", "authenticity_token"=>"D5pc72xeJ6J/g==", "photo"=>{"title"=>"fffffffffffffffffffffffffffffffffffffffffffffffffffff", "tag_list"=>[""], "picture"=>#, @original_filename="size.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"photo[picture]\"; filename=\"size.jpg\"\r\nContent-Type: image/jpeg\r\n">}, "null"=>"", "commit"=>"Upload"}
Completed 500 Internal Server Error in 941ms (ActiveRecord: 13.9ms)
ArgumentError ('#, @messages={:title=>["is too long (maximum is 30 characters)"]}>' is not an ActiveModel-compatible object. It must implement :to_partial_path.):
app/controllers/photos_controller.rb:40:in `block (2 levels) in create'

PhotosController

def create
  @photo = current_user.photos.build(photo_params)
    respond_to do |format|
      if @photo.save
        format.html { redirect_to @photo, notice: 'Item was successfully created.' }
        format.json { render json: @photo }
      else 
        format.html { render 'new'}
        **rb:40** (format.json { render @photo.errors, status: :unprocessable_entity } 
      end
    end
end

dropzonephotos.js

$(document).ready(function() {
  var dropzone;
  Dropzone.autoDiscover = false;
  dropzone = new Dropzone('#dropform', {
    maxFiles: 2,
    maxFilesize: 3,
    paramName: 'photo[picture]',
    headers: {
      "X-CSRF-Token": $('meta[name="csrf-token"]').attr('content')
    },
    addRemoveLinks: true,
    clickable: '.dz-default.dz-message',
    previewsContainer: '.dz-default.dz-message',
    thumbnailWidth: 200,
    thumbnailHeight: 200,
    parallelUploads: 100,
    autoProcessQueue: false,
    uploadMultiple: false
  });
  $('#item-submit').click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    if (dropzone.getQueuedFiles().length > 0) {
      return dropzone.processQueue();
    } 
    else {
      return $('#dropform').submit();
    }

  });
  return dropzone.on('success', function(file, responseText) {
    return window.location.href = '/photos/' + responseText.id;
  });
  return dropzone.on('error', function(file, errorMessage, xhr) {
    console.log('error');
  });
});

No errors are being rendered in the view when the validation fails. There is just an "X" over the dropzone thumbnail with a message on hover "Internal Server Error". The thumbnail is still shown in the view, although it has actually already been removed. If I click submit again, the form will be processed as html because there is no photo in dropzone/no json to submit.

Please see my answer: stackoverflow.com/questions/34820853/… — Kaktusiarz

Timmy Von Heiss Timmy Von Heiss · Accepted Answer · 2016-08-21T15:50:17

So I decided that instead of worrying about doing this with Rails Active Record Validation Errors inside of the form, which might not even be possible since the form is being submitted by json and the Rails helpers might not be setup to work that way, I decided to just do it manually with the .js file itself inside of dropzone.on('error', function(file, errorMessage) by appending the errors into the view.

how do I render @photo.errors with json (using dropzone.js in Rails 4)

1 Answers