trex trex - 1 month ago 11
Javascript Question

Insert csrf token for file upload

How to insert csrf token in LPology/Simple-Ajax-Uploader?

I tried with

customHeaders
but without success.
Although,
$("input[name='csrfmiddlewaretoken']").val()
gives
qEN1kNfYYkAasfqBn3AigICJmz4MIlei


var uploader = new ss.SimpleUpload({
button: btn,
url: 'file_upload/',
name: 'uploadfile',
customHeaders: {
'X-CSRF-TOKEN': $("input[name='csrfmiddlewaretoken']").val()
},
multipart: true,
hoverClass: 'hover',
focusClass: 'focus',
responseType: 'json',
startXHR: function() {
progressOuter.style.display = 'block'; // make progress bar visible
this.setProgressBar( progressBar );
},
onSubmit: function() {
msgBox.innerHTML = ''; // empty the message box
btn.innerHTML = 'Uploading...'; // change button text to "Uploading..."
},
onComplete: function( filename, response ) {
btn.innerHTML = 'Choose Another File';
progressOuter.style.display = 'none'; // hide progress bar when upload is completed
if ( !response ) {
msgBox.innerHTML = 'Unable to upload file';
return;
}
if ( response.success === true ) {
msgBox.innerHTML = '<strong>' + escapeTags( filename ) + '</strong>' + ' successfully uploaded.';
} else {
if ( response.msg ) {
msgBox.innerHTML = escapeTags( response.msg );
} else {
msgBox.innerHTML = 'An error occurred and the upload failed.';
}
}
},
onError: function() {
progressOuter.style.display = 'none';
msgBox.innerHTML = 'Unable to upload file';
}
});
};


Full example: https://github.com/LPology/Simple-Ajax-Uploader/tree/master/examples/basic_example

I use Django 1.9 on the backend instead. And my frontend form looks like:

<form>{% csrf_token %}
...
</form>


Dgango tag
{% csrf_token %}
produces
<input type='hidden' name='csrfmiddlewaretoken' value='7CzH2kocMFDiGhSBlBY5OelS6oSND1Iw' />
for the page markup.

Answer

The header is supposed to be called X-CSRFToken instead of X-CSRF-TOKEN.

If that doesn't work, try retrieving the token value from csrftoken cookie instead of the hidden input.

If that doesn't work, instead of setting the csrf header, can submit the token inside csrfmiddlewaretoken post param, looks like your plugin supports passing extra params by using data property.

Comments