yii2, kartik fileinput, сценарий загрузки ajax: при загрузке второго файла, третьего и так далее теги предыдущего файла заменяются неправильно

#php #jquery #yii2 #kartik-v #bootstrap-file-input

#php #jquery #yii2 #kartik-v #bootstrap-file-input

Вопрос:

Я работаю над проектом Yii2 с плагином kartik fileinput (bootstrap-fileinput v5.1.2). Я использую сценарий загрузки ajax, загружая по одному файлу за раз, и я настроил шаблон нижнего колонтитула с входными данными для сбора дополнительных данных, аналогично https://plugins.krajee.com/file-input-ajax-demo/7

При событии «filebatchselected» я автоматически запускаю загрузку. После этого, когда пользователь изменяет значение во входных данных в шаблон нижнего колонтитула, я переключаю видимость кнопки сохранения (настроенной в «otherActionButtons»), которая после нажатия пользователем запускает обновление ajax

Пока все в порядке, НО когда я загружаю второй файл, третий файл и так далее… значения входных данных предыдущих и уже загруженных файлов перезаписываются / повторно инициализируются…

Вот мой код:

Вид:

 <?
$categoria = ...

$footerTemplate = '<div class="file-thumbnail-footer">' .
'    <div class="file-footer-caption" title="{caption}">' .
'        <div class="file-caption-info">{caption}</div>' .
'        <div class="file-size-info">{size}</div>' .
'    </div>' .
     $form->field(new File, "titolo", ['enableClientValidation' => false])->textInput(["value"=>"{titolo}", "id"=>"file-titolo-{ID}", "class" => "mb-1 file-titolo", "placeholder" => "Breve descrizione del file..."])->label(false).
'    {progress}{indicator}{actions}' .
'</div>';

$initialPreview = [...];
$initialPreviewConfig = [...];
$initialPreviewThumbTags = [...];

echo $form->field($model,"_filesGenerici")->widget(FileInput::className(), [
    'options'=>[
        "id" => $idWidget = "fileInputDocAusGenerici$categoria",
    ],
    'pluginOptions' => [
        "initialPreview" => $initialPreview,
        "initialPreviewConfig" => $initialPreviewConfig,
        "initialPreviewThumbTags" => $initialPreviewThumbTags,
        'showUpload' => false,
        'showCancel' => false,
        'showRemove' => false,
        'uploadUrl' => Url::to(['files-generici/create']),
        'uploadExtraData' => [
            "dipendente_CodFsc"=>$model->CodFsc,
            "categoria"=>$categoria,
            "anno"=>$anno,
            "mese"=>$mese,
        ],
        "previewThumbTags" => [
            "{ID}" => "",
            "{titolo}" => "",
        ],
        "deleteUrl" => Url::to(['files-generici/delete']),
        "maxFileSize" => 2048,
        "overwriteInitial" => false,
        'fileActionSettings'=>[
            'showUpload'=>false,
            'showDrag'=>false,
        ],           
        "validateInitialCount" => true,
        
        "otherActionButtons" => <<<HTML
            <button type="button" class="kv-file-edit btn btn-sm btn-kv btn-default btn-outline-secondary display-hidden text-success" title="qwerty"{dataKey}>
                <i class="fas fa-save"></i>
            </button>
        HTML,
        
        "layoutTemplates" => [
            'footer' => $footerTemplate, 
        ],
    ],
    "pluginEvents" => [
        "filebatchselected" => new yiiwebJsExpression(<<<JS
            function(event, files) {
                if(confirm("Confermi il caricamento del file?"))
                    $("#$idWidget").fileinput("upload");
                else
                    $("#$idWidget").fileinput("clear");
            }
        JS),

        "filepredelete" => "function(event, key) {
            return !confirm('Sei sicuro di voler eliminare questo file?');
        }",
    ],
]);

$urlUpdateFilesGenerici = Url::to(["$controller/update"]);
$this->registerJs(<<<JS
    $(document).on("keyup paste change", ".file-titolo", function(){
        $(this).closest(".file-thumbnail-footer").find(".kv-file-edit").removeClass("display-hidden");
    });
        
    $(document).on('click', '#tabFiles$categoria .kv-file-edit', function() {
        console.log("processing");
        
        let btn = $(this), key = btn.data('key'),
            titolo = btn.closest(".file-thumbnail-footer").find(".file-titolo").val();
            periodo = btn.closest(".file-thumbnail-footer").find(".daterange").val();
        
        $.post("$urlUpdateFilesGenerici?key=" key, {titolo: titolo, mese: $mese, anno: $anno, periodo: periodo}, function(data, textStatus, jqXHR){
            btn.addClass("display-hidden");
        });
    }); 
JS);
?>
  

Контроллер:

 <?
public function actionCreate($dipendente_CodFsc,$anno,$mese)
{        
    $uploadedFile = UploadedFile::getInstances(new Dipendente, '_filesGenerici')[0];
    
    $model = new FileGenerico([
        "_FILE" => $uploadedFile,
        'cliente' => Yii::$app->user->identity->user,
        'dipendente_CodFsc' => $dipendente_CodFsc,
        'anno' => $anno,
        'mese' => $mese,
    ]);
    
    $post = Yii::$app->request->post();
    
    if ($model->load($post,"") amp;amp; $model->save()) 
    {
        $initialPreview = $model->isText ? $model->blob ?? $model::find()->select("blob")->where(["id"=>$model->id])->scalar()
            : ($model->isImageRaster ? $model->biggest : $model->sourceFile);
        
        $initialPreviewConfig = [
            [
                "previewAsData" => true,
                "size" => $model->size,
                "key" => $model->id,
                "fileId" => $model->id,
            ]
        ];
        
        if(!$model->isImageRaster){
            $initialPreviewConfig["type"]=$model->type4FI;
        }
        if(($model->isVideo) || ($model->isAudio)){
            $initialPreviewConfig["filetype"]=$model->type;
        }
        
        $initialPreviewThumbTags = [
            [
                "{ID}" => $model->id,
                "{titolo}" => $model->titolo,
                "{created_at}" => "<b>Caricato il:</b> ".Yii::$app->formatter->asDate($model->created_at),
            ]
        ];

        $config = [
            "initialPreview" => $initialPreview,
            "initialPreviewConfig" => $initialPreviewConfig,
            "initialPreviewThumbTags" => $initialPreviewThumbTags,
        ];
        
        Yii::$app->response->data = $config;
    }
    else 
        die('<pre>'.print_r($model->errors,1).'</pre>');
}
?>
  

Можете ли вы мне помочь, пожалуйста?

Ответ №1:

Я надеюсь, что это может кому-то помочь. Проблема в том, что после загрузки файла плагин восстанавливает теги предыдущих больших пальцев из кэша… Мое собственное решение: обновлять теги кэша вручную после завершения обновления ajax.

 <<<JS
$.post("$urlUpdateFilesGenerici?key=" key, {titolo: titolo, mese: $mese, anno: $anno, periodo: periodo}, function(data, textStatus, jqXHR){
    btn.addClass("display-hidden");

    let index = $("#$idWidget").data("fileinput").previewCache.data.content.length - 1;    
    $("#$idWidget").data("fileinput").previewCache.data.tags[index]["{titolo}"] = titolo;//THIS DO THE TRICK
});
JS;