How to view image and pdf files preview in yii2 kartik multiple file upload in update form

Question

Here below is the kartik file input widget in update_form.

echo FileInput::widget(
    [
        'name' => 'BriefRequirements[requirement_value][]',
        'attribute' => 'assets_file',
        'id' => 'assets_file',
        'options' => ['multiple' => true],
        'pluginOptions' => [
            'overwriteInitial' => false,
            'initialPreview' => $image_url,
            'deleteUrl' => ' site/delete',
            'initialPreviewAsData' => true,
            'initialPreviewFileType' => 'image' //'pdf'
        ]
    ]
);

below is multiple image loading code,

foreach ($modelRequirements as $req) {
    $image_url[] = Yii::$app->request->baseUrl
        . '/theme/business_campaign_files/'
        . $req['requirement_value'];
}

I need help with my two questions:

1. Need to show all selected format files like image, pdf, doc etc [I tried to like 'initialPreviewFileType'=>'any'] not working.

2. I want to pass the selected image id to action to delete the image? - 'deleteUrl' => ' site/delete','id'=>12, <-- like this.

Answer 1

In the below code i got the result for my two questions.

$initializeConfig = [];
$initializeConfig1 = [];
if ($modelRequirements) {
    foreach ($modelRequirements as $req) {
        $extension = substr(
            $req['requirement_value'],
            strrpos($req['requirement_value'], '.') + 1
        );
        $image_url[] = Yii::$app->request->baseUrl
            . '/theme/business_campaign_files/'
            . $req['requirement_value'];
        $initializeConfig1['url'] = Url::toRoute('delete-requirement');
        $initializeConfig1['key'] = $req['id'];
        $initializeConfig1['type'] = $type;
        array_push($initializeConfig, $initializeConfig1);
    }
}

In the above code i got the result for my two questions.

1. For delete -> mentioned url I wrote the delete function, also through key parameter I passed the id.

2. For view all the extension files u have to send like "type" $initializeConfig1['type'] = $type; in the type variable i am getting the image extension based on the extension i am setting the format of the file like[pdf,xlsx,image].

easyOne

Answer 2

Various methods to manage your preview. The following features are demonstrated in this example: For Single Image you can make it Multiple Same as

$files = array();
$files['initialPreview'] = Url::base(TRUE) . '/' . $uploadurl . $newFileName;
$files['initialPreviewAsData'] = true;
//FOR PDF 
if ($fieldtype == 'pdf') {
 $files['initialPreviewConfig'][] = array('type' => 'pdf', 'key' => $newFileName);
} else { 
//FOR IMAGES
 $files['initialPreviewConfig']['key'] = $newFileName;
}

$files['namefile'] = $newFileName;

JSON Response :

{
  "initialPreview": "http://localhost/yii2/uploads/project/brochure/fileone.pdf",
  "initialPreviewAsData": true,
  "initialPreviewConfig": [
    {
      "type": "pdf",
      "key": "fileone.pdf"
    }
  ],
  "namefile": "fileone.pdf"
}