{% load i18n %}
<script>
(function($) {
    $(function() {

        $('form').submit(function() {
            if($(this).hasClass('{{ name }}_disabled')) {
                return false;
            }
        });

        if (!(new Resumable().support)) {
            alert("No uploader support");
        }
        var r = new Resumable({
            target: '{% url 'admin_resumable' %}',
            chunkSize: {{ chunk_size }},
            query: {
                csrfmiddlewaretoken: $("input[name='csrfmiddlewaretoken']").val(),
                field_name: '{{ field_name }}',
                content_type_id: '{{ content_type_id }}'
            },
        });
        r.assignBrowse($('#{{ id }}_input_file'));
        r.on('fileAdded', function(file) {
            $("#{{ id }}_uploaded_status").html("{% trans 'Uploading' %} " + file.fileName);
            $("form").addClass("{{ name }}_disabled");
            r.upload();
        });
        r.on('fileSuccess', function(file, message) {
            $('#{{ id }}').val(message);
            $("#{{ id }}_uploaded_status").html("{% trans 'File uploaded' %}: " + file.fileName);
            $("#{{ id }}_input_file").css("display", "none");
            $("form").removeClass("{{ name }}_disabled");
        });
        r.on('fileError', function(file, message) {
            $("#{{ id }}_uploaded_status").html(message);
        });
        r.on('progress', function(file, message) {
            $('#{{ id }}_progress').val(r.progress());
        });

    });

})(typeof django !== "undefined" ? django.jQuery : jQuery);


</script>
<div id="container">
    <p class="file-upload">
        {% if value %}
            {% trans 'Change' %}:
        {% endif %}

        <span id="{{ id }}_uploaded_status"></span>
        <input type="file" id="{{ id }}_input_file">
    </p>
    <progress id="{{ id }}_progress" value="0" max="1" style="width:500px"></progress>
</div>

<input type="hidden" name="{{ name }}" id="{{ id }}" value="{{ value }}">