browseOnZoneClick: true with elErrorContainer causes file browser not to show up

[carlb0329]

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.
• 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

1. Configuring a fileinput widget with "browseOnZoneClick: true" AND "elErrorContainer: '.error-container'"
2. Try clicking the drop zone and it will NOT trigger the file browser dialog.

Expected behavior and actual behavior

When I follow those steps, I see...
No file browser
I was expecting...
A file browser to show up.

Environment

Browsers
Happening in Chrome, Firefox, and Safari on a Mac.

• Google Chrome
• Mozilla Firefox
• Internet Explorer
• Safari

Operating System

• Windows
• Mac OS X
• Linux
• Mobile

Libraries

• jQuery version: v3.2.1
• bootstrap-fileinput version: v4.4.7

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

NOTE: in example "elErrorContainer" is commented out. Uncomment it to reproduce the issue.

$("#avatar-1").fileinput({
		uploadUrl: '/site/media-upload',
		uploadAsync: false,
		browseOnZoneClick: true,
	    showUpload: false, // hide upload button
	    showRemove: false, // hide remove button
	    initialPreviewAsData: true,
	    overwriteInitial: true,
	    multiple: false,
	    showClose: false,
		uploadExtraData: {isProfilePic: true},
// 	    elErrorContainer: '.error-container',
	    elPreviewStatus: '.preview-status-container',
	    defaultPreviewContent: '<img src="/common/images/default_avatar.png" alt="Your Avatar">',
	    layoutTemplates: {main2: '{preview}'},
	    previewTemplates: {image: '<div class="file-preview-frame" id="{previewId}" data-fileindex="{fileindex}" data-template="{template}">\n' +
	        '   <div class="kv-file-content">' +
	        '       <img src="{data}" class="kv-preview-data file-preview-image" title="{caption}" alt="{caption}" {style}>\n' +
	        '   </div>\n' +
// 	        '   {footer}\n' +
	        '</div>\n',},
	    previewSettings: {image: {width: "100px", height: "100px", 'max-width': "100px", 'max-height': "100px", 'border-radius':'52.5px','object-fit':'cover'},},
	    allowedFileExtensions: ["jpg", "png"],
	});

[carlb0329]

If statement on line 1377 in fileinput.js is where the condition fails and thus does not display browser file upload window.

[kartik-v]

Related issue #1200. Resolved via 7944443.

[carlb0329]

@kartik-v I'm actually using your bootstrap-fileinput through the yii2-widget-fileinput, but the default composer setting for the yii2 widget is not pulling in the latest bootstrap-fileinput JS code. Can you please update the composer.json in the yii2-widget-fileinput repo so it uses the latest bootstrap-fileinput code?

Thanks for the great plugins/widgets!

[SasaCetkovic]

This is still not fixed, I'm getting the same issue with the latest files. I checked the code for 7944443 changes. It happens even when I remove the elErrorContainer option.

[nietaldarkopik]

The error is in this line
$zone = (self.isAjaxUpload) ? self.$dropZone : self.$preview.find('.file-default-preview');
i Change to :
$zone = (self.$dropZone.length > 0) ? self.$dropZone : self.$preview.find('.file-default-preview');