Yii2: How to change kartik's fileinput widget caption name and browse button size?

Question

I'm using kartik's fileInput widget. What I need to do is to change the size of browse icon and change the caption name (because now it is "Select file").. Im really struggling with that and I cannot find any information for the problem.

Here's my widget:

echo FileInput::widget([
    'model' => $model,
    'attribute' => 'user',
        'pluginOptions' => [
        'showPreview' => false,
        'showRemove' => false,
        'uploadLabel' => '',
        'uploadIcon' => '<i class="glyphicon glyphicon-ok"></i>',
        'browseLabel' => '',
        ]
]);

Muhammad Omer Aslam · Answer 1 · 2018-03-14T09:31:34.290

1

You can use browseClass and browseIcon like below

'browseClass' => 'btn btn-success btn-block' ,
'browseIcon' => '<i class="glyphicon glyphicon-camera"></i> ' ,

you can adjust the css classes btn btn-success properties to match your needs

edited Mar 14 '18 at 09:31

answered Mar 14 '18 at 09:05

Muhammad Omer Aslam

22,976
9
42
68

This doesn't change the size of a button – HELPME Mar 14 '18 at 09:21
you have to use the css class `btn btn-success` properties to match your needs @HELPME – Muhammad Omer Aslam Mar 14 '18 at 09:30

Praveen Kumar · Answer 2 · 2020-10-27T04:31:39.700

There is an option to change the button caption browseLabel:

echo '<label class="control-label">Project Images </label>';
echo FileInput::widget([
    'model' => $imagemodel,
    'attribute' => 'upload_image[]',
    'pluginOptions' => [
        'initialPreviewConfig' => $imagesListId,
        'overwriteInitial'=>false,
        'previewFileType' => 'image',
        'initialPreview' => $imagesListId1 ,
        'showRemove' => true,
       // 'deleteUrl'=>!empty($imagesID)? $imagesID:'',
        'browseIcon' => '<i class="glyphicon glyphicon-plus-sign"></i> ',
        'browseLabel' => 'Upload Image',
        'allowedFileExtensions' => ['jpg', 'png','jpeg','tiff','JPEG'],
        'previewFileType' => ['jpg', 'png','jpeg','tiff','JPEG'],
        'msgUploadBegin' => Yii::t('app', 'Please wait, system is uploading the files'),
        'msgFilesTooMany' => 'Maximum 5 Images are allowed to be uploaded.',
        "uploadAsync" => true,
        "browseOnZoneClick" => true,
        'maxFileSize' => 1024,
        'showPreview' => true,
        'showCaption' => true,
        'showRemove' => true,
        'showUpload' => false,
        
    ],
    'options' => ['multiple' => true]

]);

This is what it look likes:

Yii2: How to change kartik's fileinput widget caption name and browse button size?

2 Answers2