fileuploaderror - return custom error message.

[Gritmatch]

Prerequisites

• [ X] I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• [X ] The issue still exists against the latest master branch of bootstrap-fileinput.
• [X ] This is not an usage question. I confirm having read the plugin documentation and demos.
• [X ] This is not a general programming / coding question. (Those should be directed to the webtips Q & A forum).
• [ X] I have attempted to find the simplest possible steps to reproduce the issue.
• I have included a failing test as a pull request (Optional).

Steps to reproduce the issue

1. fileuploaderror event has message as a parameter as was added in #559.
2. I ca see from documentation here that fileuploaderror is excluded from option to return custom message as follows:
   return { message: 'You are not allowed to do that'}.
3. Setting up msgAjaxError is of no help.

Expected behavior and actual behavior

Please see this screenshot. I can get the error displayed in message parameter of the fileuploaderror. Is there any elegant way to change it and display a more user friendly error? As a last resort I can go and change the html with Java Script, but it is messy. Perhaps I did not find in the documentation something similar to return { message: 'error to display to the user'}?

Environment

Browsers

• [X ] Google Chrome
• Mozilla Firefox
• Internet Explorer
• Safari

Operating System

• Windows
• Mac OS X
• Linux
• Mobile

Libraries

• jQuery version:
• bootstrap-fileinput version:

Isolating the problem

• This bug happens on the plugin demos page
• The bug happens consistently across all tested browsers
• This bug happens when using bootstrap-fileinput without other plugins
• I can reproduce this bug in a jsbin

[kartik-v]

To show a custom error message its recommended if you catch all exceptions in your server UPLOAD code and return the right validation error message via the server. For example the server code in your uploadUrl can return a JSON with the key error to show the custom error message as mentioned in the docs for sending message from server.

The above is the most optimal method IMO... but do check and let know. The fileuploaderror was excluded from that error trapping capability unlike others due to some genuine issues like you do not want to abort and freeze/lock the input and get user to continue from that point for files which have not errored out (multiple upload). This happens with some of the other events errors where you have to freeze the input preventing any further updates until the user clears and restarts (e.g. max files allowed).

[Gritmatch]

I am currently using JSON key error in my server catch statements and it works for most use cases. I agree this is the best approach to display server errors.

However, this use case is different as the error happens due to server memory issues. This is a fatal error, which I can catch in PHP register_shutdown_function, but I cannot be sure at that point what exactly caused memory issues. In short, in this case I am not able to return error key with JSON. At least I don't think I can (maybe I am wrong). As a result, user sees an ugly error message which reveals more than error message should reveal. So, I want to change it on the client end within the fileuploaderror event.

Perhaps there is a way to enable just to change the error message within fileuploaderror without aborting and locking the input (as you described above).

[kartik-v]

Noting a possible enhancement to see if there is a way to trigger a custom message for such cases.

[kartik-v]

There is a new enhancement added to achieve these scenarios and a new plugin method showUserError has been added along with a new plugin event fileusererror.

To show your own custom user error - you can use the following enhanced method showUserError as shown below:

var $input = $('#file-input-id');
$input.on('fileuploaderror', function(event, data) {
  var userMessage = 'We could not process the upload because of a server error.';

  // to show error specific to each file pass the data as received above - pass `data` (the data object must contain the `fileId`)
  $input.fileinput('showUserError', userMessage, data);

  // to show a constant global error not specific to each file do not pass `data` (uncomment below line to achieve this)
  // $input.fileinput('showUserError', userMessage); 
});

[Gritmatch]

Thank you for the fix!
I am a little unsure though what is the expected behavior for the option when data is being passed. The comment states that it is to show error specific to each file. Does this mean that file name will be displayed in front of the error message? Currently it does not display.

Below is the code I use and here is the screenshot of the output. I was uploading 3 files and got 1 error, which is displayed as a custom error message. There is no file specific data (such as filename) in the error. Data contains the fileId property.

.on('fileuploaderror', function (event, data, msg) {

            console.log(event);
            console.log(data);
            console.log(msg);

            let userMessage = 'We could not process the upload because of a server error.';

            // to show error specific to each file pass `data` as received above (the `data` object must contain the `fileId` property)
            jQuery('#profilealbum-dropzone').fileinput('showUserError', userMessage, data);

})