Отключение кнопки отправки, если загрузка файла не завершена в dropzone js
У меня есть две формы, где я загружаю два разных файла. Я использую одну кнопку отправки для обработки обоих файлов. Здесь я хочу отключить кнопку отправки, когда файл не загружен или загружен только один файл
Вот мой код
<html>
<script>
Dropzone.options.myDropzone = {
Dropzone.autoDiscover = false;
addRemoveLinks: true,
autoProcessQueue: true,
maxFiles: 1,
queueLimit:1,
accept: function(file, done) {
console.log("uploaded");
done();
},
};
Dropzone.options.myDropzone1 = {
Dropzone.autoDiscover = false;
addRemoveLinks: true,
autoProcessQueue: true,
maxFiles: 1,
queueLimit:1,
accept: function(file, done) {
console.log("uploaded");
done();
},
};
</script>
<body>
<form action="{% url 'myapp:upload_dropzone1' %}" id="my-dropzone" class="dropzone" method="post" required enctype="multipart/form-data">
{% csrf_token %}
<div class="fallback">
<input name="file" type="file" />
</div>
</form>
<form action="{% url 'myapp:upload_dropzone2' %}" id="my-dropzone1" class="dropzone" method="post" required enctype="multipart/form-data">
{% csrf_token %}
<div class="fallback">
<input name="file" type="file" />
</div>
</form>
<button type="submit" id="validate" >Submit</button>
</body>
</html>
2 ответа
Решение
Попробуй это:
<html>
<script>
var RemainingUploads = 2;
function checkEndUploads(){
if(!RemainingUploads)
document.getElementById("submitButton").disabled = false;
}
}
Dropzone.options.myDropzone = {
Dropzone.autoDiscover = false;
addRemoveLinks: true,
autoProcessQueue: true,
maxFiles: 1,
queueLimit:1,
accept: function(file, done) {
console.log("uploaded");
done();
},
success: function(){
RemainingUploads --;
checkEndUploads();
}
};
Dropzone.options.myDropzone1 = {
Dropzone.autoDiscover = false;
addRemoveLinks: true,
autoProcessQueue: true,
maxFiles: 1,
queueLimit:1,
accept: function(file, done) {
console.log("uploaded");
done();
},
success: function(){
RemainingUploads --;
checkEndUploads();
}
};
</script>
<body>
<form action="{% url 'myapp:upload_dropzone1' %}" id="my-dropzone" class="dropzone" method="post" required enctype="multipart/form-data">
{% csrf_token %}
<div class="fallback">
<input name="file" type="file" />
</div>
</form>
<form action="{% url 'myapp:upload_dropzone2' %}" id="my-dropzone1" class="dropzone" method="post" required enctype="multipart/form-data">
{% csrf_token %}
<div class="fallback">
<input name="file" type="file" />
</div>
</form>
<button id="submitButton" type="submit" id="validate" disabled="disabled">Submit</button>
</body>
</html>
Тестовое задание
uploadMultiple: true
вместо двух отдельных загрузок.