How to properly use dropzone.js in yii2?

Question

Yii

I have this field in view:

<div class="form-group row">
    <label for="input1" class="col-sm-2 col-form-label">
        <?= $model->getAttributeLabel('photo') ?>
    </label>
    <div class="col-sm-10 js__dropzone js__dropmulti">
        <div class="dz-message needsclick">
            Drop photo here or click to upload.
        </div>
        <?= $form
            ->field($model, 'photo')
            ->hiddenInput([
                'class' => 'js__dropzone__hidden-file-name'
            ])
            ->label(false) ?>
    </div>
</div>

also have this config for dropzone

$(".js__dropzone").dropzone({
            parallelUploads: 1,
            uploadMultiple: false,
            acceptedFiles: "image/*",
            maxFiles: 3,
            url: "/ajax/drop-zone",
            previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n  <div class=\"dz-image\"><img data-dz-thumbnail /></div>\n  <div class=\"dz-details\">\n    <div class=\"dz-size\"><span data-dz-size></span></div>\n    <div class=\"dz-filename\"><span data-dz-name></span></div>\n  </div>\n  <div class=\"dz-progress\"><span class=\"dz-upload\" data-dz-uploadprogress></span></div>\n  </div>",

            init: function() {
                this.on("maxfilesexceeded", function(file) {
                    this.removeAllFiles();
                    this.addFile(file);
                });
            },
            success: function (file, response) {
                if (response.result != undefined && response.result == 'success') {
                    $('.js__dropzone__hidden-file-name').val(response.fileName);
                }
            }
        });

when I save the form with two photos, then only the name of one photo is written in the $model, 'photo' field.
I guess the problem is that I'm using ->hiddenInput(). how can I replace it so that the names of both photos are sent to the server and that this element is not displayed on the page? using vanilla dropzone.js

Answer 1

Good morning.
Try doing this:
uploadMultiple: true