How to implement kartik yii2 FileInput in form which is using different model

Question

Here is the code located in myyiiapp\backend\views\product_form.php

<?php

use yii\helpers\Html;
use yii\widgets\ActiveForm;
use kartik\widgets\FileInput;

/**
 * @var yii\web\View $this
 * @var backend\models\Product $model
 * @var yii\widgets\ActiveForm $form
 */
?>

<div class="product-form">

    <?php $form = ActiveForm::begin(); ?>

    <?= $form->field($model, 'category_id')->textInput() ?>

    <?= $form->field($model, 'name')->textInput(['maxlength' => 255]) ?>

    <?= $form->field($model, 'description')->textarea(['rows' => 6]) ?>

    <?= $form->field($model, 'created')->textInput() ?>

    <?= $form->field($model, 'last_updated')->textInput() ?>

    <?= $form->field($model, 'documentation')->textInput(['maxlength' => 255]) ?>

    <?= $form->field($model, 'layout')->textInput() ?>

    <?=
    // Usage with ActiveForm and model
     $form->field($model, 'someAttributeName')->widget(FileInput::classname(), [
        'options' => ['accept' => 'image/*'],
    ]);

    ?>

    <div class="form-group">
        <?= Html::submitButton($model->isNewRecord ? Yii::t('app', 'Create') : Yii::t('app', 'Update'), ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
    </div>

    <?php ActiveForm::end(); ?>

</div>

I have a table name "product" and I have another table name "product_images" which contain product image path and product id column.

How can I set attribute where it says someAttributeName for image which is in ProductImage model and this form is using Product model. In short how can we use multiple model in here and I need to create product first then image path because to save image path I need product id which is going to be auto generated by mysql.

I have generated everything from Yii2 crud.

Answer 1

Finally after too many trial and error I've found the solution of my own question.

View : _form.php

<?php

use yii\helpers\Html;
use yii\widgets\ActiveForm;
use kartik\widgets\FileInput;

/**
 * @var yii\web\View $this
 * @var backend\models\Product $model
 * @var yii\widgets\ActiveForm $form
 */
?>

<div class="product-form">

    <!--change here: This form option need to be added in order to work with multi file upload ['options' => ['enctype'=>'multipart/form-data']]-->
    <?php $form = ActiveForm::begin(['options' => ['enctype'=>'multipart/form-data']]); ?>

    <?= $form->field($model, 'category_id')->dropDownList($model->getCategoryList()) ?>

    <?= $form->field($model, 'name')->textInput(['maxlength' => 255]) ?>

    <?= $form->field($model, 'description')->textarea(['rows' => 6]) ?>

    <?= $form->field($model, 'created')->textInput() ?>

    <?= $form->field($model, 'last_updated')->textInput() ?>

    <?= $form->field($model, 'documentation')->textInput(['maxlength' => 255]) ?>

    <?= $form->field($model, 'layout')->textInput() ?>

    <?php

    // Usage with ActiveForm and model
    //change here: need to add image_path attribute from another table and add square bracket after image_path[] for multiple file upload.
     echo $form->field($productImages, 'image_path[]')->widget(FileInput::classname(), [
        'options' => ['multiple' => true, 'accept' => 'image/*'],
        'pluginOptions' => [
            'previewFileType' => 'image',
            //change here: below line is added just to hide upload button. Its up to you to add this code or not.
            'showUpload' => false
        ],
    ]);
    ?>

    <div class="form-group">
        <?= Html::submitButton($model->isNewRecord ? Yii::t('app', 'Create') : Yii::t('app', 'Update'), ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
    </div>

    <?php ActiveForm::end(); ?>

</div>

Controller

public function actionCreate()
    {
        $model = new Product;
        $productImages = new ProductImages;

        if($_POST){
            //below line will fetch all image related data and put it into $file as an object. Refer output of var_dump($file) after controller code.
            $file = UploadedFile::getInstances($productImages, 'image_path');
            var_dump($file);
        }

        //below code is where you will do your own stuff. This is just a sample code need to do work on saving files
        if ($model->load(Yii::$app->request->post()) && $model->save()) {
            return $this->redirect(['view', 'id' => $model->id]);
        } else {
            return $this->render('create', [
                'model' => $model,
                'productImages' => $productImages,
            ]);
        }
    }

var_dump($file) This will show output of uploaded image data.

array (size=3)
  0 => 
    object(yii\web\UploadedFile)[45]
      public 'name' => string '1.jpg' (length=5)
      public 'tempName' => string 'D:\wamp\tmp\php8E46.tmp' (length=23)
      public 'type' => string 'image/jpeg' (length=10)
      public 'size' => int 77593
      public 'error' => int 0
  1 => 
    object(yii\web\UploadedFile)[46]
      public 'name' => string '2.jpg' (length=5)
      public 'tempName' => string 'D:\wamp\tmp\php8E56.tmp' (length=23)
      public 'type' => string 'image/jpeg' (length=10)
      public 'size' => int 74896
      public 'error' => int 0
  2 => 
    object(yii\web\UploadedFile)[47]
      public 'name' => string '3.jpg' (length=5)
      public 'tempName' => string 'D:\wamp\tmp\php8E57.tmp' (length=23)
      public 'type' => string 'image/jpeg' (length=10)
      public 'size' => int 72436
      public 'error' => int 0