Features of customizing Krajee FileInput widget for Yii2?

Question

Yii

Hello, there is such a plugin for Yii2 Krajee FileInput Widget demos.krajee.com/widget-details/fileinput for uploading files.
The question, perhaps, for those who understand it.
To be honest, I swim in its settings like a pound weight in a pond.
You need to get the following result:
1. The file should load without reloading the page, i.e. using Ajax
2. It is highly desirable to use the standard UploadForm model in the widget

<?php
namespace app\models;

use Yii;
use yii\base\Model;
use yii\web\UploadedFile;

class UploadForm extends Model
{
    /**
     * @var UploadedFile
     */
    public $imageFile;

    public function rules()
    {
        return [
            ,
        ];
    }

    public function upload()
    {
        if ($this->validate()) {
            $this->imageFile->saveAs(Yii::getAlias('@app').'/web/img/' . $this->imageFile->baseName . '.' . $this->imageFile->extension);
            return true;
        } else {
            return false;
        }
    }
}

So far, my customized widget looks something like this:

echo FileInput::widget([
                'model' => $model,
                'attribute' => 'imageFile[]',
                'pluginOptions' => [
                    'uploadUrl' => Url::to(['/site/upload']),
                ],
            ]);

In the controller, in actionUpload, the standard code for loading the form is written:

$model = new UploadForm();

        if (Yii::$app->request->isPost) {
            $model->imageFile = UploadedFile::getInstance($model, 'imageFile');
            if ($model->upload()) {
                // file is uploaded successfully
                return;
            }
        }

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

In short, when trying to download a file, something does not work, in addition to everything, a message is displayed in the browser console:
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check xhr.spec.whatwg.org/.
Actually, I need help setting up a widget...

Answer 1

First: you are using 'attribute' => 'imageFile[]',, which means you need to fix:

$model->imageFile = UploadedFile::getInstances($model, 'imageFile');
Yii::$app->response->format = Response::FORMAT_JSON;
if ($model->upload()) {
  return ['error' => null];
}

/**
* @var UploadedFile[]
*/
public $imageFile;

foreach ($this->imageFile as $imageFile){
  $imageFile->saveAs(Yii::getAlias('@app').'/web/img/' . $imageFile->baseName . '.' . $imageFile->extension);
}

Answer 2

I recorded a video on the topic of setting up yii2-widget-fileinput:

1. uploading photos through a visual editor
   
2. specifically about yii2-widget-fileinput
   
3. yii2-widget-fileinput and multiple upload
   
4. deleting and sorting photos in yii2-widget-fileinput