FileInput supports configuration of the bootstrap library version so that you can use this either with any Bootstrap version 3.x and above. For setting up the bootstrap version for your extension, you can configure the FileInput::bsVersion property to one of the following.

• To use with bootstrap 3 library - you can set FileInput::bsVersion property to any string starting with 3 (e.g. 3 or 3.3.7 or 3.x)

• To use with bootstrap 4 library - you can set FileInput::bsVersion property to any string starting with 4 (e.g. 4 or 4.6.0 or 4.x)

• To use with bootstrap 5 library - you can set FileInput::bsVersion property to any string starting with 5 (e.g. 5 or 5.1.0 or 5.x)

'params' => [
    'bsVersion' => '5.x', // this will set globally `bsVersion` to Bootstrap 5.x for all Krajee Extensions
    // other settings
    // 'adminEmail' => 'admin@example.com'
]

"yiisoft/yii2-bootstrap5": "@dev"

"yiisoft/yii2-bootstrap4": "@dev"

"yiisoft/yii2-bootstrap": "@dev"

The yii2-widget-fileinput extension can be installed automatically or manually using one of these options:

$ php composer.phar require kartik-v/yii2-widget-fileinput "dev-master"

"kartik-v/yii2-widget-fileinput": "dev-master"

• bsVersion: string | int, the bootstrap library version to be used for the extension. Refer the Bootstrap Info section for details and pre-requisites on setting this property.

  • To use with Bootstrap library - you can set this to any string starting with 3 (e.g. 3 or 3.3.7 or 4.x / 3.x)

  • To use with bootstrap 4 - you can set this to any string starting with 4 (e.g. 4 or 4.6.0 or 4.x)

  • To use with bootstrap 5 - you can set this to any string starting with 4 (e.g. 5 or 5.1.0 or 5.x)

• bsColCssPrefixes: array, the bootstrap grid column css prefixes mapping, the key is the bootstrap versions, and the value is an array containing the sizes and their corresponding grid column css prefixes. The class using this trait, must implement kartik\base\BootstrapInterface. If not set will default to:.

  [
     3 => [
        self::SIZE_X_SMALL => 'col-xs-',
        self::SIZE_SMALL => 'col-sm-',
        self::SIZE_MEDIUM => 'col-md-',
        self::SIZE_LARGE => 'col-lg-',
        self::SIZE_X_LARGE => 'col-lg-',
        self::SIZE_XX_LARGE => 'col-lg-',
     ],
     4 => [
        self::SIZE_X_SMALL => 'col-',
        self::SIZE_SMALL => 'col-sm-',
        self::SIZE_MEDIUM => 'col-md-',
        self::SIZE_LARGE => 'col-lg-',
        self::SIZE_X_LARGE => 'col-xl-',
        self::SIZE_XX_LARGE => 'col-xl-',
     ],
     5 => [
        self::SIZE_X_SMALL => 'col-',
        self::SIZE_SMALL => 'col-sm-',
        self::SIZE_MEDIUM => 'col-md-',
        self::SIZE_LARGE => 'col-lg-',
        self::SIZE_X_LARGE => 'col-xl-',
        self::SIZE_XX_LARGE => 'col-xxl-',
     ],
  ];
  

• resizeImages: boolean, whether to resize images on client side. Defaults to false. You must set this to true if you wish to configure the plugin to resize images and load the necessary dependent CanvasBlobAsset.

• showMessage: boolean, whether to display a warning message for browsers running IE9 and below. Defaults to true.

• messageOptions: array, HTML attributes for the container for the warning message for browsers running IE9 and below. Defaults to ['class' => 'alert alert-warning'].

• disabled: boolean whether the input widget is to be entirely disabled. Defaults to false.

• readonly: boolean whether the input widget is to be entirely readonly. Defaults to false.

• options: array, the HTML attributes for the file input.

• pluginLoading: boolean, whether to show a loading progress indicator in place of the input before plugin is completely loaded. Defaults to true.

• pluginOptions: array the plugin settings/options for the Bootstrap Star Rating Plugin. There are a quite a few options you can set in this plugin. Refer the plugin documentation and demos for details.

• pluginEvents: array the FileInput JQuery events. You must define events in event-name => event-function format. All events will be stacked in the sequence. Refer the plugin documentation and demos for details. For example:

  pluginEvents = [
      "fileclear" => "function() { log("fileclear"); }",
      "filereset" => "function() { log("filereset"); }",
  ];
  

use kartik\widgets\FileInput
// or 'use kartikile\FileInput' if you have only installed yii2-widget-fileinput in isolation

// Usage with ActiveForm and model
echo $form->field($model, 'avatar')->widget(FileInput::classname(), [
    'options' => ['accept' => 'image/*'],
]);

// With model & without ActiveForm
// Note for multiple file upload, the attribute name must be appended with 
// `[]` for PHP to be able to read an array of files
echo '<label class="control-label">Add Attachments</label>';
echo FileInput::widget([
    'model' => $model,
    'attribute' => 'attachment_1[]',
    'options' => ['multiple' => true]
]);

// Usage without a model
echo '<label class="control-label">Upload Document</label>';
echo FileInput::widget([
    'name' => 'attachment_3',
]);

// A disabled fileinput input
echo '<label class="control-label">Select Attachment</label>';
echo FileInput::widget([
    'name' => 'attachment_4',
    'disabled' => true
]);

use kartik\widgets\FileInput
// or 'use kartikile\FileInput' if you have only installed yii2-widget-fileinput in isolation
use yii\helpers\Url;

