Filepond: Add in custom error message handler

[madrussa]

Hello,

It would be super useful to be able to add in custom error messages (e.g. why the upload failed). A handler for returning a custom message would be really useful in this case. For example when returning a 422 unprocessable entity, I would like to display why it's unprocessed.

onErrorMsg = (error, message[, response, file]) => {
    if (response && error === 'labelFileProcessingError') {
        return response.body;
    }
    return message;
}

error = error key from labels
message = default error message also from labels
response = when there was a response from the server that wasn't a 200
file = the file that couldn't be uploaded if it exists

or something to that respect, it could be we'd need to return a promise or resolve a promise for the message. In case the response is json encoded.

[rikschennink]

Hi!

Both error labels can also be set to a function, in which case they receive the server error response and the string returned is set to the FilePond error view. I'm sorry this is not documented very well at the moment, it's been a crazy busy month.

[madrussa]

Wonderful, thanks for your help!

[madrussa]

Hmm, just updated to latest version and the current label function only provides the "error" argument as does the "process-error" event which is used to trigger the label call. The action creating the error doesn't pass through any error handling so the body of the message is just set to the statusText from the response object...

My response although a 422 does return error information on why the upload failed or why the file could not be processed:

{"error": "Upload failed, invalid JSON"}

I appreciate that I could add a plugin to check the file before upload... however I would still need to perform the server side validation anyway. It would make sense that instead of validating the file multiple times to be able to just parse the response body, pull out the error message and show that. Saves having two teams maintaining the same validation logic as well.

I will create a plugin for the mean time to handle the logic, but I still believe this would be a good feature to include in the future. When life is less CRAZY BUSY! 8-)

[rikschennink]

You can additionally use the onerror on the server.process object to filter out the request. I think that should give enough flexibility?

[madrussa]

Yes, I missed that bit scanning through the code. Using the onerror on the server object has allowed me to decode and return an appropriate message.

Example below for others:

<FilePond
  acceptedFileTypes={['application/json']}
  server={{
    process: {
      onerror: (json) => {
        const result = JSON.parse(json);
        return _.get(result, 'error', null);
      }
    }
  }}
  labelFileProcessingError={(error) => error.body}
/>

It should be obvious that I will also need to add in some error handing around parsing the JSON etc to ensure it doesn't fall over in case of a very bad response.

Thanks again @rikschennink !

[rikschennink]

No problem @madrussa , sorry the docs are not more clear about this, will improve in the future 👍