Custom variable support for templates

[aliechti]

It would be nice if templates can support custom initial variables. I need this to pass the custom name into the text-input and to pass the initial ID into the data field to do some other actions than just delete.

This is my current approach to do this:

// Functions which are needed
var isEmpty = function (value, trim) {
    return value === null || value === undefined || value == []
    || value === '' || trim && $.trim(value) === '';
}, addCss = function($el, css) {
    $el.removeClass(css).addClass(css);
}, isArray = function (a) {
    return Array.isArray(a) || Object.prototype.toString.call(a) === '[object Array]';
};
// Extend it
var fileinputExtension = {
    renderInitFileFooter: function(i) {
        var self = this, hasConfig = self.initialPreviewConfig.length > 0,
            template = self.getLayoutTemplate('footer');
        if (hasConfig && !isEmpty(self.initialPreviewConfig[i])) {
            var config = self.initialPreviewConfig[i],
                caption = ('caption' in config) ? config.caption : '',
                width = ('width' in config) ? config.width : 'auto',
                url = ('url' in config) ? config.url : false,
                key = ('key' in config) ? config.key : null,
                disabled = url === false ? true : false,
                actions = self.initialPreviewShowDelete ? self.renderFileActions(false, true, disabled, url, key) : '',
                footer = template.replace(/\{actions\}/g, actions);
            var out = footer.replace(/\{caption\}/g, caption).replace(/\{width\}/g, width)
                .replace(/\{indicator\}/g, '').replace(/\{indicatorTitle\}/g, '');
            // MAGIC START
            $.each(config, function(index, value) {
                var regExp = new RegExp('\{' + index + '\}', 'g');
                out = out.replace(regExp, value);
            });
            return out.replace(/\{.+?\}/g, '');
            // MAGIC END
        }
        return '';
    },
    renderFileFooter: function(caption, width) {
        var self = this, config = self.fileActionSettings,
            template = self.getLayoutTemplate('footer');
        if (self.isUploadable) {
            var footer = template.replace(/\{actions\}/g, self.renderFileActions(true, true, false, false, false));
            return footer.replace(/\{caption\}/g, caption).replace(/\{width\}/g, width)
                .replace(/\{indicator\}/g, config.indicatorNew).replace(/\{indicatorTitle\}/g, config.indicatorNewTitle)
                .replace(/\{.+?\}/g, ''); // MAGIC
        } else {
            return template.replace(/\{actions\}/g, '').replace(/\{caption\}/g, caption).replace(/\{width\}/g, width)
                .replace(/\{indicator\}/g, '').replace(/\{indicatorTitle\}/g, '')
                .replace(/\{.+?\}/g, ''); // MAGIC
        }
        return '';
    },
    getInitialPreview: function(template, content, i) {
        var self = this, ind = 'init_' + i,
            previewId = self.previewInitId + '-' + ind;
        footer = self.renderInitFileFooter(i, false);
        var out = template
            .replace(/\{previewId\}/g, previewId)
            .replace(/\{frameClass\}/g, ' file-preview-initial')
            .replace(/\{fileindex\}/g, ind)
            .replace(/\{content\}/g, content)
            .replace(/\{footer\}/g, footer);
        // MAGIC START
        if (self.initialPreviewConfig.length > 0 && !isEmpty(self.initialPreviewConfig[i])) {
            var config = self.initialPreviewConfig[i];
            $.each(config, function(index, value) {
                var regExp = new RegExp('\{' + index + '\}', 'g');
                out = out.replace(regExp, value);
            });
        }
        return out.replace(/\{.+?\}/g, '');
        // MAGIC END
    },
};
$.extend($.fn.fileinput.Constructor.prototype, fileinputExtension);

[kartik-v]

Have you tried configuring otherActionButtons - you can add your own new action buttons to each file thumbnail. This is just a HTML markup in which the plugin will auto-replace the {dataKey} tag. For example to add an edit button to each thumbnail:

$("#input").fileinput({
    otherActionButtons: '<button class="btn btn-sm btn-edit" data-key="{dataKey}">' +
    '<i class="glyphicon glyphicon-edit"></i></button>'
});

// then you can write a code on click of the btn-edit as below
// build your loop for this below correctly - just an example
$(".btn-edit").on("click", function() {
    var key = $(this).data('key');
    // you can use the key in your ajax actions or using data-key 
    // trace back to the preview container DOM and its children
});

[aliechti]

Sorry, but that is not what I want. I've combined the Fileinput-Widget with your Sortable-Widget, now to send the sort-positions I need the ID's of every file. The other use is to set the value of the description of every file in the description-input.

[kartik-v]

Was suggesting an alternative of using buttons in each thumbnail to achieve use cases similar to yours... (for example button to reorder files -- or rename files through a popup or embedded input.).

Anyway, I will need to think about your ask in detail. An option you also have is to use data attributes in element(s) on the page to store info from various plugin events and reuse them the way you want.

[kartik-v]

Resolved via upgrade to release v4.1.7. Two new properties customLayoutTags and customPreviewTags have been incorporated. This should be an associative array object of key: value pairs, where:

• key: string, is the tag to be replaced and as a standard is recommended to be enclosed between braces.
• value: string|function, is the value that will replace the tag key above. This can be setup either as a string or callback function.

For example:

// example 1 - tags with value set as string
customLayoutTags: {
    '{tagA}': '<span class="label label-default">Tag A</span>',
    '{tagB}': 'Tag B',
}

// example 2 - tags with value set as callback
customLayoutTags: {
    '{tagC}': function() {
        return $("#element-id").val();
    }
}

[rajneesh-reglobe]

I have uploaded a image using Ajax and i want to delete without refresh the page then how can it possible.

when i click on delete button then image is hiding but not remove from database.

Please help me to figure out my problem.

I am using Yii2 plugin.

echo $form->field($packageImages, 'package_img')->widget(\kartik\file\FileInput::classname(), [
'options' => [
'multiple' => true,
'accept' => 'image/*',
'class' => 'col-sm-10',
],
'pluginOptions' => [
'browseClass' => 'btn btn-info',
'browseLabel' => 'Select Package Image',
'previewFileType' => 'image',
'uploadUrl' => \yii\helpers\Url::to(['/package/upload/']),
'uploadExtraData' => [
'p_id' => $model->id,
],
'preview' => $initialPreview,
'previewConfig'=> $initialPreviewConfig,
'initialPreview' => $initialPreview,
'initialPreviewConfig'=> $initialPreviewConfig,
'overwriteInitial'=>false,
'maxFileCount' => 5,
'mainClass' => 'input-group-lg'
],
'pluginLoading' => true,
]);