I'm trying to upload an image using dropzone.js, but its not using login or register. I get CSRF verification failed. Request aborted.
Dropzone.options.fileDropzone = {
url: '/media/',
init: function() {
this.on("error", function(file, message) {
alert(message);
this.removeFile(file);
});
var submitBtn = document.querySelector("#submitBtn");
var myDropzone = this;
submitBtn.addEventListener("click", function() {
console.log("upload");
myDropzone.processQueue();
})
},
autoprocessQueue: true,
clickable: true,
thumbnailHeight: 90,
thumbnailWidth: 115,
maxFiles: 1,
maxFilesize: 10,
parallelUploads: 1,
addRemoveLinks: true,
dictRemoveFile: 'delete',
uploadMultiple: false,
}<form class="imageUploaderForm" method="post" id="upload" enctype="multipart/form-data">
{% csrf_token %}
<div class="form-title">Upload your Image</div>
<div class="upload-type">File should be Jpeg, Png, Gif</div>
<div class="dropzone" tabindex="0" class="drop-zone" style="border-style: dotted;" id="fileDropzone">
<input accept="image/jpeg, image/png, image/gif" multiple="" type="file" autocomplete="off" tabindex="-1" name="myFile" class="drop-zone-input" style="display: none;">
<div class="placeholder">
<img class="hide" width="115" height="90" src="#" id="preview">
</div>
</div>
<span style="color: rgb(169, 169, 169);">or</span>
</form>and i used
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
and
headers: { 'x-csrf-token': CSRF_TOKEN, },
this two codes but it's still have same error
Try using the following:
headers: {
'X-CSRF-TOKEN': $("input[name=csrfmiddlewaretoken]").val()
}