Fileinput file-upload-indicator is visible when actionDrag is empty

[Bhoft]

Prerequisites

• I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• The issue still exists against the latest master branch of bootstrap-fileinput.
• This is not an usage question. I confirm having read the plugin documentation and demos.
• [x ] This is not a general programming / coding question. (Those should be directed to the webtips Q & A forum).
• I have attempted to find the simplest possible steps to reproduce the issue.
• I have included a failing test as a pull request (Optional).

Steps to reproduce the issue

Hi I wanted to disable the drag/sort possibility completely of the Fileinput and set 'actionDrag' => '', (empty)

Expected behavior and actual behavior

When I follow those steps, I see...
this yellow bulb in the lower left instead of the drag handle.

I was expecting...
to just disable the drag handle and see nothing ;)

Is there another way to remove the drag handle?

The small Bulb is coming from the css by
.krajee-default .file-drag-handle, .krajee-default .file-upload-indicator {
padding: 8px 8px 1px 3px;
}

The indicator is just isn't overlapped by the missing file-drag-handle.
I couldn't find another possibility to remove the re-order possibility.

Environment

Browsers

• Google Chrome
• Mozilla Firefox
• Internet Explorer
• Safari

Operating System

• Windows
• Mac OS X
• Linux
• Mobile

Libraries

• jQuery version:
• bootstrap-fileinput version: master

Isolating the problem

• This bug happens on the plugin demos page
• The bug happens consistently across all tested browsers
• This bug happens when using bootstrap-fileinput without other plugins
• I can reproduce this bug in a jsbin

[kartik-v]

Read about fileActionSettings in docs.

For your use case just set fileActionSettings.showDrag to false.

[Bhoft]

The issue is still there I have created a jsfiddle

https://jsfiddle.net/7z01jb07/1/

used some demo code from here
http://plugins.krajee.com/file-count-validation-demo

[Bhoft]

Another issue if I use the explorer theme the upload indicator is also removed when I set
fileActionSettings.showDrag to false
together with
fileActionSettings.showZoom to false

Maybe a independent showIndicator setting would be better instead of checking for fileActions.
I have no ajax upload enabled for my widget and using just the normal form post method.
So there is also no upload button for each preview item. And therefore no fileActions and because of this no upload indicator.

if you remove this check in the _renderFileActions function everything works as expected.
And the disabled buttons are also not shown
if (!showUpload && !showDelete && !showZoom && !showDrag) { return ''; }
So either remove this lines or also add an showIndicator setting.

[Bhoft]

Sry to disturb,
Now the upload indicator isn't shown at all.
I guess you have forgot to add the {indicator} in the default / explorer template in the footer part.

e.g. for the explorer theme instead of
footer: '<td class="file-details-cell"><div class="explorer-caption" title="{caption}">{caption}</div> ' + '{size}{progress}</td><td class="file-actions-cell">{actions}</td>',
this:
footer: '<td class="file-details-cell"><div class="explorer-caption" title="{caption}">{caption}</div> ' + '{size}{progress}</td><td class="file-actions-cell">{actions}{indicator}</td>',

Or you wanted to render the {indicator} in the actions which looks like more possible because you have the {indicator} in the tActions = '{indicator}\n' + '{drag}\n' +

But then you shouldn't do the replace the tag in the footer template inside _renderFileFooter but instead in the _renderFileActions function.

[kartik-v]

Please share a fiddle and the scenario where it does not work... not able to reproduce...

[Bhoft]

It was working the the fiddle above, when you have disabled showDrag and showZoom.
but not when you also disabled the ajax upload (e.g. when using form post to upload). Then the indicator is again not visible.

See here (try to upload a new image)
https://jsfiddle.net/7z01jb07/2/

it is still because of this line in _renderFileActions
if (!showUpload && !showDelete && !showZoom && !showDrag) { return ''; }

because showUpload, showDelete, showZoom and showDrag is false.
showUpload is false because self.isUploadable is false (because ajax upload is disabled) anyhow the indicator should be displayed because the file isn't uploaded. The indicator is shown when drag and zoom is enabled. But isn't when both settings are disabled.

why don't you add the {indicator} directly to the footer template part.
As it is in my opinion also no "action". The progress is also directly in the footer template, so why the indicator shouldn't.

tFooter = '<div class="file-thumbnail-footer">\n' + ' <div class="file-footer-caption" title="{caption}">{caption}<br>{size}</div>\n' + ' {progress} {actions} {indicator}\n' + '</div>'; tActions = '\n' + '{drag}\n' + '<div class="file-actions">\n' + ' <div class="file-footer-buttons">\n' + ' {upload} {delete} {zoom} {other}' + ' </div>\n' + ' <div class="clearfix"></div>\n' + '</div>';

test here:
https://jsfiddle.net/7z01jb07/5/

then the indicator is rendred independent if an action is rendered or not.

[kartik-v]

Will update.

[Bhoft]

looks like it is working now so this issue can be closed.
thx

I found 2 other issues but for them i will open new issues.

[ralphdev22]

Hi. How to remove file indicator? I read your documents but i couldn't find how to remove file indicator. I only found the ff:

showUpload: boolean, whether to show the upload button in the thumbnail

showRemove: boolean, whether to show the remove button in the thumbnail

showZoom: boolean, whether to show the zoom button in the thumbnail

showDrag: boolean, whether to show the drag button in the thumbnail (applicable only for initial preview content)

Please help me.

[kartik-v]

Read fileActionSettings in documentation and set the markup for -- indicatorNew, indicatorSuccess, indicatorError to the value you need which in your case will be a blank space  

[ralphdev22]

Thank you for the response. I'll check it.

[ralphdev22]

Yeah! It works!. Thanks.

I have another one. How to remove delete button in action bar?
I tried this

fileActionSettings : {
showRemove: false,
showDrag: false,
indicatorNew: "",
indicatorSuccess: "",
indicatorError: ""
},

but remove button still displayed.... Please help me again.