How to render @ photo.errors with json (using dropzone.js in Rails 4)
Heroku Console:
Start POST "/ photos"
Processing with photosController # create as JSON
Parameters: {"utf8" => "✓", "authenticity_token" => "D5pc72xeJ6J / g ==", "photo" => {"title" => "fffffffffffffffffffffffffffffffffffffffffffffffffffffffff "," 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 errors in 941 ms (ActiveRecord: 13,
9ms ) ArgumentError ('#, @messages = {: title => ["too long (max 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');
});
});
Errors are not displayed in the view when validation fails. There is only an "X" above the dropzone thumbnail with the hang message "Internal Server Error". The sketch is still displayed in view even though it has already been deleted. If I click the submit button again, the form is rendered as html because there is no photo in dropzone / no json to submit.
source to share
So I figured that instead of worrying about it with Rails Active Record authentication errors inside the form, which might not even be possible since the form is submitting json and the Rails helpers might not tune in to work that way, I decided to just do this manually with the .js file itself inside dropzone.on('error', function(file, errorMessage)
, adding errors to the view.
source to share