<script>
function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$(function () {
    'use strict';
    var url = '{% url "upload-basic" %}';
    var csrftoken = $.cookie('csrftoken');

    $('#id_uploaded_file').fileupload({
        url: url,
        crossDomain: false,
        beforeSend: function(xhr, settings) {
            if (!csrfSafeMethod(settings.type)) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
        },
        dataType: 'json',
        add: function (e, data) {
            console.log(e, data);
            data.context = $('<p/>').text('Uploading...').appendTo(document.body);
            data.submit();
        },
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                var icon = '<p><div class="file-icon file-icon-xl" data-type="' +
                            file.extension + '"></div> ' + file.name + '</p>';
                $(icon).appendTo($('#files'));
            });
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .bar').css(
                'width',
                progress + '%'
            );
        }
    });
});

</script>