Handle errors auto-uploading files.

[justiceroyale1]

When I use the auto-upload, feature my server responds with a 422 error. I want to display the message that comes with this error to the client, but I can't.

Upon inspection, I discovered that the error in the upload function for the package is not handled. Please implement an error-handling mechanism.

[MauricioMoraes]

I managed to get the error via onUploadError callback:

  var component = {
    data: function(){
      return {
        fileRecords: []
      }
    },
    methods: {
      onUploadError: function(failedResponse) {
        console.log(failedResponse[0].response.data.error_message)
      },
     (...)
  }

Like this, I can get the message my server sent inside onUploadError.

Problem now is that I couldn't find a way to retrieve the affected FileRecord so I could deal with it inside the onUploadError callback.

What I did find was that the affected FileRecord will get a flag telling the upload was failed if you return a 422 error.

I accessed it via:

{{ slotProps.fileRecord.error.upload }} // returns true for upload with 422 server response

This flag is true when there is an error. That let me show some generic error message when the server responded with a 422.

Problem is... What I wanted was to return the error message inside the FileRecord object.

So I could do something like this:

<p v-if="slotProps.fileRecord.error.upload">{{ slotProps.fileRecord.error.serverErrorMsg }}</p>

Where serverErrorMsg is a message I sent from my server. I can even change the json response to send the error message in a specific key so the lib can read it. But couldn't find it in the docs where/how to set it.

If anyone knows how to do it, I would really appreciate!