I don't know what else to do anymore, everything I tried failed. So there's this form
{{ Form::open(array('url' => Request::url(), 'method' => 'post', 'files' => true)) }}
<div id="myDrop" class="dropzone">
</div>
{{ Form::text('custom_name', null, array('id' => 'custom_name', 'placeholder' => 'Custom Name')) }}
{{ Form::submit('Upload', array('name' => 'upload-file', 'class'=>"d-cta")) }}
{{ Form:: close() }}
And this is the .js file
$("#myDrop").dropzone({
url: pathname,
paramName: "images",
thumbnailWidth: 150,
thumbnailHeight: 150,
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 10,
// The setting up of the dropzone
init: function() {
var myDropzone = this;
// First change the button to actually tell Dropzone to process the queue.
document.querySelector("input[name=upload-file]").addEventListener("click", function(e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
}
});
Works fine if the form has the class dropzone but I don't want that. Right now I'm getting a TokenMismatchException when the form is submited. Any thoughts?
Just add an hidden input (as normal) with the csrf token, i use dropzone, works fine.
Yep you will need to pass the _token value with the submission. I recently did just that using Dropzone.js. It took alittle digging at the time, but here is the general ida.
// _token is default field name Laravel uses when you call Form::token();
$('[name=_token').val();
In my app, I typically store this in a JS object on page load so I can use it for all AJAX calls on the page, but you can also grab it directly each time.
Here is a snippet of the setup:
// Disable the auto init. So we can modify settings first. We will manually initialize it later.
Dropzone.autoDiscover = false;
// imageUpload portion is the camelized version of our HTML elements ID. ie <div id="image-upload"> becomes imageUpload.
Dropzone.options.imageUpload = {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 5, // MB
parallelUploads: 2, //limits number of files processed to reduce stress on server
addRemoveLinks: true,
accept: function(file, done) {
// TODO: Image upload validation
done();
},
sending: function(file, xhr, formData) {
// Pass token. You can use the same method to pass any other values as well such as a id to associate the image with for example.
formData.append("_token", $('[name=_token').val()); // Laravel expect the token post value to be named _token by default
},
init: function() {
this.on("success", function(file, response) {
// On successful upload do whatever :-)
});
}
};
// Manually init dropzone on our element.
var myDropzone = new Dropzone("#image-upload", {
url: 'url/to/upload/api'
});
I hope that helps. Let me know if you run into issues.
I was looking for this, great that works real good!!
Thank a bunch
Thanks. I used this tip in my sails.js app to pass the csrf token while uploading files.
I use to add it like this:
Dropzone.options.<yourname> {
...
headers: {
'X-CSRF-Token': $('input[name="_token"]').val()
},
...
}
Sign in to participate in this thread!
The Laravel portal for problem solving, knowledge sharing and community building.
The community