I am trying to save an image type file by using jquery to trigger the submit. I encountered an issue where it triggers even when the change event is not done.

View create.php:

<?php \yii\bootstrap4\ActiveForm::begin([
    'options' => [
        'enctype' => 'multipart/form-data',
        'id' => 'dynamic-form'
    ]
]) ?>

<button class="btn btn-primary btn-file">
    Select Thumbnail
    <input type="file" id="recipeThumbnail" name="recipe">
</button>

<?php \yii\bootstrap4\ActiveForm::end() ?>

In this view, i specify the id to call it in the javascipt file.

Js app.js:

$(function () {
    'use strict';
    $('#recipeThumbnail').change(ev => {
        $(ev.target).closest('form').trigger('submit');
    })
});

From my understanding here, the trigger('submit') should only run when there is a change which in this case an image file is selected. However, i suspect the event is triggered and it caused an error of Attempt to read property "name" on null from the model below on the line $this->name = $this->recipe->name;. My other suspicion would be error in the model but i cant wrap my head around where or how it could be.

Model recipe.php:

public function save($runValidaiton = true, $attributeNames = null)
{
    $isInsert = $this->isNewRecord;
    if ($isInsert) {
        $this->recipe_id = Yii::$app->security->generateRandomString(16);
        $this->name = $this->recipe->name;
    }
    $saved = parent::save($runValidaiton, $attributeNames);
    if (!$saved) {
        return false;
    }
    if ($isInsert) {
        $recipePath = Yii::getAlias('@frontend/web/storage/thumbnail/' . $this->recipe_id . '.jpg');
        if (!is_dir(dirname($recipePath))) {
            FileHelper::createDirectory(dirname($recipePath));
        }
        $this->recipe->saveAs($recipePath);
    }

    return true;
}

Controller RecipeController.php:

public function actionCreate()
{
    $model = new Recipe();

    $model->recipe = UploadedFile::getInstanceByName('recipe');
    
    if ($this->request->isPost) {
        if (Yii::$app->request->isPost && $model->save()) {
            return $this->redirect(['view', 'recipe_id' => $model->recipe_id]);
        }

    } else {
        $model->loadDefaultValues();
    }

    return $this->render('create', [
        'model' => $model,
    ]);
}

I hope i explained this well. Is this error actually caused by the js or something else and any insight on this issue is much appreciated:D