Comment for the closed issue #1779

[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

Thank you for the fix #1779
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);

})

By the way the description for (enh #1779): New plugin method showUserError and new event fileusererror.
However, in the code sample that follows fileuploaderror is shown and not fileusererror. I tried using fileusererror event, does not seem to work.

Expected behavior and actual behavior

I was also expecting to continue getting other messages such as when maximum number of files is reached. I am not getting the message anymore, it is replaced with userMessage. See screenshot.
Based on the settings below I expect to see 'Maximum number of files is 5.' when I add file number 6 instead of 'We could not process the upload because of a server error.'

Here are my settings.

maxTotalFileCount: 5,
msgTotalFilesTooMany: 'Maximum number of files is 5.',

Same with these settings. I see 'We could not process the upload because of a server error.' instead of message defined in msgFilesTooMany setting.

maxFileCount: 3,
msgFilesTooMany: 'Maximum of 3 files per upload is allowed. You can do multiple uploads.',

Environment

Browsers

• 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]

There are some enhancements provided - but some of your other experience is not expected (e.g. why your file name is not getting displayed in errors). Anyway, for clarifying this enhancement, to the showUserError you can pass a 3rd boolean parameter retainErrorHistory which defaults to false. If you set it to true the previous errors in the stack will be shown. Refer following 4 use case test scenarios

SCENARIO 1

retainErrorHistory = false (DEFAULT)

CODE:

var $input = $('#file-input-id');
$input.on('fileuploaderror', function(event, data) {
  var userMessage = 'We could not process the upload because of a server error.',
      retainErrorHistory = false; // whether to retain error history
  // to show error specific to each file pass `data` as received above (the `data` object must contain the `fileId` property)
  $input.fileinput('showUserError', userMessage, data, retainErrorHistory);

  // 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); 
});

SCREENSHOT

SCENARIO 2

retainErrorHistory = true

CODE:

var $input = $('#file-input-id');
$input.on('fileuploaderror', function(event, data) {
  var userMessage = 'We could not process the upload because of a server error.',
      retainErrorHistory = true; // whether to retain error history
  // to show error specific to each file pass `data` as received above (the `data` object must contain the `fileId` property)
  $input.fileinput('showUserError', userMessage, data, retainErrorHistory);

  // 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); 
});

SCREENSHOT

SCENARIO 3

Other Checks (MaxFileCount)

CODE:

var $input = $('#file-input-id');
$input.fileinput({
    uploadUrl: "http://localhost/path/to/upload",
    maxFileCount: 3
}).on('fileuploaderror', function(event, data) {
  var userMessage = 'We could not process the upload because of a server error.',
      retainErrorHistory = true; // whether to retain error history
  // to show error specific to each file pass `data` as received above (the `data` object must contain the `fileId` property)
  $input.fileinput('showUserError', userMessage, data, retainErrorHistory);

  // 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); 
});

SCREENSHOT

SCENARIO 4

Show generic error not specific to each file

(do not pass data to showUserError)

CODE:

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 a constant global error not specific to each file do not pass `data` (uncomment below line to achieve this)
 $input.fileinput('showUserError', userMessage); 
});

SCREENSHOT: