Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Comment for the closed issue #1779 #1788

Closed
13 tasks
Gritmatch opened this issue May 18, 2022 · 1 comment
Closed
13 tasks

Comment for the closed issue #1779 #1788

Gritmatch opened this issue May 18, 2022 · 1 comment

Comments

@Gritmatch
Copy link

Gritmatch commented May 18, 2022

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
Copy link
Owner

kartik-v commented May 19, 2022

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

image

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

image

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

image

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:

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants