Fix #307: Allow setting thumbnail frame style and attributes via `initialPreviewConfig`

CHANGE.md

@@ -14,6 +14,7 @@ version 4.2.1
       The `event` can be set to return `false` to abort the thumbnail removal.
 7. (enh #302): Add Greek (el) translations.
 8. (enh #303): Validate only files to be dragged and dropped.
+9. (enh #307): Allow setting thumbnail frame style and attributes via `initialPreviewConfig`.
 
 version 4.2.0
 =============

README.md

@@ -235,6 +235,8 @@ _array_, the configuration for setting up important properties for each `initial
     - `width`: _string_, the CSS width of the image/content displayed.
     - `url`: _string_, the URL for deleting the image/content in the initial preview via AJAX post response. This will default to `deleteUrl` if not set.
     - `key`: _string|object_, the key that will be passed as data to the `url` via AJAX POST.
+    - `frameClass`: _string_, the additional frame css class to set for the file's thumbnail frame.
+    - `frameAttr`: _object_, the HTML attribute settings (set as key:value pairs) for the thumbnail frame.
     - `extra`: _object|function_, the extra data that will be passed as data to the initial preview delete url/AJAX server call via POST. This will default to `deleteExtraData` if not set.
 
 An example configuration of `initialPreviewConfig` (for the previously set `initialPreviewContent`) can be:
@@ -259,6 +261,11 @@ initialPreviewConfig: [
         width: '120px', 
         url: '/localhost/avatar/delete', 
         key: 101, 
+        frameClass: 'my-custom-frame-css',
+        frameAttr: {
+            style: 'height:80px',
+            title: 'My Custom Title',
+        },
         extra: function() { 
             return {id: $("#id").val()};
         },

js/fileinput.js

@@ -66,21 +66,31 @@
                     (all ? previewCache.data[id].content.length : previewCache.fetch(id).length) : 0;
             },
             get: function (id, i, isDisabled) {
-                var ind = 'init_' + i, data = previewCache.data[id],
-                    previewId = data.initId + '-' + ind, out;
+                var ind = 'init_' + i, data = previewCache.data[id], config = data.config[i], 
+                    previewId = data.initId + '-' + ind, out, $tmp, frameAttr = {},
+                    frameClass = ' file-preview-initial';
                 isDisabled = isDisabled === undefined ? true : isDisabled;
                 if (data.content[i] === null) {
                     return '';
                 }
+                if (!isEmpty(config.frameClass)) {
+                    frameClass += ' ' + config.frameClass;
+                }
                 out = data.template
                     .repl('{previewId}', previewId)
-                    .repl('{frameClass}', ' file-preview-initial')
+                    .repl('{frameClass}', frameClass)
                     .repl('{fileindex}', ind)
                     .repl('{content}', data.content[i])
                     .repl('{footer}', previewCache.footer(id, i, isDisabled));
                 if (data.tags.length && data.tags[i]) {
                     out = replaceTags(out, data.tags[i]);
                 }
+                if (!isEmpty(config.frameAttr)) {
+                    $tmp = $(document.createElement('div')).html(out);
+                    $tmp.find('.file-preview-initial').attr(config.frameAttr);
+                    out = $tmp.html();
+                    $tmp.remove();
+                }
                 return out;
             },
             add: function (id, content, config, tags, append) {