Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 77e49b8

Browse files
committed
Upd README.md
1 parent 4c1ce84 commit 77e49b8

File tree

1 file changed

+168
-2
lines changed

1 file changed

+168
-2
lines changed

‎README.md‎

Lines changed: 168 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,11 +40,177 @@ use rkit\fileapi\Widget as FileApi;
4040

4141
### Basic usage with [FileManager](https://github.com/rkit/filemanager-yii2)
4242

43-
@TODO
43+
1. **Form**
44+
45+
```php
46+
use rkit\fileapi\Widget as FileApi;
47+
...
48+
<?= $form->field($model, $attribute, ['template' => "{label}\n{error}\n{input}\n{hint}"])
49+
->widget(FileApi::className(), [
50+
'template' => '@app/path/to/template',
51+
'callbacks' => [
52+
'select' => new JsExpression('function (evt, ui) {
53+
var ufile = ui.files[0],
54+
$el = $(this);
55+
56+
if (ui && ui.other.length && ui.other[0].errors) {
57+
alert("'.Yii::t('app', 'Incorrect file format').': " + ui.other[0].name);
58+
}
59+
}'),
60+
'filecomplete' => [new JsExpression('function (evt, uiEvt) {
61+
if (uiEvt.result.error) {
62+
alert(uiEvt.result.error);
63+
} else {
64+
$(".field-' . Html::getInputId($model, $attribute) . '").find(".help-block").empty();
65+
$(".field-' . Html::getInputId($model, $attribute) . '").removeClass("has-error");
66+
$(this).find("input[type=\"hidden\"]").val(uiEvt.result.id);
67+
$(this).find(".fileapi-preview-wrapper").html("<img src=" + uiEvt.result.path + ">");
68+
$(this).find(".fileapi-browse-text").text("' . Yii::t('app', 'Uploaded') . '");
69+
}
70+
}'),
71+
]],
72+
'settings' => [
73+
'url' => yii\helpers\Url::toRoute([$attribute . '-upload']),
74+
'imageSize' => $model->getFileRules($attribute)['imageSize'],
75+
'accept' => implode(',', $model->getFileRules($attribute)['mimeTypes']),
76+
'duplicate' => true
77+
]
78+
])
79+
->hint($model->getFileRulesDescription($attribute), [
80+
'class' => 'fileapi-rules'
81+
]);
82+
?>
83+
```
84+
85+
2. **Template**
86+
87+
```php
88+
<div id="<?= $selector; ?>" class="fileapi">
89+
<div class="btn btn-default js-fileapi-wrapper">
90+
<div class="fileapi-browse" data-fileapi="active.hide">
91+
<span class="glyphicon glyphicon-picture"></span>
92+
<span class="fileapi-browse-text">
93+
<?= $value ? Yii::t('app', 'Uploaded') : Yii::t('app', 'Upload') ?>
94+
</span>
95+
<span data-fileapi="name"></span>
96+
<input type="file" name="<?= $inputName ?>">
97+
</div>
98+
<div class="fileapi-progress" data-fileapi="active.show">
99+
<div class="progress progress-striped">
100+
<div class="fileapi-progress-bar progress-bar progress-bar-info" data-fileapi="progress"
101+
role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
102+
</div>
103+
</div>
104+
</div><br>
105+
<?php if ($preview === true) : ?>
106+
<a href="#" class="fileapi-preview">
107+
<span data-fileapi="delete" class="fileapi-preview-delete">
108+
<span class="glyphicon glyphicon-trash"></span>
109+
</span>
110+
<span class="fileapi-preview-wrapper">
111+
<?php if (!empty($value)):?>
112+
<img src="<?= $value ?>">
113+
<?php endif?>
114+
</span>
115+
</a>
116+
117+
<?php $this->registerJs("
118+
$(document).on('click', '#$selector [data-fileapi=\"delete\"]', function(evt) {
119+
evt.preventDefault();
120+
var file = $(this).closest('#$selector');
121+
file.fileapi('clear');
122+
file.find('input[type=\"hidden\"]').val('');
123+
file.find('.fileapi-preview-wrapper').empty();
124+
file.find('.fileapi-browse-text').text('" . Yii::t('app', 'Upload') . "');
125+
})"); ?>
126+
<?php endif; ?>
127+
128+
<?= $input ?>
129+
130+
</div>
131+
```
44132

