Upload.html

{% extends 'BasePage.html' %}

{% block content %}
    <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
        <h1 class="display-4">Hochladen</h1>
        <p class="lead">Hier können Sie Dateien bis zu 1000MB hochladen und sofort per Link teilen.</p>
    </div>

    <div class="card mb-4 text-center shadow">

        <form method="post" enctype="multipart/form-data">
            {{ form.hidden_tag() }}

            <div class="card-header">
                <h4 class="my-0 font-weight-normal">{{ form.name(class='form-control', placeholder='Name vergeben (optional)', size=32) }}</h4>
            </div>
            <div class="card-body">

                <div class="custom-file mb-3">
                    {{ form.files(class='custom-file-input') }}
                    {{ form.files.label(class='custom-file-label truncate') }}
                </div>

                <div class="row form-group">
                    {{ form.timer(class='selectpicker col') }}
                    {{ form.download_limit(class='selectpicker col') }}
                </div>

                <div class="progress form-group d-none">
                    <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
                </div>

                <div class="form-group">
                    {{ form.submit(class='btn btn-lg btn-block btn-primary') }}
                    <button type="button" class="btn btn-lg btn-block btn-secondary d-none" id="abort">Abbruch</button>

                </div>

            </div>
        </form>
    </div>

    <style>
        .truncate {
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
    <script>
        // to let the name of the file appear on select
        $(".custom-file-input").on("change", function() {
            let fns = $(this)[0].files;
            let label = "";
            for (var i = 0; i < fns.length; i++) {
                label = label.concat(fns[i].name);
                if (i < fns.length - 1) label = label.concat(", ");
            }
            $(this).siblings(".custom-file-label").addClass("selected").html(label);
        });
    </script>
    <script src="{{ url_for('static', filename='js/jquery.form.min.js') }}"></script>
    <script>
        // PROGRESS BAR AND SUBMIT
        let abb = false;
        $('form').ajaxForm({
            beforeSend: function (xhr) {
                $('.progress').removeClass('d-none');
                document.getElementById('download_limit').disabled = true;
                document.getElementById('timer').disabled = true;
                document.getElementById('submit').disabled = true;
                document.getElementById('name').disabled = true;
                document.getElementById('files').disabled = true;

                $('#abort').removeClass('d-none').click(function (){
                    console.log('ABORTED UPLOAD')
                    abb = true
                    xhr.abort();
                });
            },
            uploadProgress: function(event, position, total, percentComplete) {
                let percentVal = percentComplete + '%';
                $('.progress-bar').html(percentVal).width(percentVal);
            },
            complete: function(xhr) {
                if (!abb){
                    if(xhr.responseText === "undefined") {
                        window.location.href = "{{ url_for('expired') }}"
                    } else if(xhr.responseText.includes("<html")) {
                        $("html").html(xhr.responseText);
                    } else {
                        window.location.href = xhr.responseText;
                    }
                } else {
                    document.getElementById('download_limit').disabled = false;
                    document.getElementById('timer').disabled = false;
                    document.getElementById('submit').disabled = false;
                    document.getElementById('name').disabled = false;
                    document.getElementById('files').disabled = false;
                }
            }
        });
    </script>
        });
    </script>
{% endblock content %}