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"
require section of your
Latest Release ¶
Note: The latest version of the module is v1.0.3. Refer the CHANGE LOG for details.
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.