DropZonejs: Soumettre le formulaire sans fichiers
J'ai intégré avec succès dropzone.js dans un formulaire existant. Ce formulaire affiche les pièces jointes et autres entrées telles que les cases à cocher, etc.
Lorsque je soumets le formulaire avec pièces jointes, toutes les entrées sont correctement postées. Cependant, je souhaite permettre à l'utilisateur de soumettre le formulaire sans aucune pièce jointe. Dropzone n'autorise pas la soumission de formulaire sauf s'il existe une pièce jointe.
Est-ce que quelqu'un sait comment je peux remplacer ce comportement par défaut et envoyer le formulaire dropzone.js sans pièce jointe? Je vous remercie!
$( document ).ready(function () {
Dropzone.options.fileUpload = { // The camelized version of the ID of the form element
// The configuration we've talked about above
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 50,
maxFiles: 50,
addRemoveLinks: true,
clickable: "#clickable",
previewsContainer: ".dropzone-previews",
acceptedFiles: "image/*,application/pdf, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.openxmlformats-officedocument.spreadsheetml.template, application/vnd.openxmlformats-officedocument.presentationml.template, application/vnd.openxmlformats-officedocument.presentationml.slideshow, application/vnd.openxmlformats-officedocument.presentationml.presentation, application/vnd.openxmlformats-officedocument.presentationml.slide, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.openxmlformats-officedocument.wordprocessingml.template, application/vnd.ms-Excel.addin.macroEnabled.12, application/vnd.ms-Excel.sheet.binary.macroEnabled.12,text/rtf,text/plain,audio/*,video/*,.csv,.doc,.xls,.ppt,application/vnd.ms-PowerPoint,.pptx",
// The setting up of the dropzone
init: function() {
var myDropzone = this;
// First change the button to actually tell Dropzone to process the queue.
this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
// Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
// of the sending event because uploadMultiple is set to true.
this.on("sendingmultiple", function() {
// Gets triggered when the form is actually being sent.
// Hide the success button or the complete form.
});
this.on("successmultiple", function(files, response) {
window.location.replace(response.redirect);
exit();
});
this.on("errormultiple", function(files, response) {
$("#notifications").before('<div class="alert alert-error" id="alert-error"><button type="button" class="close" data-dismiss="alert">×</button><i class="icon-exclamation-sign"></i> There is a problem with the files being uploaded. Please check the form below.</div>');
exit();
});
}
}
});
Utilisez le suivant:
$('input[type="submit"]').on("click", function (e) {
e.preventDefault();
e.stopPropagation();
var form = $(this).closest('#dropzone-form');
if (form.valid() == true) {
if (myDropzone.getQueuedFiles().length > 0) {
myDropzone.processQueue();
} else {
myDropzone.uploadFiles([]); //send empty
}
}
});
Référence: https://github.com/enyo/dropzone/issues/418
Selon votre situation, vous pouvez simplement soumettre le formulaire:
if (myDropzone.getQueuedFiles().length > 0) {
myDropzone.processQueue();
} else {
$("#my_form").submit();
}
Vous devriez vérifier s'il y a des fichiers dans la file d'attente. Si la file d'attente est vide, appelez directement dropzone.uploadFile (). Cette méthode nécessite de transmettre un fichier. Comme indiqué sur [caniuse] [1], le constructeur de fichier n'est pas pris en charge sur IE/Edge, utilisez donc simplement l'API Blob, car l'API de fichier est basée sur cela.
La méthode formData.append () utilisée dans dropzone.uploadFile () nécessite la transmission d'un objet implémentant l'interface Blob. C'est la raison pour laquelle vous ne pouvez pas passer dans un objet normal.
la version 5.2.0 de dropzone nécessite l'option upload.chunked.
if (this.dropzone.getQueuedFiles().length === 0) {
var blob = new Blob();
blob.upload = { 'chunked': this.dropzone.defaultOptions.chunking };
this.dropzone.uploadFile(blob);
} else {
this.dropzone.processQueue();
}
J'ai essayé la réponse de Matija Grcic et j'ai eu l'erreur suivante:
Uncaught TypeError: Cannot read property 'name' of undefined
Et je ne voulais pas modifier le code source de Dropzone, alors j'ai fait ce qui suit:
if (myDropzone.getQueuedFiles().length > 0) {
myDropzone.processQueue();
} else {
myDropzone.uploadFiles([{name:'nofiles'}]); //send empty
}
Remarque: je passe un objet à l'intérieur du tableau à la fonction uploadFiles.
Ensuite, je vérifie côté serveur, si name! = 'Nofiles' télécharge des éléments.
La première approche est un peu trop chère pour moi, je ne voudrais pas plonger dans le code source et le modifier,
Si vous êtes comme moi, utilisez ceci.
function submitMyFormWithData(url)
{
formData = new FormData();
//formData.append('nameOfInputField', $('input[name="nameOfInputField"]').val() );
$.ajax({
url: url,
data: formData,
processData: false,
contentType: false,
type: 'POST',
success: function(data){
alert(data);
}
});
}
Et dans votre script Dropzone
$("#submit").on("click", function(e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
if (myDropzone.getQueuedFiles().length > 0)
{
myDropzone.processQueue();
} else {
submitMyFormWithData(ajaxURL);
}
});
J'ai utilisé avec succès:
submitButton.addEventListener("click", function () {
if(wrapperThis.files.length){
error = `Please select a file`;
} else {
wrapperThis.processQueue();
}
});