Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error thrown while trying to select png file #315

Closed
DaXmAn opened this issue Jun 8, 2015 · 5 comments
Closed

Error thrown while trying to select png file #315

DaXmAn opened this issue Jun 8, 2015 · 5 comments
Labels

Comments

@DaXmAn
Copy link

DaXmAn commented Jun 8, 2015

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
Copy link
Owner

Remove the entire following line in your plugin setting and check

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

@kartik-v
Copy link
Owner

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

@kartik-v
Copy link
Owner

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

@DaXmAn
Copy link
Author

DaXmAn commented Jun 11, 2015

Works now. Thanks.

@MadFan
Copy link

MadFan commented Feb 8, 2017

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants