V
V
Vitaly2017-07-26 10:11:52
JavaScript
Vitaly, 2017-07-26 10:11:52

ActiveField and Dropzone.js?

Good afternoon. Help me to understand. There is a class ActiveField inherited from ActiveField yii2, it implements the fileUpload method which actually implements dropzone. Everything works fine while on the page this method is called in a single instance, but as soon as there are a lot of them, it stops working.
The activation binding of the dropzone itself goes to a variable on the page being tested. There are 9 such dropzones. Multi-upload in this case is not used because for each image there are separate fields such as title, description, etc. So, if you print in the activation code itself, then in the console instead of logotypes-0url logotypes-1-url logotypes-2-url logotypes-3-url logotypes-4-url logotypes-5-url$inputId = static::getInputId();
console.log('$inputId');
logotypes-6-url
logotypes-7-url
logotypes-8-url
logotypes-9-url
get
logotypes-9-url
logotypes-9-url
logotypes-9-url
logotypes-9-url
logotypes-9-url
logotypes-9- url
logotypes-9-url
logotypes-9-url
logotypes-9-url
logotypes-
9-url

public function fileUpload($action, $options=[])
    {
        DropZoneAsset::register(Yii::$app->view);
        $width = isset($options['dropzoneWidth']) ? $options['dropzoneWidth'] : $width = '100';
        $height = isset($options['dropzoneHeight']) ? $options['dropzoneHeight'] : $height = '100';
        $size = isset($options['size']) ? $options['size'] : $size = 'original';
        $title = isset($options['title']) ? $options['title'] : $title = $this->t('', 'Перетащите сюда файлы или нажмите для загрузки');
        $info = isset($options['info']) ? $options['info'] : $info = $this->t('', 'Выбранные файлы не загружены');
        $delete = $this->t('', 'Удалить');
        if(empty($action)){
            throw new InvalidCallException('You must enter an action in the form ' . get_called_class());
        }
        if($size == null && $size == 'original'){
            $size = 'original';
        }elseif($size == 'mini'){
            $size = '29x29';
        }
        if($width !== null && $height !== null){
            $size = 'original';
        }
        $this->textInput()->template = "{input}";

        $InputHtml = $this->textInput(['class' => 'form-control']);
        $label = isset($options['label']) ? $options['label'] : $label = "";
        if (!array_key_exists('id', $options)) {
            $inputId = static::getInputId();
        }

        if(strstr($this->attribute, '[')){
            $attr = explode(']', $this->attribute);
            $id = str_replace('[', '', $attr[0]);
        }
        else
        {
            $id = 0;
        }

        $inputCol = explode('-', $this->column);
        $labelCol = 12 - $inputCol[2];
        $labelColumn = 'control-label col-md-' . $labelCol;
        $labelTemplate = "<label class='$labelColumn'>" . $this->model->getAttributeLabel($label) . "</label>";


        $domain = Yii::$app->params['filebox']['domain'];
        $attribute = $this->getCleanedAttributeName($this->attribute);
        $urlResize = Filebox::getUrlResize($this->model->$attribute, $size);

        $customTemplate = "<div class='form-group dropzone-wrap'>" . $labelTemplate . "<div class='$this->column'><div id='my-dropzone-$id' class='dropzone dropzone-file-area' action='$action'><h3 class='sbold'>$title</h3><p>$info</p></div></div><div class='clearfix'></div>". str_replace('control-label', $labelColumn, $InputHtml) . "</div>";

    Yii::$app->view->registerJs(<<<EOD

       var FormDropzone$id = function () {
        return {
            //main function to initiate the module
            init: function () {
              console.log('$inputId');

                Dropzone.options.myDropzone$id = {
                    //thumbnailWidth: $width,
                    //thumbnailHeight: $height,
                    acceptedFiles: 'image/*, application/*',
                    headers: {
                        "Accept": "",
                        "Cache-Control": "",
                        "X-Requested-With": "XMLHttpRequest"
                    },
                    dictDefaultMessage: "",
                    init: function() {

                    if ($("#$inputId").val() != '') {
                        var id = $("#$inputId").val();
                        id = id.replace('$domain', '');
                        var dropzone = this;
                        $.ajax({
                            url: '$domain/file/info/',
                            dataType: 'json',
                            data: {
                                id : id
                            },
                        }).success(function(mockFile){
                            dropzone.emit("addedfile", mockFile);
                            dropzone.emit("thumbnail", mockFile, '$urlResize');
                            $("#$inputId").val();
                            $('.dz-progress').hide();
                        });
                    }
                        this.on("addedfile", function(file) {
                            // Create the remove button
                            var removeButton = Dropzone.createElement("<a href='javascript:;'' class='btn red btn-sm btn-block'>$delete</a>");

                            // Capture the Dropzone instance as closure.
                            var _this = this;

                            // Listen to the click event
                            removeButton.addEventListener("click", function(e) {
                                // Make sure the button click doesn't submit the form:
                                e.preventDefault();
                                e.stopPropagation();

                                // Remove the file preview.
                                _this.removeFile(file);
                                // If you want to the delete the file on the server as well,
                                // you can do the AJAX request here.
                            });

                            // Add the button to the file preview element.
                            file.previewElement.appendChild(removeButton);
                        });
                        this.on("success", function(file, responseText) {
                            var result = jQuery.parseJSON(responseText);
                        console.log(result.domain + result.File);
                        console.log(result);
                        if (result.File != null) {
                            $('#$inputId').val(result.domain + result.File);
                           
                        }
                            // Handle the responseText here. For example, add the text to the preview element:

                        });
                        //console.log($('#$inputId').val())
                    }
                }
            }
        };
    }();
    jQuery(document).ready(function() {
        FormDropzone$id.init();
        

       });
EOD
                , yii\web\View::POS_END
            );
        return $customTemplate;
    }

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question