Файл переименования не меняет имя файла в dropzone.js
Я хочу предотвратить загрузку файла-дубликата из dropzone Моя дропзона принимает только два файла, поэтому я хочу проверить, имеет ли второй файл то же имя файла, что и первый, если это так, измените второе имя файла.
используя функцию renameFile
Я добавил оператор if, который проверяет, равно ли содержимое файла оператор if не выполняется, если условие истинно
используя простую версию файл переименовывается при отправке на сервер, но не переименовывается внутри dropzone
renameFile: function (file) {
let filename = file.name = "sdsdds.xlsx";
return filename;
renameFile: function (file) {
let name = file.name
let div_children = $('.dz-filename').children();
// get filename of already existing file
if (div_children.eq(0).text() !== ""){
if (div_children.eq(0).text() === div_children.eq(1).text() ) {
console.info(file.name)
let filename = file.name = "sdsdds"
return filename;
}
}
},
document.addEventListener("DOMContentLoaded", function() {
Dropzone.options.dropform = {
maxFiles: 2,
addRemoveLinks: true,
maxFilesize: 2,
parallelUploads: 1, //
renameFile: function(file) {
let name = file.upload.filename
let div_children = $('.dz-filename').children();
// get filename of already existing file
if (div_children.eq(0).text() !== "") {
if (div_children.eq(0).text() === div_children.eq(1).text()) {
console.info(name)
return name = "sdsdds"
}
}
//
},
};
});<html lang = "en">
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.1/min/dropzone.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/min/dropzone.min.js"></script>
</head>
<body>
<form id = "dropform" action = "{{ url_for('receave_files') }}" class = "dropzone">
</form>
</body>
</html>добавил один, файлы не могут быть загружены, хотя
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Во-первых, разместите autoDiscover форму и инициируйте ее. Это происходит до DOMContentLoaded, поэтому все, что вы делаете после, ничего не делает (вы можете заметить, что ни один из параметров не влияет).
Во-вторых, документы могут быть недостаточно четкими, но file.upload.filename доступен после загрузки файла. Это использовалось для определения фактического имени (file.name) и нового имени, если оно было переименовано (file.upload.filename).
Таким образом, вы должны использовать не file.upload.filename, а file.name.
В-третьих, я рекомендую не использовать html, чтобы узнать имя другого файла. Это не контракт, поэтому он может измениться и сломать ваше приложение.
Вместо этого я бы рекомендовал запускать плагин вручную. Таким образом, вы можете получить экземпляр dropzone и запросить его о загруженных файлах.
Dropzone.autoDiscover = false;
const myDropzone = new Dropzone("#dropform", {
//..
renameFile: function(file) {
const { files } = myDropzone;
const { name } = file;
if (files.some(file => file.name === name)) {
return name + Date.now();
}
return name;
}
});
Демо
document.querySelector('button').addEventListener('click', () => {
const names = myDropzone.files.map(({
upload
}) => upload.filename).join();
alert(names);
});
Dropzone.autoDiscover = false;
const myDropzone = new Dropzone("#dropform", {
url: "/",
maxFiles: 2,
addRemoveLinks: true,
maxFilesize: 2,
parallelUploads: 1,
init: function() {
this.on("addedfile", function(file) {
file.previewElement.querySelector('[data-dz-name]').textContent = file.upload.filename;
});
},
renameFile: function(file) {
const { files } = myDropzone;
const { name } = file;
if (files.some(file => file.name === name)) {
return name + Date.now();
}
return name;
}
});<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.1/min/dropzone.min.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/dropzone.js"></script>
<div id = "dropform" class = "dropzone">
</div>
<br />
<button>alert files name</button>https://jsbin.com/huvoyiw/edit?html,js,output
Обновлять
Чтобы также обновить пользовательский интерфейс, вы можете прослушать addedfile и соответствующим образом обновить DOM. Как я уже упоминал, я чувствую себя очень комфортно с этим, потому что dropzone может изменить DOM, и функциональность будет тормозить, но это делает свою работу.
init: function() {
this.on("addedfile", function(file) {
file.previewElement.querySelector('[data-dz-name]').textContent = file.upload.filename;
});
},
https://jsbin.com/qoxakod/edit?js,выход
спасибо за рекомендации. Я не совсем уверен, где переименовать файл, чтобы имя файла изменилось и в элементе span, это нужно сделать внутри renameFile или снаружи?
Я обновил ответ, дайте мне знать, если что-то не понятно.
Можете ли вы создать рабочий пример? Так вам будет намного проще помочь..