2

I am using dropzone to upload images.

Javascript is:

 <script>
  // Get the template HTML and remove it from the doument
  var previewNode = document.querySelector("#template");
  previewNode.id = "";
  var previewTemplate = previewNode.parentNode.innerHTML;
  previewNode.parentNode.removeChild(previewNode);

  var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
    url: "/admin/boats/{{ $boat->id}}/photos", // Set the url

    thumbnailWidth: 80,
    thumbnailHeight: 80,
    parallelUploads: 20,
    previewTemplate: previewTemplate,
    autoQueue: false, // Make sure the files aren't queued until manually 
 added
    previewsContainer: "#previews", // Define the container to display the 
 previews
    clickable: ".fileinput-button" // Define the element that should be used 
 as click trigger to select files.
  });

  myDropzone.on("addedfile", function(file) {
    // Hookup the start button
    file.previewElement.querySelector(".start").onclick = function() { 
myDropzone.enqueueFile(file); };
  });

  // Update the total progress bar
  myDropzone.on("totaluploadprogress", function(progress) {
    document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
  });

  myDropzone.on("sending", function(file) {
    // Show the total progress bar when upload starts
    document.querySelector("#total-progress").style.opacity = "1";
    // And disable the start button
    file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
  });

  // Hide the total progress bar when nothing's uploading anymore
  myDropzone.on("queuecomplete", function(progress) {
    document.querySelector("#total-progress").style.opacity = "0";
  });

  // Setup the buttons for all transfers
  // The "add files" button doesn't need to be setup because the config
  // `clickable` has already been specified.
  document.querySelector("#actions .start").onclick = function() {
    myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
  };
  document.querySelector("#actions .cancel").onclick = function() {
    myDropzone.removeAllFiles(true);
  };
</script>

I'm getting a VerifyCsrfToken error. I am not using any form tags - so i am confused of how to go about - or where - I would put the CsrfToken. Any help greatly appreciated. Thanx in advanced

user2079270
  • 21
  • 2

1 Answers1

2

Add headers in the configuration options like this:

var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
    url: "/admin/boats/{{ $boat->id}}/photos", // Set the url
    thumbnailWidth: 80,
    thumbnailHeight: 80,
    parallelUploads: 20,
    //Your other options 
    //...
    //add your headers
    headers: {
        'X-CSRFToken': $('meta[name="token"]').attr('content')
    }
});

If you dont have the attribute token in your meta tags then try like this one:

var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
    url: "/admin/boats/{{ $boat->id}}/photos", // Set the url
    thumbnailWidth: 80,
    thumbnailHeight: 80,
    parallelUploads: 20,
    //Your other options 
    //...
    //add your headers
    headers: {
        'X-CSRFToken': '{{ csrf_token() }}'
    }
});

You can refer to the docs in this link for csrf and javascript in laravel

Edgar Orozco
  • 2,722
  • 29
  • 33