kartik\file\FileInput заданное имя файла

[GHopper]

Приветствую.

Для загрузки изображений на сайт использую виджет kartik\file\FileInput. Установил, сделал базовую настройку и все работает. Теперь появились вопросы, которых нет в документации:

1. Нужно текстовое поле для задания имени файла на сервере (т.е. загрузка с последующим переименованием). В виджете есть свойство caption, которое для этого идеально бы подошло, но оно только для чтения.
2. При редактировании записи передаю в initialPreview массив с img-тегом. Появляется предпросмотр, но выползяет за рамки вшенего div. Приходится руками добавлять стили:

Код: Выделить всё

    <?= $form->field($model, 'uploadedFile')->widget(FileInput::className(), [
        'options' => [
            'accept' => 'image/*',
            'multiple' => false
        ],
        'pluginOptions' => [
            'showPreview' => true,
            'showCaption' => true,
            'showRemove' => true,
            'showUpload' => false,
            'initialCaption' => $model->logo,
            'initialPreview' => $model->logo ? [Html::img($model->getLogoUrl(), [
                    'style' => 'width: auto; height: auto; max-width: 100%; max-height: 100%'
                ]
            )] : [],
            'overwriteInitial' => true,
        ],
    ]);?>

Подозреваю, что это не являетя пресловутым 'best practice'.

[GHopper]

Код: Выделить всё

    <?= $form->field($model, 'uploadedFile')->widget(FileInput::className(), [
        'options' => [
            'accept' => 'image/*',
            'multiple' => false
        ],
        'pluginOptions' => [
            'showPreview' => true,
            'showCaption' => true,
            'showRemove' => true,
            'showUpload' => false,
            'initialCaption' => $model->logo,
            'initialPreview' => $model->logo ? [Html::img($model->getLogoUrl(), [
                    'style' => 'width: auto; height: auto; max-width: 100%; max-height: 100%'
                ]
            )] : [],
            'overwriteInitial' => true,
            'layoutTemplates' => [
                'caption' => "<div class='file-caption form-control {class}' tabindex='500'>\n" .
                "    <span class='file-caption-icon'></span>\n" .
                "    <input type='text' name='Brand[uploadedFileName]' class='file-caption-name' />\n" .
                '</div>',
            ],
        ],
    ]);?>

Решил задачу через переопределение layoutTemplates[caption]. Возник новый вопрос - избавиться от хардкода name='Brand[uploadedFileName]'? Модель умеет сама генерировать имя для компонентов по заданному имени метода?

[GHopper]

Да, умеет: $model->formName()

[GHopper]

Теперь новая задача - нужно поймать событие, при котором формируется caption. Что-то вроди этого:

Код: Выделить всё

        'pluginEvents' => [
            "fileloaded" => "function(event) { console.log(event); }",
        ],

Задача - в caption помещать имя загруженного файла без разрешения, toLowerCase(), с разрешенными для url символами и др. обработка. Есть идеи как перхватить это событие?

[GHopper]

Так я и не победил виджет от Kartiv-v. Слшиком уж он крутой для моего проекта.

Набросал свой собственный https://github.com/GHopperMSK/fileinput с базовым функционалом. Моим потребностфм он удовлетворяет на все 100%.

Пока писал этот виджет, задумался вот над каким вопросом - как можно через js поменять список выбранных файлов в input[type=file]? Т.е. выбрал пользователь 10 файлов, я подгурзил превью и все красиво продемонсрировал. Теперь пользователь решил поменять местами/добавить/удалить эти файл. Можно как-то обрабатывать подобные ситуации?