CODEWITHSUNDEEP
phpyiiyii2kartik-v
HELPME
HELPME

Reputation: 754

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

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' => '',
        ]
]);

Upvotes: 0

Views: 1522

Answers (2)

Praveen Kumar
Praveen Kumar

Reputation: 73

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:
This is what it look likes

Upvotes: 0

Muhammad Omer Aslam
Muhammad Omer Aslam

Reputation: 23778

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

Upvotes: 1

Related Questions