yii2-widget-fileinput

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.x, 4.x and 5.x 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.

Installation

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.

Demo

You can refer detailed documentation and demos on usage of the extension.

Usage

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]
]);