Fix #174 & Fix #175: Enhance ajax delete url and extra data in initial preview

CHANGE.md

@@ -2,9 +2,10 @@ version 4.1.8
 =============
 **Date**: 21-Feb-2015
 
-1. (bug #167): New `deleteExtraData` property for ajax deletions.
-2. (bug #171): Fix typo for files validation.
-3. (enh #173): Add ability to send extraData when no files are attached.
+1. (bug #171): Fix typo for files validation.
+2. (enh #167, #173): New `deleteExtraData` property for ajax deletions.
+3. (enh #174): New `deleteUrl` property.
+4. (enh #175): Ability to override delete extra data in `initialPreviewConfig`.
 
 version 4.1.7
 =============

README.md

@@ -211,8 +211,9 @@ _array_, the configuration for setting up important properties for each `initial
 
     - `caption`: _string_, the caption or filename to display for each initial preview item content.
     - `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.
+    - `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.
+    - `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:
 
@@ -224,14 +225,55 @@ initialPreview: [
 ],
 // initial preview configuration
 initialPreviewConfig: [
-    {caption: 'desert.jpg', 'width': '120px', 'url': '/localhost/avatar/delete', 'key': 100},
-    {caption: 'jellyfish.jpg', 'width': '120px', 'url': '/localhost/avatar/delete', 'key': 101},
+    {
+        caption: 'desert.jpg', 
+        width: '120px', 
+        url: '/localhost/avatar/delete', 
+        key: 100, 
+        extra: {id: 100}
+    },
+    {
+        caption: 'jellyfish.jpg', 
+        width: '120px', 
+        url: '/localhost/avatar/delete', 
+        key: 101, 
+        extra: function() { 
+            return {id: $("#id").val()};
+        },
+    }
 ]
 ```
 
+> Note: The ajax delete action will send the following data to server via POST:
+- `key`: the key setting as setup in `initialPreviewConfig['key']`
+- `extra`: the extra data passed either via `initialPreviewConfig['extra']` OR `deleteExtraData` if former is not set.
+
 #### initialPreviewShowDelete
 _bool_, whether the delete button will be displayed for each thumbnail that has been created with `initialPreview`.
 
+
+#### deleteExtraData
+_object | function_ the extra data that will be passed as data to the initial preview delete url/AJAX server call via POST. This will be overridden by the `initialPreviewConfig['extra']` property. This can be setup either as an object (associative array of keys and values) or as a function callback. As an object, it can be set for example as:
+
+```js
+ {id: 100, value: '100 Details'}
+```
+
+As a function callback, it can be setup for example as:
+
+```js
+function() {
+    var obj = {};
+    $('.your-form-class').find('input').each(function() {
+        var id = $(this).attr('id'), val = $(this).val();
+        obj[id] = val;
+    });
+    return obj;
+}
+```
+#### deleteUrl
+_object | function_ the URL for deleting the image/content in the initial preview via AJAX post response. This will be overridden by the `initialPreviewConfig['url']` property.
+
 #### initialCaption
 _string_ the initial preview caption text to be displayed. If you do not set a value here and `initialPreview` is set to 
 `true` this will default to `"{preview-file-count} files selected"`, where `{preview-file-count}` is the count of the 
@@ -265,6 +307,7 @@ _object_ the templates configuration for rendering each part of the layout. You
     - `{removeTitle}`: the title to display on hover for the remove button. Will be replaced with the `removeTitle` set within `fileActionSettings`.
     - `{dataUrl}`: the URL for deleting the file thumbnail for `initialPreview` content only. Will be replaced with the `url` set within `initialPreviewConfig`.
     - `{dataKey}`: the key (additional data) that will be passed to the URL above via POST to the AJAX call. Will be replaced with the `key` set within `initialPreviewConfig`.    
+    - `{dataIndex}`: will be replaced with the `index` of each row item in `initialPreviewConfig`. 
 - `actionUpload`: the template for the file upload action button within the thumbnail `footer`.
     - `{uploadClass}`: the css class for the upload button. Will be replaced with the `uploadClass` set within `fileActionSettings`.
     - `{uploadIcon}`: the icon for the upload button. Will be replaced with the `uploadIcon` set within `fileActionSettings`.
@@ -348,7 +391,7 @@ The `layoutTemplates` if not set will default to:
         '    <div class="file-upload-indicator" tabindex="-1" title="{indicatorTitle}">{indicator}</div>\n' +
         '    <div class="clearfix"></div>\n' +
         '</div>',
-    actionDelete: '<button type="button" class="kv-file-remove {removeClass}" title="{removeTitle}"{dataUrl}{dataKey}>{removeIcon}</button>\n',
+    actionDelete: '<button type="button" class="kv-file-remove {removeClass}" title="{removeTitle}"{dataUrl}{dataKey}{dataIndex}>{removeIcon}</button>\n',
     actionUpload: '<button type="button" class="kv-file-upload {uploadClass}" title="{uploadTitle}">{uploadIcon}</button>\n'
 };
 ```
@@ -648,26 +691,6 @@ function() {
 }
 ```
 
-#### deleteExtraData
-_object | function_ the extra data that will be passed as data to the initial preview delete url/AJAX server call via POST. This can be setup either as an object (associative array of keys and values) or as a function callback. As an object, it can be set for example as:
-
-```js
- {id: 100, value: '100 Details'}
-```
-
-As a function callback, it can be setup for example as:
-
-```js
-function() {
-    var obj = {};
-    $('.your-form-class').find('input').each(function() {
-        var id = $(this).attr('id'), val = $(this).val();
-        obj[id] = val;
-    });
-    return obj;
-}
-```
-
 #### maxFileSize
 _float_ the maximum file size for upload in KB.  If set to `0`, it means size allowed is unlimited. Defaults to `0`.
 

js/fileinput.js

@@ -125,7 +125,7 @@
             '    <div class="clearfix"></div>\n' +
             '</div>',
         tActionDelete = '<button type="button" class="kv-file-remove {removeClass}" ' +
-            'title="{removeTitle}"{dataUrl}{dataKey}>{removeIcon}</button>\n',
+            'title="{removeTitle}"{dataUrl}{dataKey}{dataIndex}>{removeIcon}</button>\n',
         tActionUpload = '<button type="button" class="kv-file-upload {uploadClass}" title="{uploadTitle}">' +
             '   {uploadIcon}\n</button>\n',
         tGeneric = '<div class="file-preview-frame{frameClass}" id="{previewId}" data-fileindex="{fileindex}">\n' +
@@ -622,7 +622,7 @@
                 url = isSet('url', config) ? config.url : false,
                 key = isSet('key', config) ? config.key : null,
                 disabled = (url === false),
-                actions = self.initialPreviewShowDelete ? self.renderFileActions(false, true, disabled, url, key) : '',
+                actions = self.initialPreviewShowDelete ? self.renderFileActions(false, true, disabled, url, key, i) : '',
                 footer = template.repl('{actions}', actions);
             return footer.repl('{caption}', caption).repl('{width}', width)
                 .repl('{indicator}', '').repl('{indicatorTitle}', '');
@@ -631,7 +631,7 @@
             var self = this, config = self.fileActionSettings, footer,
                 template = self.getLayoutTemplate('footer');
             if (self.isUploadable) {
-                footer = template.repl('{actions}', self.renderFileActions(true, true, false, false, false));
+                footer = template.repl('{actions}', self.renderFileActions(true, true, false, false, false, false));
                 return footer.repl('{caption}', caption)
                     .repl('{width}', width)
                     .repl('{indicator}', config.indicatorNew)
@@ -643,12 +643,13 @@
                 .repl('{indicator}', '')
                 .repl('{indicatorTitle}', '');
         },
-        renderFileActions: function (showUpload, showDelete, disabled, url, key) {
+        renderFileActions: function (showUpload, showDelete, disabled, url, key, index) {
             if (!showUpload && !showDelete) {
                 return '';
             }
             var self = this,
                 vUrl = url === false ? '' : ' data-url="' + url + '"',
+                vIndex = index === false ? '' : ' data-index="' + index + '"',
                 vKey = key === false ? '' : ' data-key="' + key + '"',
                 btnDelete = self.getLayoutTemplate('actionDelete'),
                 btnUpload = '',
@@ -661,7 +662,8 @@
                 .repl('{removeIcon}', config.removeIcon)
                 .repl('{removeTitle}', config.removeTitle)
                 .repl('{dataUrl}', vUrl)
-                .repl('{dataKey}', vKey);
+                .repl('{dataKey}', vKey)
+                .repl('{dataIndex}', vIndex);
             if (showUpload) {
                 btnUpload = self.getLayoutTemplate('actionUpload')
                     .repl('{uploadClass}', config.uploadClass)
@@ -717,18 +719,20 @@
             self.$container.removeClass('file-input-new');
         },
         initPreviewDeletes: function () {
-            var self = this, extraData = self.deleteExtraData || {}, caption, $that,
+            var self = this, deleteExtraData = self.deleteExtraData || {}, caption, $that,
                 resetProgress = function () {
                     if (self.$preview.find('.kv-file-remove').length === 0) {
                         self.reset();
                     }
                 };
-            if (typeof extraData === "function") { 
-                extraData = extraData();
-            }
             self.$preview.find('.kv-file-remove').each(function () {
-                var $el = $(this), $frame = $el.closest('.file-preview-frame'),
-                    vUrl = $el.attr('data-url'), vKey = $el.attr('data-key'), $content;
+                var $el = $(this), $frame = $el.closest('.file-preview-frame'), index = $el.data('index'), 
+                    config = isEmpty(self.initialPreviewConfig[index]) ? null : self.initialPreviewConfig[index],
+                    extraData = isEmpty(config) || isEmpty(config['extra']) ? deleteExtraData : config['extra'],
+                    vUrl = $el.data('url') || self.deleteUrl, vKey = $el.data('key'), $content;
+                if (typeof extraData === "function") { 
+                    extraData = extraData();
+                }
                 if (vUrl === undefined || vKey === undefined) {
                     return;
                 }
@@ -1731,6 +1735,8 @@
         initialPreviewDelimiter: '*$$*',
         initialPreviewConfig: [],
         initialPreviewShowDelete: true,
+        deleteUrl: '',
+        deleteExtraData: {},
         overwriteInitial: true,
         layoutTemplates: defaultLayoutTemplates,
         previewTemplates: defaultPreviewTemplates,
@@ -1760,7 +1766,6 @@
         uploadUrl: null,
         uploadAsync: true,
         uploadExtraData: {},
-        deleteExtraData: {},
         maxFileSize: 0,
         maxFileCount: 0,
         msgSizeTooLarge: 'File "{name}" (<b>{size} KB</b>) exceeds maximum allowed upload size of <b>{maxSize} KB</b>. Please retry your upload!',