11# FileApi widget for Yii2
22
3+ Wrapper for [ FileAPI] ( https://github.com/mailru/FileAPI )
4+ 35## Installation
46
57```
@@ -8,4 +10,94 @@ composer require rkit/fileapi-widget-yii2
810
911## Usage
1012
11- ...
13+ ### Basic usage
14+ 15+ 1 . Form
16+ 17+ ``` php
18+ <?php
19+ use yii\helpers\Html;
20+ use yii\web\JsExpression;
21+ use rkit\fileapi\Widget as FileApi;
22+ ?>
23+ <?= $form->field($model, $attribute, ['template' => "{label}\n{error}\n{input}\n{hint}"])
24+ ->widget(FileApi::className(), [
25+ 'template' => '@app/path/to/template',
26+ 'callbacks' => [
27+ 'select' => new JsExpression('function (evt, ui) {
28+ var ufile = ui.files[0],
29+ $el = $(this);
30+ 31+ if (ui && ui.other.length && ui.other[0].errors) {
32+ alert("'.Yii::t('app', 'Incorrect file format').': " + ui.other[0].name);
33+ }
34+ }'),
35+ 'filecomplete' => [new JsExpression('function (evt, uiEvt) {
36+ if (uiEvt.result.error) {
37+ alert(uiEvt.result.error);
38+ } else {
39+ $(".field-' . Html::getInputId($model, $attribute) . '").find(".help-block").empty();
40+ $(".field-' . Html::getInputId($model, $attribute) . '").removeClass("has-error");
41+ $(this).find("input[type=\"hidden\"]").val(uiEvt.result.id);
42+ $(this).find(".fileapi-preview-wrapper").html("<img src =" + uiEvt.result.path + "
43+ $(this).find(".fileapi-browse-text").text("' . Yii::t('app', 'Uploaded') . '");
44+ }
45+ }'),
46+ ]],
47+ 'settings' => [
48+ 'url' => yii\helpers\Url::toRoute([$attribute . '-upload']),
49+ 'duplicate' => true
50+ ]
51+ ])
52+ ); ?>
53+ ```
54+ 55+ 2 . Template
56+ 57+ ``` php
58+ <div id =" <?= $selector; ?>" class =" fileapi"
59+ <div class =" btn btn-default js-fileapi-wrapper"
60+ <div class =" fileapi-browse" data-fileapi =" active.hide"
61+ <span class =" glyphicon glyphicon-picture" span >
62+ <span class =" fileapi-browse-text"
63+ <?= $value ? Yii::t('app', 'Uploaded') : Yii::t('app', 'Upload') ?>
64+ </span >
65+ <span data-fileapi =" name" span >
66+ <input type =" file" name =" <?= $inputName ?>"
67+ </div >
68+ <div class =" fileapi-progress" data-fileapi =" active.show"
69+ <div class =" progress progress-striped"
70+ <div class =" fileapi-progress-bar progress-bar progress-bar-info" data-fileapi =" progress"
71+ role =" progressbar" aria-valuemin =" 0" aria-valuemax =" 100" div >
72+ </div >
73+ </div >
74+ </div ><br >
75+ <?php if ($preview === true) : ?>
76+ <a href =" #" class =" fileapi-preview"
77+ <span data-fileapi =" delete" class =" fileapi-preview-delete"
78+ <span class =" glyphicon glyphicon-trash" span >
79+ </span >
80+ <span class =" fileapi-preview-wrapper"
81+ <?php if (!empty($value)):?>
82+ <img src =" <?= $value ?>"
83+ <?php endif?>
84+ </span >
85+ </a >
86+ 87+ <?php $this->registerJs("
88+ $(document).on('click', '#$selector [data-fileapi=\"delete\"]', function(evt) {
89+ evt.preventDefault();
90+ var file = $(this).closest('#$selector');
91+ file.fileapi('clear');
92+ file.find('input[type=\"hidden\"]').val('');
93+ file.find('.fileapi-preview-wrapper').empty();
94+ file.find('.fileapi-browse-text').text('" . Yii::t('app', 'Upload') . "');
95+ })"); ?>
96+ <?php endif; ?>
97+ 98+ <?= $input ?>
99+ 100+ </div >
101+ ```
102+ 103+ ### Gallery
0 commit comments