Bootstrap File Input - How to hide the drag button in initial preview?

Question

I am using the Bootstrap File Input plugin for managing user avatars: http://plugins.krajee.com/file-input/

I am initializing the plugin using this JS code:

        $("#contact_photo").fileinput({
            showCaption: false, // The "1 file selected non-editable text field"
            showRemove: false, // The "Remove" button
            showUpload: false, // The "Upload" button
            showBrowse: false, // The "Browse ..." button
            browseOnZoneClick: true,

            initialPreview: "{{ lead.contact_photo.url }}",
            initialPreviewConfig: [
                {
                    fileType: 'image',
                    previewAsData: true,
                }
            ],

            removeFromPreviewOnError: true,
            overwriteInitial: true, // Whether to replace the image loaded originally if it exists
            allowedFileExtensions: ['jpg', 'jpeg', 'png'],
            allowedPreviewTypes: ['image'],
            defaultPreviewContent: '<h3>No Contact Photo</h3><h6>Drag or click Browse...</h6>',
            maxFileSize: 10000, // 10 MB
            maxFileCount: 1,
            msgErrorClass: 'alert alert-block alert-danger',
            elErrorContainer: '#kv-avatar-errors-1',
        });

The problem is if the initialPreview key is set the initial preview will contain the "Drag" button in left bottom corner (the icon with 4 directional arrows, which does nothing for my setup). How do I remove it?

I have tried setting showDrag: false in both fileinput setup and in initialPreviewConfig with no success.

Answer 1

You can toggle the drag buttons off with:

$("#contact_photo").fileinput({
    ...
    fileActionSettings: {
        showDrag: false,
    },
});

Answer 2

Simply hide the drag item:

$("#contact_photo").fileinput({
    ...
    layoutTemplates: {
        actionDrag: '',
    },
});