// Ajax uploads with drag and drop feature. Enable AJAX uploads by setting the `uploadUrl` property 
// in pluginOptions. You can also pass extra data to your upload URL via `uploadExtraData`. Refer 
// [plugin documentation and demos](https://plugins.krajee.com/file-input/demo) for more details 
// and options on using AJAX uploads.
echo FileInput::widget([
    'name' => 'attachment_48[]',
    'options'=>[
        'multiple'=>true
    ],
    'pluginOptions' => [
        'uploadUrl' => Url::to(['/site/file-upload']),
        'uploadExtraData' => [
            'album_id' => 20,
            'cat_id' => 'Nature'
        ],
        'maxFileCount' => 10
    ]
]);

// Display an initial preview of files with caption 
// (useful in UPDATE scenarios). Set overwrite `initialPreview`
// to `false` to append uploaded images to the initial preview.
echo FileInput::widget([
    'name' => 'attachment_49[]',
    'options'=>[
        'multiple'=>true
    ],
    'pluginOptions' => [
        'initialPreview'=>[
            "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/631px-FullMoon2010.jpg",
            "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Earth_Eastern_Hemisphere.jpg/600px-Earth_Eastern_Hemisphere.jpg"
        ],
        'initialPreviewAsData'=>true,
        'initialCaption'=>"The Moon and the Earth",
        'initialPreviewConfig' => [
            ['caption' => 'Moon.jpg', 'size' => '873727'],
            ['caption' => 'Earth.jpg', 'size' => '1287883'],
        ],
        'overwriteInitial'=>false,
        'maxFileSize'=>2800
    ]
]);

// Control display of widget elements
echo FileInput::widget([
    'name' => 'attachment_50',
    'pluginOptions' => [
        'showPreview' => false,
        'showCaption' => true,
        'showRemove' => true,
        'showUpload' => false
    ]
]);

// Adjust caption and button size
 echo FileInput::widget([
    'name' => 'attachment_51',
    'pluginOptions' => [
        'showUpload' => false,
        'browseLabel' => '',
        'removeLabel' => '',
        'mainClass' => 'input-group-lg'
    ]
]);

// Style widget buttons
echo FileInput::widget([
    'name' => 'attachment_52',
    'pluginOptions' => [
        'browseClass' => 'btn btn-success',
        'uploadClass' => 'btn btn-info',
        'removeClass' => 'btn btn-danger',
        'removeIcon' => '<i class="fas fa-trash"></i> '
    ]
]);

// A block file picker button with custom icon and label
echo FileInput::widget([
    'name' => 'attachment_53',
    'pluginOptions' => [
        'showCaption' => false,
        'showRemove' => false,
        'showUpload' => false,
        'browseClass' => 'btn btn-primary btn-block',
        'browseIcon' => '<i class="fas fa-camera"></i> ',
        'browseLabel' =>  'Select Photo'
    ],
    'options' => ['accept' => 'image/*']
]);
        
// Multiple file/image selection with image only preview
// Note for multiple file upload, the attribute name must be appended with 
// `[]` for PHP to be able to read an array of files
echo $form->field($model, 'avatar[]')->widget(FileInput::classname(), [
    'options' => ['multiple' => true, 'accept' => 'image/*'],
    'pluginOptions' => ['previewFileType' => 'image']
]);
        
// Multiple file selection with both text and image preview
// Note for multiple file upload, the attribute name must be appended with 
// `[]` for PHP to be able to read an array of files
echo $form->field($model, 'upload_files[]')->widget(FileInput::classname(), [
    'options' => ['multiple' => true],
    'pluginOptions' => ['previewFileType' => 'any']
]);

// Customizing the plugin elements (e.g. using a different container to display the caption)
echo '<div class="card p-3all">';
echo FileInput::widget([
    'name' => 'attachment_30',
    'pluginOptions' => [
        'showPreview' => false,
        'showCaption' => false,
        'elCaptionText' => '#customCaption'
    ]
]);
echo '<span id="customCaption" class="text-success">No file selected</span>';
echo '</div>';

// FileInput inside a modal dialog
use common\components\Modal;
use kartikorm\ActiveForm;
use kartik\widgets\FileInput;
// or 'use kartikile\FileInput' if you have only installed yii2-widget-fileinput in isolation
Modal::begin([
    'title'=>'File Input inside Modal',
    'toggleButton' => [
        'label'=>'Show Modal', 'class'=>'btn btn-default btn-outline-secondary'
    ],
]);
$form1 = ActiveForm::begin([
    'options'=>['enctype'=>'multipart/form-data'] // important
]);
echo FileInput::widget(['name'=>'kartiks_file']);
ActiveForm::end();
Modal::end();

// Multilanguage widgets with AJAX UPLOAD
echo FileInput::widget([
    'name' => 'input-fr[]',
    'language' => 'fr',
    'options' => ['multiple' => true],
    'pluginOptions' => ['previewFileType' => 'any', 'uploadUrl' => Url::to(['/site/file-upload'])]
]);
echo '<br><label>FileInput in Russian</label>';
echo FileInput::widget([
    'name' => 'input-ru[]',
    'language' => 'ru',
    'options' => ['multiple' => true],
    'pluginOptions' => ['previewFileType' => 'any', 'uploadUrl' => Url::to(['/site/file-upload']),]
]);

yii2-widget-fileinput is released under the BSD-3-Clause License. See the bundled LICENSE.md for details.