How to upload multiple file in YII2 using Dropzone?

Question

I am trying to upload multiple file using DropZone. But get problem while retrieving the file name in controller. Please help me to find out where i have made mistake. I have posted my code below.

HTML Code For the DropZone:

<div class="dropzone dropzone-file-area" id="my-dropzone"></div>
<div class="form-group">
<?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update',
                ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary',
                    'id' => 'imageSubmit']) ?>
        </div>

SCRIPT File For :

    <?php
$htmlString = "http://localhost/project/backend/web/news/create";
$this->registerJs(
    "Dropzone.autoDiscover = false;
  $(document).ready(function() {
      var myDropzone = new Dropzone('#my-dropzone', {
          url: '$htmlString',
          autoProcessQueue: false,
          enqueueForUpload: false,
          autoDiscover: false,
          addRemoveLinks: true,
          uploadMultiple: true,
          paramName: 'News[imgFiles]',
          maxFiles: 10,
          maxFilesize: 2,
          parallelUploads: 10,
          acceptedFiles: 'image/*',
          params: {
              '_csrf-backend': $('input[name=_csrf-backend]').val()
          },
          success: function (file, response) {
            var imgName = response;
            file.previewElement.classList.add('dz-success');
            console.log('Successfully uploaded :' + imgName);

        },

           init: function () {

            var myDropzone = this;

           var submitButton = document.querySelector('#imageSubmit');

            submitButton.addEventListener('click', function (file) {

                if (myDropzone.getQueuedFiles().length > 0) {

                    var submitfiles = false;

                    if (submitfiles === true) {
                        submitfiles = false;
                        return;
                    }

                    file.preventDefault();
                    myDropzone.processQueue();

                    myDropzone.on('complete', function (data, xhr, formData) {
                        submitfiles = true;
                        $('#imageSubmit').trigger('click');
                    });

                }
            });
        }
      });

  });", $this::POS_END);

At Controller actionCreate() method:

 public function actionCreate()
{
    $model = new News();
    if (Yii::$app->request->isAjax) {
        if ($model->load(Yii::$app->request->post())) {
            if ($model->save()) {
                Yii::$app->session->setFlash("success", "success");
                return true;
            } else {
                print_r($model);
                exit;
            }
        }
    }
    if ($model->load(Yii::$app->request->post()) ) {
        $model->imageFiles = UploadedFile::getInstances($model, 'imgFiles');
        return $this->redirect(['view', 'id' => $model->id]);
    } else {
        return $this->render('create', [
            'model' => $model,
        ]);
    }
}

When i added picture on drag and drop box and click on submit button then the picture in drag and drop box show success result. But When i am trying to print the $model->imageFiles, it return Array with empty. And I am expecting the submitting from will Yii::$app->request->isAjax == ture but it always false in my case. What's the problem?

Answer 1

Maybe this package help you. composer require --prefer-dist perminder-klair/yii2-dropzone "dev-master". It's for form attribute:

<?= $form->field($model, 'city_id')->widget(DropZone::className(), [
        'options'      => [
            'maxFilesize' => '2',
        ],
        'clientEvents' => [
            'complete'    => "function(file){console.log(file)}",
            'removedfile' => "function(file){alert(file.name + ' is removed')}",
        ],
    ]) ?>

And It's for controller action:

public function actionUpload()
{
    $fileName = 'file';
    $uploadPath = './files';

    if (isset($_FILES[$fileName])) {
        $file = \yii\web\UploadedFile::getInstanceByName($fileName);

        //Print file data
        //print_r($file);

        if ($file->saveAs($uploadPath . '/' . $file->name)) {
            //Now save file data to database

            echo \yii\helpers\Json::encode($file);
        }
    }

    return false;
}