CODEWITHSUNDEEP
javascriptdjango
srgbnd
srgbnd

Reputation: 5614

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.

Upvotes: 1

Views: 1447

Answers (1)

serg
serg

Reputation: 111265

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.

Upvotes: 3

Related Questions