Answers

• allan Posts: 61,635Questions: 1Answers: 10,092 Site admin

  February 2020

  Thank you for your kind words .

  Your error callback isn't being called because Editor's own error handler is overwriting it I'm afraid. This is what Editor uses:

              error: function ( xhr ) {
                  editor._event( 'uploadXhrError', [ conf.name, xhr ] );
                  editor.error( conf.name, generalError );
  
                  progressCallback( conf );
              }
  

  uploadXhrError is the error that is triggered and that can be used to control the errors to some extent, but that second line in the function means that the field error will always be shown regardless of what the error event handler does.

  In retrospect, based on your use case, that is back to front. I'll swap the order of those two for the next release. You might want to do that in your local copy if you want full control of the error messages until then.

  Regards,
  Allan
• theAnimalix Posts: 35Questions: 12Answers: 2

  February 2020

  Hey Alan,

  Thank you very much for your reply. ...just giving credits where they belong. Btw, is Alan = Team (I think I only see you replying here)?

  Sorry, I realized that uploadXhrError is actually in documentation, so should check better next time.

  But right, that 2nd line in source code is a bit problematic since it always shows form error, but instead I would need to show upload field error (411 error is returned if image validation fails...png,size,dimensions,...).

  However, I don't see how switching the order of those 2 lines would solve this...since editor.error() would still get called and form error rendered (I tested it here). I guess the only workaround would be to manually hide displayed form error and manually display field error?

  I feel the best solution to this problem (if it's possible) would be to allow us to use the same callbacks that editor uses for ajax requests:

  $.fn.dataTable.Editor({
     //....
     ajax: dtEditorAjaxCall,
     //...
  }
  
  function dtEditorAjaxCall(method, url, data, success, error) {
      $.ajax({
          //... general ajax stuff
          success: function (response) {
              success(response);
          },
          error: function (xhr, e, thrown) {
              let data = xhr.responseJSON;
              if (data && data.hasOwnProperty('fieldErrors'))
                  success(data);
              else
                  error(xhr, e, thrown);
          }
      });
  }
  

  This way in my code I can call success(data) if there was a validation error...which will then display field errors correctly (without form error). In other/unhandled cases I just call error(xhr, e, thrown) callback to show the form error.
• allan Posts: 61,635Questions: 1Answers: 10,092 Site admin

  February 2020

  Btw, is Alan = Team (I think I only see you replying here)?

  Nope. Thankfully(!) Colin is on the case here in the forum for the majority of support threads. And Sandy is getting more involved (we are a team of three now - although yes, I'm the original developer - it means they have to call me "boss" ;-) ).

  I guess the only workaround would be to manually hide displayed form error and manually display field error?

  If you do editor.error(''); in the call back, it should result in nothing being shown to the end user since the browser will queue draw updates.

  If that doesn't work for you, I'll look at allowing a preventDefault type behaviour. I'd rather keep the error handler as is, otherwise you'll need to reimplement some of the internal upload logic Editor has in order to reset on error.

  Allan
• theAnimalix Posts: 35Questions: 12Answers: 2

  February 2020

  OK, Boss. Happy to hear that you have help and team is growing!

  Oh, you are right...I didn't think about calling error on editor directly....thanks for the hint! The error is actually a field error, so one also has to pass field name.

  I just implemented it for 1 upload field in form, and code looks like this:

  DT_EDITOR.on('uploadXhrError', function (e, fieldName, xhr) {
          let data = xhr.responseJSON;
          if (data && data.fieldErrors){
              //override default form field error with validation error message
              DT_EDITOR.error(fieldName, data.fieldErrors[0].status);
          }
      });
  

  Plus as you've suggested I switched the lines order in DT editor source code. It's seems like a good solution.

  I guess this should also work for multiple upload inputs on a single form (I only tested with 1).

  Thank you Allan again and good luck!