xxxxxxxxxx
Dropzone.options.dropzoneForm = {
autoProcessQueue: false,
uploadMultiple: false,
parallelUploads: 1,
maxFilesize: 3, // 3 MB
filesizeBase: 1024, // Kilobytes
addRemoveLinks: true,
acceptedFiles: ".zip",
init: function() {
var myDropzone = this; // Ensure local scope
$('#upload-file').on('click', function(e) {
e.preventDefault();
myDropzone.processQueue();
});
this.on("complete", function() {
if (this.getQueuedFiles().length === 0 && this.getUploadingFiles().length === 0) {
this.removeAllFiles();
}
});
this.on("addedfile", function(file) {
if (this.files.length > 1) {
// If more than one file is added, remove all but the latest file
for (var i = 0; i < this.files.length - 1; i++) {
this.removeFile(this.files[i]);
}
}
});
},
success: function(file, response) {
window.location.href = response.url;
toastr.success(response.message, 'Success');
},
};
xxxxxxxxxx
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropzone Example</title>
<!-- Include Dropzone CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dropzone@5.9.2/dist/dropzone.css">
</head>
<body>
<div class="container">
<div class="col-md-6">
<!-- Dropzone Container -->
<div id="dropzone" class="dropzone dx-clickable">
<!-- Dropzone Message -->
<div class="dz-message needsclick">
<br>
Drop files here or click to upload.
</div>
</div>
</div>
</div>
<!-- Include Dropzone JS -->
<script src="https://cdn.jsdelivr.net/npm/dropzone@5.9.2"></script>
<!-- Initialize Dropzone -->
<script>
Dropzone.options.dropzone = {
url: '/upload', // Replace with your server-side upload URL
paramName: 'file', // The name that will be used to transfer the file
maxFilesize: 2, // MB
acceptedFiles: 'image/*', // Accept only image files
addRemoveLinks: true, // Show remove links on uploaded files
dictDefaultMessage: 'Drop files here or click to upload',
success: function (file, response) {
// Handle successful uploads
},
error: function (file, response) {
// Handle errors
}
};
</script>
</body>
</html>
xxxxxxxxxx
init: function() {
this.on('addedfile', function(file) {
if (this.files.length > 1) {
this.removeFile(this.files[0]);
}
});
}