Cannot append extra data to jquery-fileupload call

Question

I am trying to integrate file uploading functionality to my Django app using jQuery File Upload Plugin which can be found here. Now, I am already attaching csrf token with the input tag in the template like that:

<input id="fileupload" type="file" name="document" multiple
               style="display: none;"
               data-url="{% url 'upload' %}"
               data-form-data='{"csrfmiddlewaretoken": "{{ csrf_token }}"}'>

However, later in JS file I would like to append some extra information to this form. The proposed way is to do that by using formData as shown:

$("#fileupload").fileupload({
    dataType: 'json',
    formData: {employee_id: get_selected_employee()},
    done: function (e, data) {  
        }
    }
});

However, this new data does not get appended to formData, which is already created in the template and contains csrf_token.

If I try to append the csrf token and employee_id in .fileupload call I get 403 (CSRF token missing or incorrect) even though the csrf token seems to be valid. I cannot append employee_id in the template as it's dynamically changing. Does anyone have any thoughts?

Answer 1

I dynamically appended the data to data-form-data, so it looked something like that:

data-form-data='{"csrfmiddlewaretoken": "{{ csrf_token }}", "employee_id": "<employee_id>"}'

However, I had multiple other issues with jQuery File Upload, thus decided to switch to Dropzone, it took me 3 hrs to set up everything whereas I spent 3 days trying to integrate jQuery File Upload.