How to fix Ajax image upload error (Dropzone.Js)?

Question

JavaScript

I am using this image uploader: https://github.com/perminder-klair/yii2-dropzone
Extension settings:

echo \kato\DropZone::widget([
        'options' => [
            'maxFilesize' => '1',
            'uploadMultiple' => true,
            'url' => '/admin/works/upload',
            'addRemoveLinks' => true,
        ],
        'clientEvents' => [
            'complete' => "function(data){console.log(data)}"
        ],
    ]);

Method :

public function actionUpload()
    {
        $file = UploadedFile::getInstanceByName('file');
        $file->saveAs($_SERVER['DOCUMENT_ROOT'] . '/frontend/web/uploads/works/' . $file->baseName . '.' . $file->extension);
        return true;
    }

Error in console:

Failed to load resource: the server responded with a status of 500 (Internal Server Error)
<pre>PHP Fatal Error &#039;yii\base\ErrorException&#039; with message &#039;Call to a member function saveAs() on null&#039; ↵↵in /home/alexander/My_projects/spa.local/backend/controllers/WorksController.php:67↵↵Stack trace:↵#0 [internal function]: yii\base\ErrorHandler-&gt;handleFatalError()↵#1 {main}</pre>"

the error is clear $file is empty, but by default as "paramName = default file" says. www.dropzonejs.com/#configuration-options

Answer 1

var_dump($_FILES);
$file = UploadedFile::getInstanceByName('file');

and see what goes where

Answer 2

File upload indicated in the form?

<?php $form = ActiveForm::begin(['options' => ['enctype' => 'multipart/form-data']]) ?>