Dropzone

Question

我正在与 Laravel 5.5 合作。我一直在尝试让 Dropzone 处理来自语言文件的自定义消息。我已根据此论坛中的帖子尝试了一些组合，但无法正常工作。

使用 webpack 我像这样导入 Dropzone：

window.Dropzone = require('dropzone');

无论我的代码是否存在，模态都以 Dropzone 形式出现，因此它忽略了我在下面的选项。

我错过了什么？

我有一个FIDDLE here.

使用 webpack 我像这样导入 Dropzone：

window.Dropzone = require('dropzone');

这是我的 Dropzone 代码：

    var removeButton = '<button id="dz-remove-file-button" class="btn btn-danger">{{ trans("messages.remove") }}</button>';
    Dropzone.autoDiscover = true;

    $('#showPopUpUpload').on('show.bs.modal', function () {

        $mh.animateModal('showPopUpUploadDialog', 'open');

    }).on('hide.bs.modal', function () {

        $mh.animateModal('showPopUpUploadDialog', 'close');
        Dropzone.forElement("#dropzone-form").removeAllFiles(true);

    });

    $('.show_upload').click(function () {
        $('#showPopUpUpload').modal('show');
    });

    // Dropzone for file uploads
    Dropzone.options.dropzoneForm = {
        dictDefaultMessage: "{{ trans('messages.dict_default_message') }}",
        dictFallbackMessage: "{{ trans('messages.dict_fallback_message') }}",
        dictFallbackText: "{{ trans('messages.dict_fallback_text') }}",
        dictFileTooBig: "{{ trans('messages.dict_file_too_big') }}",
        dictInvalidFileType: "{{ trans('messages.dict_invalid_file_type') }}",
        dictResponseError: "{{ trans('messages.dict_response_error') }}",
        dictCancelUpload: "{{ trans('messages.dict_cancel_upload') }}",
        dictUploadCanceled: "{{ trans('messages.dict_upload_canceled') }}",
        dictCancelUploadConfirmation: "{{ trans('messages.dict_cancel_upload_confirmation') }}",
        dictRemoveFile: "{{ trans('messages.dict_remove_file') }}",
        dictRemoveFileConfirmation:   "{{ trans('messages.dict_remove_file_confirmation') }}",
        dictMaxFilesExceeded: "{{ trans('messages.dict_max_files_exceeded') }}",
        init: function () {
            this.on('addedfile', function (file) {

                $('.dz-default').empty();
                $('.dz-default').text("{{ trans('messages.file_importing') }}");

            });
            this.on('success', function (file, responseText) {

                if (responseText.type === 'error') {

                    var message = "{{ trans('messages.file_import_error') }}<br/>";

                    $.each(responseText, function (index, value) {
                        if ($.isArray(value)) {
                            $.each(value, function (index, valueMsg) {
                                if (valueMsg !== 'error') {
                                    message = message + '<br/>' + valueMsg;
                                }
                            });
                        } else {
                            if (value !== 'error') {
                                message = message + value;
                            }
                        }
                    });

                    $('.dz-success-mark').hide();
                    $('.dz-error-mark').show();
                    $('.dz-error-message').html(message).show();

                    var removeButton = Dropzone.createElement(removeButton);
                    var _this        = this;
                    removeButton.addEventListener("click", function (e) {
                        e.preventDefault();
                        e.stopPropagation();
                        _this.removeFile(file);
                        $('.dz-success-mark').hide();
                        $('.dz-error-mark').hide();
                        $('.dz-error-message').text('').hide();
                        $('.dz-default').text(Dropzone.prototype.defaultOptions.dictDefaultMessage);
                    });
                    file.previewElement.appendChild(removeButton);

                } else {

                    this.removeAllFiles(true);
                    $('#upload_file').modal('hide');

                    if (redirectSuccessRoute) {
                        window.location.href = redirectSuccessRoute;
                    }

                }

            });
            this.on("error", function (file, responseText) {
                var removeButton = Dropzone.createElement(removeButton);
                var _this        = this;
                removeButton.addEventListener("click", function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    _this.removeFile(file);
                    $('.dz-success-mark').hide();
                    $('.dz-error-mark').hide();
                    $('.dz-error-message').text('').hide();
                    $('.dz-default').text(Dropzone.prototype.defaultOptions.dictDefaultMessage);
                });
                file.previewElement.appendChild(removeButton);

                var message = '';
                $('.dz-error-message').empty();
                if ($.isArray(responseText)) {
                    $.each(responseText, function (index, value) {
                        if ($.isArray(value)) {
                            $.each(value, function (index, valueMsg) {
                                message = message + '<br/>' + valueMsg;
                            });
                        } else {
                            message = value;
                        }
                    });
                    $('.dz-error-message').html(message);
                } else {
                    $('.dz-error-message').html(responseText);
                }
            });
        },
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        previewTemplate: '<div class="dz-preview dz-file-preview">' +
                         '<div class="dz-details">' +
                         '<div class="dz-filename">' +
                         '<span data-dz-name></span>' +
                         '</div>' +
                         '<div class="dz-size" data-dz-size></div>' +
                         '<img data-dz-thumbnail />' +
                         '</div>' +
                         '<div class="dz-progress-container">' +
                         '<div class="dz-progress">' +
                         '<span class="dz-upload" data-dz-uploadprogress></span>' +
                         '</div>' +
                         '</div>' +
                         '<div class="dz-success-mark">' +
                         '<span><i class="fas fa-check-circle"></i></span>' +
                         '</div>' +
                         '<div class="dz-error-mark">' +
                         '<span><i class="fas fa-times-circle"></i></span>' +
                         '</div>' +
                         '<div class="dz-error-message">' +
                         '<span data-dz-errormessage></span>' +
                         '</div>' +
                         '</div>',
        paramName: "file",
        acceptedFiles: '.csv',
        maxFilesize: 5.00,  // 5MB file size max for logo
        maxFiles: 1,
        autoProcessQueue: true
    };

Answer 1

我只需要在 $(document).ready() 调用之外进行 Dropzone.options 调用。

Dropzone - 自定义文本消息以用于语言

Dropzone - customise text messages for use with languages

javascript

laravel-5.5