Kartic fileinput как подставить программно файл?

Question

[Петр Фронин]

Использую этот плагин для загрузки файлов

На странице такое поле

Если нажать на "Browse" и выбрать файл то все пройдет нормально, файл добавится и потом загрузится на сервер

Нужно реализовать добавление файла с сервера в это поле программно

$('#id').fileinput('clear');   // Удаляем из поля картинки
            $('#id').fileinput('destroy');  // Дестроим плагин

            // Добавляем файл
            $('#id').fileinput({
                options: { accept: 'image/*' },
                initialPreview: '/url/to/file.jpg',
                overwriteInitial: true,
                initialPreviewAsData: true,
                initialPreviewFileType: 'image',
                showRemove: false,
                showUpload: false,
                pluginOptions: {
                    fileActionSettings: {
                        showRemove: false,
                        showUpload: false
                    },
                    purifyHtml: true,
                    showPreview: true,
                    showRemove: false,
                    showUpload: false
                }
            });

В данном случае появляется визуально картинка

Но дальше при попытке сохранения формы валидация говорит что файл не подгружен

$('#id').fileinput('getFileStack');

Данный метод возвращает пустой массив
Как можно добавить файл?

Answer 1

[Дмитрий]

Добрый день.
Вот рабочий вариант, измените под свои нужды.

echo FileInput::widget([
            'name'          => 'attachment_' . $id,
            'options'       => [
                'multiple' => true
            ],
            'pluginOptions' => [
                'minFileCount' => 1,
                'required' => true,
                'deleteUrl'            => Url::to(['ajax-cars/del-img-moderator']),
                'initialPreview'       => $initialPreview,
                'initialPreviewConfig' => $caption,
                'initialPreviewAsData' => true,
                'showCaption'          => false,
                'showBrowse'           => false,
                'showRemove'           => false,
                'showUpload'           => false,
                'initialCaption'       => "The Moon and the Earth",
                'overwriteInitial'     => false,
                'fileActionSettings'   => [
                    'showDrag' => false,
                    'showZoom' => false
                ]
            ]
        ])

Здесь нужно подгрузить данные

'initialPreview'       => $initialPreview,
'initialPreviewConfig' => $caption,

Можно сделать так, но лучше вынести в методы.

$initialPreview = [];
$caption        = [];

foreach ($images as $image) {
     $initialPreview[] = Url::toRoute($image->path . DIRECTORY_SEPARATOR . 'mini' . DIRECTORY_SEPARATOR . $image->title, true);
     $caption[]        = [
           'key'   => $image->id,
           'extra' => [
               'img' => [
                    'big'   => $image->path . DIRECTORY_SEPARATOR . $image->title,
                    'small' => $image->path . DIRECTORY_SEPARATOR . 'mini' . DIRECTORY_SEPARATOR . $image->title
                ]
           ]
     ];
}

p.s. На js всё тоже самое

$this->registerJs('
  var input = $("#uploadsfiles-imagesfile");
  $("#uploadsfiles-imagesfile").on("filebatchselected", function(){
      input.fileinput("upload")
  })
  
  var OtherActionButtons = "<button class=\"set-main btn btn-sm btn-kv btn-default btn-outline-secondary\" type=\"button\" {dataKey} title=\"Main photo\">";
      OtherActionButtons += "<i class=\"fa fa-star\"></i>";
      OtherActionButtons += "</button>";
      OtherActionButtons += "<button class=\"set-main btn btn-sm btn-kv btn-default btn-outline-secondary\" type=\"button\" {dataKey} title=\"Left\">";
      OtherActionButtons += "<i class=\"fa fa-undo\"></i>";
      OtherActionButtons += "</button>";
      OtherActionButtons += "<button class=\"set-main btn btn-sm btn-kv btn-default btn-outline-secondary\" type=\"button\" {dataKey} title=\"Right\">";
      OtherActionButtons += "<i class=\"fa fa-repeat\"></i>";
      OtherActionButtons += "</button>";
     
/*  $(".btn-submit").on("click", function(){
      var Text = $(".file-caption-name").val();
      input.fileinput("upload");
      if(Text == ""){
        return false;
      }  
  })   */
    
  var funCi = $("#uploadsfiles-imagesfile").on("fileuploaded", function(event, data, previewId, index) {
  input.fileinput("destroy").fileinput({
    maxFileCount: 2,
    validateInitialCount: true,
    overwriteInitial: false,
    required: true,
    multiple: true,
    /*showUpload: false,
    showRemove: false,*/
    initialPreviewAsData: true,
    initialPreview: data.response.initialPreview,
    initialPreviewConfig: data.response.initialPreviewData,
    otherActionButtons: OtherActionButtons,
    uploadUrl: "' . Url::to(['upload-img']) . '",
    deleteUrl: "' . Url::to(['delete-img']) . '",
  })
  // setTimeout(function(){funCi}, 2500)
  input.closest("form").find("button").attr("disabled", false)
    console.log(data);
});
', View::POS_END);

Comments

[Петр Фронин]

Это не то, это подставляются при формировании страницы
Нужно именно на js
Тк нужно подставить уже после того как зашли на страницу и пользователь выполнил определенные действия

[Дмитрий]

Алексей Мариненков, а что Вам мешает отправить ajax и подставить данные?
Где хранятся пути к изображениям? В базе? Тогда ajax.

[Дмитрий]

Алексей Мариненков, кстати, на js всё так же.
обновил ответ.

[Дмитрий]

Алексей Мариненков, код с разных проектов, так что подставьте свои параметры.