Kartik file input ajax upload with file previews

components/FileHandler.php

@@ -25,6 +25,8 @@ class FileHandler
     public const FILE_TYPES = '/(gif|pdf|dat|jpe?g|png|doc|docx|xls|xlsx|htm|txt|zip|csv)$/i';
 
     protected $options;
+
+    private $uploadedFilePath;
 
     /**
      * FileHandler constructor.
@@ -116,6 +118,8 @@ public function upload(): bool
         if (!move_uploaded_file($_FILES['upload_file']['tmp_name'], $filePath)) {
             throw new NotFoundHttpException(Yii::t('d3files', 'The uploaded file does not exist.'));
         }
+
+        $this->uploadedFilePath = $filePath;
 
         return true;
     }
@@ -132,6 +136,14 @@ public function getFilePath(): string
                     $this->options['file_name']
                 ));
     }
+
+    /**
+     * @return string
+     */
+    public function getUploadedFilePath(): string
+    {
+        return $this->uploadedFilePath;
+    }
 
     /**
      * @param $d3files_id
@@ -172,7 +184,10 @@ public function save(&$fileContent): bool
         $filePath = $this->getFilePath();
         FileHelper::createDirectory(dirname($filePath));
 
-        return file_put_contents($filePath, $fileContent);
+        if ($res = file_put_contents($filePath, $fileContent)) {
+            $this->uploadedFilePath = $filePath;
+        }
+        return $res;
     }
 
     /**
@@ -192,6 +207,7 @@ public function rename($new_id): void
         if (false === rename($oldName, $newName)) {
             throw new D3Exception('Cannot rename file from: ' . $oldName . ' to: ' . $newName);
         }
+        $this->uploadedFilePath = $newName;
     }
 
     /**

components/UploadAction.php

@@ -23,6 +23,8 @@
  */
 class UploadAction extends D3FilesAction
 {
+    public $fileInputName = 'upload_file';
+
     /**
      * @param int $id
      * @return array
@@ -45,7 +47,7 @@ public function run(int $id): array
                 }
             }
 
-            if (!isset($_FILES['upload_file'])) {
+            if (!isset($_FILES[$this->fileInputName])) {
                 throw new NotFoundHttpException(Yii::t('d3files', 'File not uploaded.'));
             }
 
@@ -56,7 +58,7 @@ public function run(int $id): array
 
             $tmp_id = uniqid('d3f', false);
 
-            $fileName = $_FILES['upload_file']['name'];
+            $fileName = $_FILES[$this->fileInputName]['name'];
 
             $modelFiles = D3FilesComponent::getModelFilesList($this->modelName, $id);
 
@@ -117,11 +119,13 @@ public function run(int $id): array
                 'file_model_id' => $modelM->id,
                 'model_name' => $postModelName,
             ];
-
+
+            $modelFileList = D3FilesComponent::getModelFilesList($postModelName, $modelM->model_id);
+
             $hasPreview = Yii::$app->request->get('preview');
 
+            // Preview buttons for D3FilesPreviewWidget file list
             if ($hasPreview) {
-                $modelFileList = D3FilesComponent::getModelFilesList($postModelName, $modelM->model_id);
 
                 $previewExtensions = '/(gif|pdf|jpe?g|png)$/i';
 
@@ -149,11 +153,46 @@ public function run(int $id): array
                     $renderParam['previewButtonContent'] = '';
                 }
             }
-
+
+            /**
+             *  Preview data for Kartik File Input
+             *  See the documentation examples: https://plugins.krajee.com/file-input-ajax-demo/6
+             *  @TODO - move inside loop to process $_FILE array (support multiple files upload)
+             */
+            $initialPreview = [];
+            $initialPreviewConfig = [];
+
+            // URL to open the file
+            $initialPreview[] =  Url::to([
+                'd3filesopen',
+                'id' => $modelM->id,
+                'model_name_id' => $model_name_id,
+            ], true);
+            $initialPreviewConfig[] = [
+                'key' => $modelM->id,
+                'caption' =>  $model->file_name,
+                'size' => filesize($fileHandler->getUploadedFilePath()),
+                // URL to download the file
+                'downloadUrl' => Url::to([
+                    'd3filesdownload',
+                    'id' => $modelM->id,
+                    'model_name_id' => $model_name_id,
+                ], true),
+                // URL to delete the file
+                'url' => Url::to([
+                    'd3filesdelete',
+                    'id' => $modelM->id,
+                    'model_name_id' => $model_name_id,
+                ], true),
+            ];
+
             return [
                 self::STATUS => self::STATUS_SUCCESS,
                 self::MESSAGE => Yii::t('d3files', 'File uploaded successfully.'),
-                'content' => $this->controller->renderFile($d3filesModule->getView('d3files/upload'), $renderParam)
+                'content' => $this->controller->renderFile($d3filesModule->getView('d3files/upload'), $renderParam),
+                'initialPreview' => $initialPreview,
+                'initialPreviewConfig' => $initialPreviewConfig,
+                'initialPreviewAsData' => true,                
             ];
         } catch (HttpException | NotFoundHttpException $e) {
             Yii::error($e->getMessage());

widgets/D3FilesUploadWidget.php

@@ -84,10 +84,13 @@ public function init(): void
                 'showPreview' => $this->showPreview,
                 'showCaption' => $this->showCaption,
                 'showRemove' => $this->showRemove,
+                'overwriteInitial' => false,
+                'initialPreviewAsData' => true,
             ];
 
             if (true === $this->ajaxUpload) {
                 $this->pluginOptions['uploadUrl'] = Url::to($url);
+                $this->pluginOptions['deleteUrl'] = Url::to([$this->urlPrefix . 'd3filesdelete']);
                 $this->pluginOptions['uploadExtraData'] = $this->uploadExtraData;
 
                 if (null === $this->showUpload && ! $this->autostart) {