[英]Dropzone - Can't set custom Dropzone.js options
I am trying to use Dropzone.js on my Laravel website. 我正在尝试在Laravel网站上使用Dropzone.js 。
This is my setup: 这是我的设置:
index.blade.php
: index.blade.php
:
<form action="/documents" method="POST" class="dropzone" id="my-dropzone" enctype="multipart/form-data">
@csrf
</form>
And in my app.js
file, I have below code: 在我的
app.js
文件中,我有以下代码:
window.Dropzone = require('dropzone');
(function () {
Dropzone.autoDiscover = false;
Dropzone.options.myDropzone = {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 1, // MB
acceptedFiles: 'image/*,application/pdf',
parallelUploads: 8,
addRemoveLinks: false,
createImageThumbnails: false,
autoProcessQueue: true,
previewTemplate: document.getElementById('dropzone-preview-template').innerHTML,
accept: function (file, done) {
console.log(file.name)
},
};
});
The actual Dropzone element is appearing on the page, and I can use it to upload files. 实际的Dropzone元素显示在页面上,我可以使用它来上传文件。 However, my
Dropzone.options
are not being respected. 但是,我的
Dropzone.options
没有得到尊重。
For example, I can upload files larger than 1MB, I can upload all file types, even though I only want to be able to upload images and PDF files. 例如,即使我只希望能够上传图像和PDF文件,我也可以上传大于1MB的文件,可以上传所有文件类型。
If I move this: Dropzone.autoDiscover = false;
如果我移动它:
Dropzone.autoDiscover = false;
outside the (function () {});
在
(function () {});
, the Dropzone element don't work at all. ,Dropzone元素根本不起作用。
What do I do wrong? 我做错了什么?
You have surrounded your code in a anonymous function but are not calling it, so the plugin options code is not being executed. 您已经将代码包含在匿名函数中,但是没有调用它,因此不会执行插件选项代码。 Either remove this anonymous function, or call it, like so:
删除该匿名函数或调用它,如下所示:
(function () {
})(); // call the function
try it like this instead: 像这样尝试:
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#dropzone", {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 1, // MB
acceptedFiles: "image/*,application/pdf",
parallelUploads: 8,
addRemoveLinks: false,
createImageThumbnails: false,
autoProcessQueue: true,
previewTemplate: document.getElementById("dropzone-preview-template")
.innerHTML,
accept: function(file, done) {
console.log(file.name);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.