django-ajax-uploader how to send csrf_token with fine-uploader 3.5.0

Question

I am implementing django-ajax-uploader in a project, but I want to use latest version of fineuploader that is currently under 3.5.0, supposedly, as documentation says the only thing I should do to send csrf_token is putting it inside customHeaders dictionary:

If you want to use the latest version of Fine Uploader, as valum's file-uploader is now called, instead of the one bundled with django-ajax-uploader, you can do so by replacing the params arguments in the above template with the following customHeaders:

customHeaders: { 'X-CSRFToken': '{{ csrf_token }}', },

Here is my full code:

...    
        <h1>qq-file-uploader</h1>
        <div id="upload-button" class="btn btn-primary"><i class="icon icon-cloud-upload icon-white"></i> Selecciona un archivo</div>
        <div id="file-upload"></div>
    </form>
{% endblock %}

{% block styles %}
    <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}js/libs/jquery.fineuploader-3.5.0/fineuploader-3.5.0.css"/>
{% endblock %}

{% block javascript %}
    <script type="text/javascript" src="{{ STATIC_URL }}js/libs/jquery.fineuploader-3.5.0/jquery.fineuploader-3.5.0.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('div#file-upload').fineUploader({
                customHeaders: {
                    'X-CSRFToken': '{{ csrf_token }}'
                },
                request: {
                    endpoint: '{% url 'documents:qq_file_uploader' %}'
                },
                button: $('div#upload-button'),
                multiple: false,
            });
        });
    </script>
{% endblock %}

In my views.py I have: qq_file_uploader = AjaxFileUploader()

And everytime I try to upload any file within the view a I got a 403 error: CSRF verification failed. Request aborted.

Sheol

Answer 1

use the request.params to set the token and sent it via POST.

...
request: {
    endpoint: '{% url 'documents:qq_file_uploader' %}',
    params: {
        'csrfmiddlewaretoken': '{{ csrf_token }}'
    }
},
...

Insolvable

I did that, is working right now, thanks for helping me, you're the best – Sheol

"params" is incorrect. It's "customHeaders" as in Ray's answer. – Laspisa

Answer 2

It looks like you didn't follow the directions you quoted at all. The proper use of custom headers are also described in the Fine Uploader documentation.

Remove your customFields property entirely and modify your request property to read:

request: {
   endpoint: '{% url 'documents:qq_file_uploader' %}'
   customHeaders: {
      'X-CSRFToken': '{{ csrf_token }}'
   }
}

Boughpot

You're right, I have used customFields only to test and I missed to change it again to customHeaders before submitting the question here, sorry. Anyways isn't working with customHeaders – Sheol

Show your modified code. Also, what troubleshooting have you done? When you examined the raw request, what did you see? Was the token correct? Are you actually parsing this header server-side? "isn't working" isn't enough information. – Boughpot

Now I'm sending the 'csrfmiddlewaretoken' into request.params and file is uploading correctly, the problem was token wasn't being sending. Also I needed to do a change in the views from filename = request.GET['qqfile'] to filename = request.FILES.get('qqfile')._name – Sheol

The token was being sent as an X-header, assuming your client-side code was correct. Most likely, your server-side code was not parsing this header correctly. – Boughpot

@RayNicholus thanks for your fine point. I am facing same problem in Valums File Uploader; is this trick is applicable in this version of file uploader? – Shrewmouse

@adnan Sorry, I don't have any knowledge of forked projects. You'll need to consult the maintainer of that project. – Boughpot