error handling during ajax file upload using jquery form plugin

Question

i have a situation where i'm stuck at the idea of catching the appropriate error during file upload in the ajax response in jquery form-plugin.

i'l give an idea of what i want to achieve through some pseudocode.

My php is :

 $file = strtolower($_FILES["myfile"]["name"]);
 $extension = substr($file, strrpos($file, '.') + 1);
 if($extension == 'jpg'){
  // upload the file
 if(move_uploaded_file($_FILES["myfile"]["tmp_name"], $folder . $finalFilename)){
  // do something here like
 echo "<div id='statusContainer'>
<table><tr><td>
<img src='uploads/".$finalFilename."'>
</td></tr>
<tr><td>".$finalts."</td></tr></table>
</div>";
       }
  } else {
  $error = 1; // will give numbers to different errors like filetype error, size error etc..
  }

now my JS code is :

 (function() {
 var status = $('#status');   
 $('form').ajaxForm({
complete: function(xhr) {
if(xhr.responseText == "// what do i get echoed here so i can run an array and show user appropriate error like size error, type error etc. // "){
     // i want to open a dialog box with correct error message//
} else{
    status.hide().html(xhr.responseText).fadeIn(1000);
    }
  }
   }); 

 })();

shall i get the error number echoed in the ajax response and run through an array to get the message? but then i'll have to put in a lot of if conditions in the ajax response with different error numbers.

Please anyone have a more logical idea??

Sudhir Bastakoti · Accepted Answer · 2013-02-08 04:43:49Z

1

you could make an array and pass error json_encode()'ing it and parse json response from ajaxForm, like php part:

$responseArr = array();
if( file_is_uploaded ) {
  $responseArr["error"] = "0";
  $responseArr["message"] = "File uploaded success message";
}
else {
  $responseArr["error"] = "1";
  $responseArr["message"] = "Error message here";
}
echo json_encode($responseArr); //pass it as response

js part::

$('form').ajaxForm({
  dataType: "json",
  success: function(response) {
      //parse json response and perform accordingly
      console.log( response );
  }
});

answered Feb 8, 2013 at 4:43

Sudhir Bastakoti

100k15 gold badges163 silver badges169 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

coder101 Over a year ago

what about the html response i'm echoing on success of upload. will mentioning datatype as "json" and then getting error response as json and success as html wud conflict?

coder101 Over a year ago

tried with different suggestions on other questions, put together all the pieces and BAM, it works like a charm... thanks sudhir...

Bob Arezina · Accepted Answer · 2013-02-08 04:45:08Z

0

To cut down on traversing an array in JS, and matching error IDs to descriptions, could you associate the error description itself to be relayed in the ajax response? This would keep your JS lean and keep error handling serverside.

Example:

<tr><td>".$finalts."</td></tr></table>
</div>";
}

$error_descriptions = array("Filesize Error", "Extension Error");

} else {
$error = error_descriptions[1]; 
}

answered Feb 8, 2013 at 4:45

Bob Arezina

845 silver badges20 bronze badges

3 Comments

coder101 Over a year ago

how will i differentiate an error from a success html response into the ajax response block?

Bob Arezina Over a year ago

if your success html response is static, then code your javascript to output the success string if the error-description is empty.

coder101 Over a year ago

sorry, i'm not following you. could u modify my JS function and give an idea of what you are suggesting me to do?

Collectives™ on Stack Overflow

error handling during ajax file upload using jquery form plugin

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related