{% block file_upload_widget %}
    <style>
        input[type="file"] {
            display: unset;
        }
    </style>
    <div class="fileupload-container col-md-12" id="fileupload-container{{ form.vars.id }}">
        <span class="btn btn-success fileinput-button">
            <i class="glyphicon glyphicon-plus"></i>
            <span>{{ form.vars.upload_label|trans  }}</span>
            {% if form.vars.multiple %}
                <input id="fileupload_{{ form.vars.id }}" type="file" name="{{ form.vars.name }}[]" multiple>
            {% else %}
                <input id="fileupload_{{ form.vars.id }}" type="file" name="{{ form.vars.name }}">
            {% endif %}
            <i class="fa fa-refresh fa-spin hidden"></i>
        </span>
        <br>
        <br>
        <!-- The global progress bar -->
        <div id="progress_{{ form.vars.id }}" class="progress">
            <div class="progress-bar progress-bar-success"></div>
        </div>
        <!-- The container for the uploaded files -->
        <div id="files_{{ form.vars.id }}" class="files col-md-12 no-padding">
            {% if form.vars.files is defined %}
                {% include "Files/files.html.twig" with({
                    'media':form.vars.files,
                    'path': form.vars.path,
                    'delete_link': form.vars.delete_link,
                    'target_id': form.vars.id
                }) %}

            {% endif %}
        </div>
    </div>
    <script>
        $(function () {
            $("#files_{{ form.vars.id }}").on("click", "#filedelet_{{ form.vars.id }}", function(){
                $.post($(this).data('target')).then(function (data) {
                    if (data['response'] === 'ok') {
                        location.reload();
                    } else {
                    }
                })
            });
            {#$("#filedelet_{{ form.vars.id }}").click(function () {#}
            {#    $.post($(this).data('target')).then(function (data) {#}
            {#        if (data['response'] === 'ok') {#}
            {#            location.reload();#}
            {#        } else {#}
            {#        }#}
            {#    })#}
            {#});#}

            var selector = '#fileupload_{{ form.vars.id }}';
            $(selector).fileupload({
                url: '{{ form.vars.upload_link }}',
                sequentialUploads: true,
                progressall: function (e, data) {
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    $("#progress_{{ form.vars.id }} .progress-bar").css('width', progress + '%');
                },
            }).bind('fileuploaddone', function (e, data) {
                if (data.result) {
                    $('#files_{{ form.vars.id }}').html(data.result);
                }
            }).bind('fileuploadstart', function (e, data) {
                $("#progress_{{ form.vars.id }} .progress-bar").css('width', '0%');
                $(selector).attr('disabled', 'disabled');
                $(selector).parent().find('.fa-refresh').removeClass('hidden');
            }).bind('fileuploadstop', function (e, data) {
                $(selector).parent().find('.fa-refresh').addClass('hidden');
                $(selector).removeAttr('disabled');
            }).bind('fileuploadfail', function(e){
                $(selector).parent().find('.fa-refresh').addClass('hidden');
                $(selector).removeAttr('disabled');
            }).bind('fileuploadsubmit', function (e, data) {});
        })
    </script>
{% endblock %}