45133
### Gallery with [FileManager](https://github.com/rkit/filemanager-yii2)
46134

47-
@TODO
135+
1. **Form**
136+
137+
```php
138+
use rkit\fileapi\Widget as FileApi;
139+
...
140+
141+
<?= $form->field($model, $attribute, ['template' => "{error}\n{input}\n{hint}"])
142+
->widget(FileApi::className(), [
143+
'template' => '@app/path/to/template',
144+
'preview' => false,
145+
'callbacks' => [
146+
'select' => new JsExpression('function (evt, ui) {
147+
if (ui && ui.other.length && ui.other[0].errors) {
148+
alert("'.Yii::t('app', 'Incorrect file format').': " + ui.other.map(function(v) { return v.name; }));
149+
}
150+
}'),
151+
'filecomplete' => new JsExpression('function (evt, uiEvt) {
152+
if (uiEvt.result.error) {
153+
alert(uiEvt.result.error);
154+
} else {
155+
$(".field-' . Html::getInputId($model, $attribute) . '").find(".help-block").empty();
156+
$(".field-' . Html::getInputId($model, $attribute) . '").removeClass("has-error");
157+
$(this).find(".fileapi-files").append(uiEvt.result);
158+
}
159+
}'),
160+
],
161+
'settings' => [
162+
'url' => yii\helpers\Url::toRoute([$attribute . '-upload']),
163+
'imageSize' => $model->getFileRules($attribute)['imageSize'],
164+
'multiple' => true,
165+
'duplicate' => true
166+
]
167+
])
168+
->hint($model->getFileRulesDescription($attribute), [
169+
'class' => 'fileapi-rules'
170+
]
171+
); ?>
172+
```
173+
174+
2. **Template**
175+
176+
```php
177+
use yii\helpers\Html;
178+
...
179+
180+
<div id="<?= $selector; ?>" class="fileapi">
181+
<div class="btn btn-default btn-small fileapi-fileapi-wrapper">
182+
<div class="fileapi-browse" data-fileapi="active.hide">
183+
<span class="glyphicon glyphicon-picture"></span>
184+
<span><?= Yii::t('app', 'Upload')?></span>
185+
<input type="file" name="<?= $inputName ?>">
186+
</div>
187+
</div>
188+
<ul class="fileapi-files">
189+
<?php $files = $model->getFiles($attribute); foreach ($files as $file):?>
190+
<?= $this->render('gallery-item', [
191+
'file' => $file,
192+
'model' => $model,
193+
'attribute' => $attribute
194+
]); ?>
195+
<?php endforeach?>
196+
</ul>
197+
<?= Html::hiddenInput(Html::getInputName($model, $attribute) . '[0]', null, ['id' => Html::getInputId($model, $attribute)]) ?>
198+
</div>
199+
```
200+
201+
3. **Template for uploaded a file**
202+
203+
```php
204+
<li>
205+
<a href="<?= $file->getStorage()->path()?>" target="_blank">
206+
<img src="<?= $model->thumb('gallery', '80x80', $file->getStorage()->path())?>">
207+
</a>
208+
<a class="btn btn-lg"><span class="glyphicon glyphicon-remove remove-item" data-remove-item="li"></span></a>
209+
<?= Html::textInput(Html::getInputName($model, $attribute) . '[' . $file->id .']', $file->title, [
210+
'class' => 'form-control',
211+
])?>
212+
</li>
213+
```
48214

49215
## Theme for Bootstrap 3
50216

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /