{% extends 'partials/base.html' %}

{% block content %}

     <h1>Hello</h1>

     <form id="fileupload"  method="POST" enctype="multipart/form-data">

            <div class="col-lg-6" style="padding-left: 100px;">
                <!-- The fileinput-button span is used to style the file input field as button -->
                <span class="btn btn-success fileinput-button">
                    <i class="glyphicon glyphicon-plus"></i>
                    <span>Add files...</span>
                    <input type="file" name="files[]" multiple>
                </span>
                <button type="submit" class="btn btn-primary start">
                    <i class="glyphicon glyphicon-upload"></i>
                    <span>Start upload</span>
                </button>
                <button type="reset" class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>Cancel upload</span>
                </button>
                <button type="button" class="btn btn-danger delete">
                    <i class="glyphicon glyphicon-trash"></i>
                    <span>Delete</span>
                </button>
                <input type="checkbox" class="toggle">
            </div>

    </form>

{% endblock %}
{% block js_block %}
    <script>
$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
                $('<p/>').text().appendTo(document.body);
                var img = $('<img>').attr('src', file.url).appendTo(document.body);
            });
        },

        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            console.log(progress);
            $('#progress .progress-bar').css(
                'width',
                progress + '%'
            );
        }
    });
});
</script>
{% endblock %}