This is the problem I’m currently having.
I have a form with a text field and a dropzone for uploading files.
Basically what I’m trying to accomplish is that when the user submits the form if the user does not add any files to the dropzone, I want to show a confirmation (using bootstrap-confirmation) on the submit button confirming that they are about to create an empty album.
Here is my Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="/css/lightbox.css">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/dropzone.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/custom.css">
<title>Test Page</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<form class="form newAlbumForm" id="newAlbumForm" role="form">
<div class="form-group">
<input type="text" class="form-control form-control-lg" id="inputNewAlbumName" aria-describedby="newAlbumHelp" placeholder="New Album Name" required>
</div>
</form>
<div>
<div id="myDropzone" style="height:50px;"></div>
<div class="dropzone-previews dropzone"></div>
</div>
<div>
<button type="button" class="btn btn-large btn-primary btnSubmitNewAlbum">
Create Album
</button>
</div>
</div>
</div>
</div>
<script src="/js/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/bootstrap-confirmation.js"></script>
<script src="/js/lightbox.js"></script>
<script src="/js/jquery.cookie.js"></script>
<script src="/js/dropzone.js"></script>
<script src="/reload/reload.js"></script>
<script src="/js/common.js"></script>
<script>
Dropzone.autoDiscover = false;
$(function() {
$('.btnSubmitNewAlbum').confirmation({
btnOkLabel: "Create Album",
btnOkClass: "btn-success",
btnOkIconClass: "material-icons",
btnOkIconContent: "",
btnCancelLabel: "Add photos!",
btnCancelClass: "btn-danger",
btnCancelIconClass: "material-icons",
btnCancelIconContent: "",
title: "Create Empty Album?",
content: "No photos have been added. A new empty album will be created.",
onConfirm: function() {
$('.newAlbumForm').submit();
},
onCancel: function() {
return false;
}
});
var myDropzone = new Dropzone("div#myDropzone", {
url: "/api/upload",
acceptedFiles: "image/*, application/pdf",
autoProcessQueue: false,
previewsContainer: ".dropzone-previews",
});
$('.btnSubmitNewAlbum').click(function(e) {
console.log('Clicked on submit button') //This does not get logged when I click the button
if(!myDropzone.getQueuedFiles().length || myDropzone.getQueuedFiles().length == 0) {
// Enable Confirmation
} else {
// Disable Confirmation
}
});
});
</script>
</body>
</html>
For some reason when I initialize the confirmation on the submit button the click event stops working. If I do not initialize the confirmation the click event works.
How can I enable the confirmation if myDropzone.getQueuedFiles==0
Any help would be greatly appreciated.
I was finally able to solve the problem.
in the bootstrap-confirmation documentation they do not mention the trigger option that can be set to Manual. I found this option in the bootstrap-popover documentation.
So All I had to do is set the
trigger: "manual"option and then call the .confirmation('show') method whenever I want to show the confirmation.