Dropzone.autoDiscover=false;
document.addEventListener("DOMContentLoaded", function (){
document.querySelectorAll(".uacf7-dropzone-wrapper .dropzone").forEach(function (dzElem){
const fieldName=dzElem.dataset.field;
const maxSizeBytes=parseInt(dzElem.dataset.maxSize||'5242880');
const maxSize=maxSizeBytes / 1024 / 1024;
const readableMaxSize=formatBytes(maxSizeBytes);
const accepted=dzElem.dataset.accepted.replace(/\|/g, ',').split(',');
const blacklist=(dzElem.dataset.blacklist||'').replace(/\|/g, ',').split(',');
const uploadMultiple=dzElem.dataset.uploadMultiple==="true";
const maxFiles=parseInt(dzElem.dataset.maxFiles||5);
const minFiles=parseInt(dzElem.dataset.minFiles||0);
const validationMessage=dzElem.closest(".uacf7-dropzone-wrapper").querySelector(".validation-message");
let url=uacf7_dropzone_params.ajaxurl + "?action=uacf7_handle_upload&nonce=" + uacf7_dropzone_params.nonce;
const myDropzone=new Dropzone(dzElem, {
url: url,
dictRemoveFile: uacf7_dropzone_params.removeFile,
dictCancelUpload: uacf7_dropzone_params.cancelUpload,
dictCancelUploadConfirmation: uacf7_dropzone_params.uploadCanceled,
dictFallbackMessage: uacf7_dropzone_params.dictFallback,
dictFileTooBig: uacf7_dropzone_params.fileTooBig,
paramName: "file",
minFiles: minFiles,
maxFiles: maxFiles,
maxFilesize: maxSize,
acceptedFiles: accepted.map(type=> type.startsWith('.') ? type:'.' + type).join(','),
addRemoveLinks: true,
dictDefaultMessage: "Select a file to upload",
dictFileTooBig: `File is too big. Max file size allowed: ${readableMaxSize}.`,
thumbnailHeight: 120,
thumbnailWidth: 120,
filesizeBase: 1000,
parallelUploads: 20,
headers: {
"X-WP-Nonce": uacf7_dropzone_params.nonce
},
accept: function (file, done){
const extension=file.name.split('.').pop().toLowerCase();
if(blacklist.includes(extension)){
done("This file type is not allowed.");
}else{
done();
}},
success: function (file, response){
if(response.success&&response.data.url){
file._uploadedURL=response.data.url;
const form=dzElem.closest("form");
if(!form) return;
const hidden=document.createElement("input");
hidden.type="hidden";
hidden.name=dzElem.dataset.field + "[]";
hidden.value=response.data.url;
file._hiddenInput=hidden;
file.previewElement.appendChild(hidden);
validationMessage.textContent='';
validationMessage.style.display="none";
validationMessage.classList.remove("dz-error");
}},
error: function (file, response){
validationMessage.textContent=response;
validationMessage.style.display="block";
validationMessage.classList.add("dz-error");
},
removedfile: function (file){
if(file.previewElement){
const spinner=document.createElement('div');
spinner.className='uacf7-dz-spinner';
spinner.innerHTML='<div class="spinner"></div>';
file.previewElement.appendChild(spinner);
}
if(file._hiddenInput) file._hiddenInput.remove();
if(typeof suppressRemoveAjax!=='undefined'&&suppressRemoveAjax){
if(file.previewElement) file.previewElement.remove();
return;
}
if(!file._uploadedURL){
if(file.previewElement) file.previewElement.remove();
return;
}
fetch(uacf7_dropzone_params.ajaxurl, {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: new URLSearchParams({
action: 'uacf7_delete_file',
url: file._uploadedURL,
nonce: uacf7_dropzone_params.nonce
})
})
.then(res=> res.json())
.then(res=> {
if(!res.success){
console.warn('Failed to delete file:', file._uploadedURL);
}
if(file.previewElement) file.previewElement.remove();
})
.catch(err=> {
console.error('Delete request failed:', err);
if(file.previewElement) file.previewElement.remove();
});
}});
});
});
function formatBytes(bytes){
if(bytes < 1024) return bytes + ' B';
if(bytes < 1024 * 1024) return (bytes / 1024).toFixed(0) + ' KB';
if(bytes < 1024 * 1024 * 1024) return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
return (bytes / (1024 * 1024 * 1024)).toFixed(1) + ' GB';
}
let suppressRemoveAjax=false;
document.addEventListener('wpcf7mailsent', function (event){
const form=event.target;
form.querySelectorAll('.uacf7-dropzone-wrapper').forEach(function (wrapper){
const dzElem=wrapper.querySelector('.dropzone');
if(!dzElem) return;
const dzInstance=Dropzone.forElement(dzElem);
if(dzInstance){
suppressRemoveAjax=true;
dzInstance.removeAllFiles(true);
suppressRemoveAjax=false;
}
const fieldName=dzElem.dataset.field;
const allInputs=wrapper.querySelectorAll(`input[name="${fieldName}[]"]`);
allInputs.forEach(function (input, index){
if(index > 0) input.remove();
else input.value='';
});
});
});