Rails + ajaxForm: Use the 'error' callback when error uploading file

Question

Background

I first wanted to upload a file via json and get a response in that way as well.

I'm using:

Rails 3
ajaxForm

I soon found out that you can't get a reponse in json. So, I follow that advice and returned as text.

I'm able to get things working after removing the pre tags. Ugly solution, but it's an ugly problem.

Problem

Now, my problem is handling errors.

Here's the JS:

$('form#new_image').submit(function() {
  $(this).ajaxSubmit({
    dataType: 'text',
    beforeSubmit: showLoading,
    success: imageUploadSuccess,
    error: imageUploadError
  });
  return false;
});

function imageUploadSuccess(data) {
  var jsonObject = $.parseJSON((/<pre>(.+)<\/pre>/.exec(data))[1]);
  //Do something
}

function imageUploadError(data) {
  alert("FAIL!");
}

Even if I respond with an error, the success callback (imageUploadSuccess) is always executed.

Here's my controller:

def create
  @image = Image.new params[:file]
  @image.imageable_type = params[:imageable_type]
  @image.imageable_id = params[:imageable_id]

  respond_to do |f|
    if @image.save
      logger.debug "PASSED"
      f.text {render :text => @image.to_json}
    else
      logger.debug "FAIL"
      f.text { render :text => "Fail!", :status => 500 }
    end
  end
end

Now, while I could return a json object with success: false in it when it fails, it just feels dirty that the success callback is always executed.

How do I make use of the error callback?

you shouldn't rely on a plugin for submitting a form if it leads to too much constraints. There are few lines of js to make: preventing the default submission, making an ajax call with post. From there you can handle whatever case you wish — apneadiving, Mar 02 '11 at 15:15

apneadiving · Answer 1 · 2011-03-02T15:25:02.640

1

Here is some generic jQuery code to make your ajax submission:

$('#btn-submit').click(function(event){
    event.preventDefault();
    $.ajax({
        type: "POST",
      url: $('form').attr('action'),
      data:  $('form').serialize(),
      success: function(data) {},
      error: function(data) {}
    });
});

EDIT:

I just saw you're willing to upload file with ajax. Ajax doesn't allow this kind of processing, but there are great alternatives.

I give two examples here (two branches): https://github.com/apneadiving/Pic-upload---Crop-in-Ajax

with uploadify using flash
with jQuery Uploader, 100% js (using frames)

edited Mar 02 '11 at 15:25

answered Mar 02 '11 at 15:20

apneadiving

114,565
26
219
213

Thanks, I've been tinkering with fileUpload the past couple of hours, but when I do single file uploads I seem to be fighting the system too much. I'll just try this without the ajaxForm as I stated above, and just the "generic jQuery" way. I'll update you on this. – Ramon Tayag Mar 02 '11 at 18:18
As I wrote, uploading a file with ajax requires a tailored tool. It won't work with a simple form. – apneadiving Mar 02 '11 at 20:27

score 0 · Accepted Answer · answered Mar 02 '11 at 19:17

It seems that whether you use .ajax or .ajaxForm to submit it, as long as the server responds, the success callback will be executed.

So, I have to reply with specially structured json that has a success: true/false depending on the situation. It's best illustrated with the controller action (I'm using inherited_resources here, but you get the idea):

def create
  create! do |success, failure|
   success.html {redirect_to to}
   success.text do
     image = {
       :id => @image.id,
       :file_name => @image.file_name,
       :success => true
     }
     render :text => image.to_json
   end
   failure.text do
     image = {
      :success => false,
      :errors => @image.errors
     }
     render :text => image.to_json
   end
   success.js
  end
end

"It seems that whether you use .ajax or .ajaxForm to submit it, as long as the server responds, the success callback will be executed." is __wrong__. If the server responds with a error status the error handler __will__ be ran. — Derek Litz, Mar 27 '13 at 23:02

Rails + ajaxForm: Use the 'error' callback when error uploading file

Background

Problem

Here's the JS:

Here's my controller:

2 Answers2