Fix #1779: New plugin method `showUserError` and new event `fileusererror`

CHANGE.md

@@ -6,6 +6,20 @@ Change Log: `bootstrap-fileinput`
 **Date**: _under development_
 
 - (enh #1782): Correct loading indicator reset for file selection.
+- (enh #1779): New plugin method `showUserError` and new event `fileusererror`. 
+  Usage:
+```js
+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 `data` as received above (the `data` object must contain the `fileId` property)
+  $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); 
+});
+```
 - (enh #1777): Ensure `alt` property for image is applied via intial preview config if set.
 - (bug #1775): Correct syntax error for Danish translations.
 - (bug #1773): Fix blank preview issue for large files > `maxFilePreviewSize`.

css/fileinput.css

@@ -50,6 +50,10 @@ input[type=file].file-loading {
     display: none;
 }
 
+.file-caption .input-group {
+    align-items: center;
+}
+
 .btn-file input[type=file],
 .file-caption-icon,
 .file-preview .fileinput-remove,

js/fileinput.js

@@ -2197,7 +2197,7 @@
                         sDrg = $h.ifSet('showDrag', config, $h.ifSet('showDrag', fs, true)),
                         dis = (url === false) && isDisabled;
                     sDwl = sDwl && config.downloadUrl !== false && !!dUrl;
-                    a = self._renderFileActions(config, false,sDwl, sDel, sZm, sDrg, dis, url, key, true, dUrl, dFil);
+                    a = self._renderFileActions(config, false, sDwl, sDel, sZm, sDrg, dis, url, key, true, dUrl, dFil);
                     return self._getLayoutTemplate('footer').setTokens({
                         'progress': self._renderThumbProgress(),
                         'actions': a,
@@ -2335,10 +2335,24 @@
             $error.fadeIn(self.fadeDelay);
             self._raise('filefoldererror', [folders, msg]);
         },
+        showUserError: function (msg, params) {
+            var self = this, fileName;
+            if (!params || !params.fileId) {
+                self.$errorContainer.html('');
+            } else {
+                self.$errorContainer.find('[data-file-id="' + params.fileId + '"]').remove();
+                fileName = self.fileManager.getFileName(params.fileId);
+                if (fileName) {
+                    msg = '<b>' + fileName + ':</b> ' + msg;
+                }
+            }
+            self._showFileError(msg, params, 'fileusererror');
+        },
         _showFileError: function (msg, params, event) {
             var self = this, $error = self.$errorContainer, ev = event || 'fileuploaderror',
                 fId = params && params.fileId || '', e = params && params.id ?
-                '<li data-thumb-id="' + params.id + '" data-file-id="' + fId + '">' + msg + '</li>' : '<li>' + msg + '</li>';
+                '<li data-thumb-id="' + params.id + '" data-file-id="' + fId + '">' + msg + '</li>' :
+                '<li>' + msg + '</li>';
 
             if ($error.find('ul').length === 0) {
                 self._addError('<ul>' + e + '</ul>');
@@ -2470,9 +2484,6 @@
                 case 'filereset':
                 case 'fileerror':
                 case 'filefoldererror':
-                case 'fileuploaderror':
-                case 'filebatchuploaderror':
-                case 'filedeleteerror':
                 case 'filecustomerror':
                 case 'filesuccessremove':
                     break;

scss/fileinput.scss

@@ -204,6 +204,10 @@ input[type=file].file-loading {
 .file-caption {
   @extend %set-relative;
 
+  .input-group {
+    align-items: center;
+  }
+
   .file-caption-name {
     width: 100%;
     margin: 0;