The FileInput widget is a customized file input widget based on Krajee's Bootstrap FileInput JQuery Plugin. The widget enhances the default HTML file input with various features including the following:
- Specially styled for Bootstrap 3.0 with customizable buttons, caption, and preview
- Ability to select and preview multiple files
- Includes file browse and optional remove and upload buttons.
- Ability to format your file picker button styles
- Ability to preview files before upload - images and/or text (uses HTML5 FileReader API)
- Ability to preview multiple files of different types (both images and text)
- Set your upload action/route (defaults to form submit). Customize the Upload and Remove buttons.
- Internationalization enabled for easy translation to various languages
NOTE: This extension is a sub repo split of yii2-widgets. The split has been done since 08-Nov-2014 to allow developers to install this specific widget in isolation if needed. One can also use the extension the previous way with the whole suite of yii2-widgets.
The preferred way to install this extension is through composer. Check the composer.json for this extension's requirements and dependencies. Read this web tip /wiki on setting the minimum-stability
settings for your application's composer.json.
To install, either run
$ php composer.phar require kartik-v/yii2-widget-fileinput "@dev"
or add
"kartik-v/yii2-widget-fileinput": "@dev"
to the require
section of your composer.json
file.
Refer the CHANGE LOG for details of release wise changes.
You can refer detailed documentation and demos on usage of the extension.
use kartik\file\FileInput;
// Usage with ActiveForm and model
echo $form->field($model, 'avatar')->widget(FileInput::classname(), [
'options' => ['accept' => 'image/*'],
]);
// With model & without ActiveForm
echo '<label class="control-label">Add Attachments</label>';
echo FileInput::widget([
'model' => $model,
'attribute' => 'attachment_1',
'options' => ['multiple' => true]
]);
yii2-widget-fileinput is released under the BSD 3-Clause License. See the bundled LICENSE.md
for details.