Как отобразить размер файла и дополнительные кнопки в виджете Kartik-v FileInput YII2?

Question

[Дмитрий Ким]

Никак не могу добиться вот этого результата:

Т.е. нужно отобразить кнопку перетаскивания, кнопку для открытия превью и размера файла.
В первой демке все работает "из коробки", никаких лишних настроек автор не делает - и все работает "как надо".
На деле получается так:

Думаю, все дело в шаблонах. Пытаюсь изменить шаблон на:

'layoutTemplates' => [
  'size'   => '<span>{sizeText}</span>',
  'footer' => '<div class="file-thumbnail-footer">
                      <div class="file-caption-name" style="width:{width}">{caption}{size}</div>
                      {progress} {actions}
                    </div>',
],

И получаю это:

Загрузка изображений проходит на ура, осталось заняться "красотой", но что-то не могу понять ЧЯДНТ?

Answer 1

[Максим Тимофеев]

Тут все есть и детально расписано: demos.krajee.com/widget-details/fileinput
Конкретно размер :

echo FileInput::widget([
    'name' => 'attachment_49[]',
    'options'=>[
        'multiple'=>true
    ],
    'pluginOptions' => [
        'initialPreview'=>[
            "http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/631px-FullMoon2010.jpg",
            "http://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Earth_Eastern_Hemisphere.jpg/600px-Earth_Eastern_Hemisphere.jpg"
        ],
        'initialPreviewAsData'=>true,
        'initialCaption'=>"The Moon and the Earth",
        'initialPreviewConfig' => [
            ['caption' => 'Moon.jpg', 'size' => '873727'],
            ['caption' => 'Earth.jpg', 'size' => '1287883'],
        ],
        'overwriteInitial'=>false,
        'maxFileSize'=>2800
    ]
]);

Comments

[Дмитрий Ким]

Вот здесь plugins.krajee.com/file-basic-usage-demo#basic-exa... при вставке нового файла показывается и размер файла и кнопка зума. Причем никаких дополнительных настроек не указано. А здесь я имитирую настройки по умолчанию: codepen.io/anon/pen/KMpbVb, и как видно ни размера ни зума нет. В чем загвоздка, не подскажете?

[Дмитрий Ким]

Вот ваш пример codepen.io/anon/pen/KMpbVb?editors=1010, вообще не работающий как положено. Что не так, никак не могу понять. Нигде нет адекватных объяснений.

[Максим Тимофеев]

Дмитрий Ким: Мой пример для php виджета, а не для js кода, теоретически он может формировать js отличный от Вашего. Надо разбирать виджет и смотреть. Да он wraper для bootstrap-овского fileinput, но не факт что там нет доп зависимостей, такая же структура и совпадает ли версия.

[Дмитрий Ким]

Максим Тимофеев: Да, в том то и дело, я пробовал и php и js версии, никак не могу добиться результата как у автора в демках.

[Максим Тимофеев]

Дмитрий Ким: да, там странные доки. Обычно использую (как fileinput) либо мега простое решение https://github.com/2amigos/yii2-file-upload-widget либо www.dropzonejs.com

[Джамал Абсалимов]

Я использую ваш пример, но когда я выбираю фотку, у меня нет кнопки удалить

Из за чего это может быть? Я поставил все как надо, использую ваш пример, но кнопки у изображения нет.
На скриншоте это фото с компьютера. Помогите пожалуйста разобраться