DropzoneJs inside a multi field form Hi there, I'm stuck with integration of Dropzone in my Laravel project.
I have a form with some fields, and I would add Dropzone.
My js
Dropzone.autoDiscover = false;
$(document).ready(function (e) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$("#imagesUpload").dropzone({
url: "hn_SimpeFileUploader.ashx",
addRemoveLinks: true,
success: function (file, response) {
var imgName = response;
file.previewElement.classList.add("dz-success");
console.log("Successfully uploaded :" + imgName);
},
error: function (file, response) {
file.previewElement.classList.add("dz-error");
}
});
});
The problem is that I can't upload any file.
I saw the rectangle of Dropzone, but if I click on nothing happen.
I can't understand where is the error.
Can you show us also the form?
I think you are failing to add the headers to the upload.
Try to add a sending event:
$("#imagesUpload").dropzone({
url: "hn_SimpeFileUploader.ashx",
addRemoveLinks: true,
sending: function(data, xhr, formData) {
formData.append('X-CSRF-TOKEN', $('meta[name="csrf-token"]').attr('content'));
}
success: function (file, response) {
var imgName = response;
file.previewElement.classList.add("dz-success");
console.log("Successfully uploaded :" + imgName);
},
error: function (file, response) {
file.previewElement.classList.add("dz-error");
}
});
Check the syntax of the event, I'm making it from head.
Thanks Corban, but not working. The problem isn't to send files to server. If I try to clink on div nothing happen.
Unfortunatley I can't put my html here. Can you suggest how format my hmtl to show here?
Even if you can't paste your complete form here, can you paste the dropzone field?
It works with autodiscover enabled?
How enable auto discovery? sorry but I can't understand why I can't past my html
In your initial comment you put your JS, and it included (although not rendered in the markdown) Dropzone.autoDiscover = false;.
Comment that line and delete cache.
If I comment that line I had this error:
Uncaught Error: No URL provided.
at new Dropzone (dropzone.js:1064)
at dropzone.js:2964
at Function.Dropzone.discover (dropzone.js:2970)
at Dropzone._autoDiscoverFunction (dropzone.js:3512)
at HTMLDocument.init (dropzone.js:3480)
The only thing I can come up with is that the div you are using as dropzone field in the form has some problem.
Maybe someone else can help you, sorry.
this is the div
div class="dropzone" id="imagesUpload"
/div
Please sign in or create an account to participate in this conversation.
