Error thrown while trying to select png file

[DaXmAn]

plugin version 4.2.1, tested on both .min and not
jquery version 2.3.1
bootstrap version 3.3.4

By selecting I mean selecting file via system/browser build-in file dialog.

my input definition:

<input type="file" id="xxx" multiple="multiple" name="xxx" />

$("#xxx").fileinput({
    showUpload: false,
    showCaption: true,
    browseLabel: "Add images",
    browseClass: "btn btn-default btn-sm",
    removeClass: "btn btn-danger btn-sm",
    captionClass: "input-sm text-left",
    removeLabel: "Clear",
    allowedFileExtensions: ['jpg', 'png', 'gif'],
    allowedFileTypes: ['image'],
    previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
    initialCaption: "allowed files: jpg, png, gif; max. size per image: 580 kb; multi select allowed",
    overwriteInitial: false,
    previewSettings: { image: { width: "auto", height: "100px" } },
    maxFileSize: 580,
    maxFileCount: 10
});

While trying to select PNG image, below error is thrown (jpg and gif works fine):

Uncaught TypeError: Cannot read property 'width' of undefined @ fileinput.js:1658
FileInput.previewDefault @ fileinput.js:1658
FileInput.readFiles.throwError @ fileinput.js:1741
readFile @ fileinput.js:1772
FileInput.readFiles @ fileinput.js:1851
FileInput.change @ fileinput.js:1956
jQuery.extend.proxy.proxy @ jquery-2.1.3.js:512
jQuery.event.dispatch @ jquery-2.1.3.js:4430
jQuery.event.add.elemData.handle @ jquery-2.1.3.js:4116

File preview is not shown if you select only one PNG. If you select working extension as first (for example jpg and gif and then PNG) you will end up with 2 image previews and below message:
"Loading file 2 of 3 - aaa.gif - 50% completed." and ofcourse mentioned js error.

[kartik-v]

Remove the entire following line in your plugin setting and check

previewSettings: { image: { width: "auto", height: "100px" } },

[kartik-v]

Anyway - I will try to provide a fix for this exception message.

[kartik-v]

You may check now with the updated code from dev-master.

[DaXmAn]

Works now. Thanks.

[MadFan]

Hi, I have exactly the same problem

$form->field($imageModel, 'networkLogo')->widget(FileInput::classname(), [
'options' => [
'id' => 'networkLogo',
'multiple' => true,
'accept' => 'image/*',
],
'pluginOptions' => [
'maxImageWidth' => 200,
'maxImageHeight' => 400,
'previewFileType' => 'image',
'allowedFileExtensions' => [
'jpg', 'jpeg', 'png'
],
'showUpload' => false,
'showRemove' => false,
'maxFileSize' => 500,
'maxFileCount' => 1,
'initialPreview' => (!is_null(Settings::getNetworkLogoUrl())) ? [
Html::img(Settings::getNetworkLogoUrl(), ['style' => 'width:200px;height:40px;']),
] : false,
'initialPreviewConfig' => [
['url' => Settings::getNetworkLogoUrl()],
],
'layoutTemplates' => [
'footer' => ''
],
'initialPreviewAsData' => false,
'overwriteInitial' => true,
]
]);

Uncaught TypeError: Cannot read property 'width' of undefined
fileinput.min.js?v=1486557495:11
at I._generatePreviewTemplate (http://dashboard.addprofit.me/assets/e4632900/js/fileinput.min.js?v=1486557495:11:14179)