Support the ongoing development of Laravel.io →
Requests Session Forms
Last updated 2 years ago.
0

Just add an hidden input (as normal) with the csrf token, i use dropzone, works fine.

Last updated 2 years ago.
0

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.

  1. You will need to have access to the token value on the current page. If this is part of a larger form, you can just grab the value using (assuming jQuery)
// _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.

  1. Now, you will need to reference this in the dropzone.js setup. This is easier if you are initializing the dropzone instances programmatically as opposed to the auto-init. Now, you can modify the Dropzone configuration using the

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.

Last updated 2 years ago.
0

I was looking for this, great that works real good!!

Thank a bunch

Last updated 2 years ago.
0

Thank you @7LayersDesign for the sending callback hint. I used it successfully with Symfony.

0

Thanks. I used this tip in my sails.js app to pass the csrf token while uploading files.

0

I use to add it like this:

Dropzone.options.<yourname> {
    ...
    headers: {
        'X-CSRF-Token': $('input[name="_token"]').val()
    },
    ...
}
0

Thanks redless81, this is the best solution imo

0

Sign in to participate in this thread!

Eventy

Your banner here too?

eugael eugael Joined 25 Feb 2014

Moderators

We'd like to thank these amazing companies for supporting us

Your logo here?

Laravel.io

The Laravel portal for problem solving, knowledge sharing and community building.

© 2024 Laravel.io - All rights reserved.