Upload.html 4.16 KB
Newer Older
Lukas Böhm's avatar
Lukas Böhm committed
1
{% extends 'BasePage.html' %}
Lukas Böhm's avatar
Lukas Böhm committed
2

Lukas Böhm's avatar
Lukas Böhm committed
3
4
5
6
7
{% 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>
Lukas Böhm's avatar
Lukas Böhm committed
8

Lukas Bhm's avatar
Lukas Bhm committed
9
10
    <div class="card mb-4 text-center shadow">

Lukas Böhm's avatar
fixed    
Lukas Böhm committed
11
        <form method="post" enctype="multipart/form-data">
Lukas Böhm's avatar
Lukas Böhm committed
12
13
14
            {{ form.hidden_tag() }}

            <div class="card-header">
Lukas Bhm's avatar
Lukas Bhm committed
15
                <h4 class="my-0 font-weight-normal">{{ form.name(class='form-control', placeholder='Name vergeben (optional)', size=32) }}</h4>
Lukas Böhm's avatar
Lukas Böhm committed
16
17
18
            </div>
            <div class="card-body">

Lukas Böhm's avatar
design    
Lukas Böhm committed
19
20
                <div class="custom-file mb-3">
                    {{ form.files(class='custom-file-input') }}
Lukas Bhm's avatar
Lukas Bhm committed
21
                    {{ form.files.label(class='custom-file-label truncate') }}
Lukas Böhm's avatar
Lukas Böhm committed
22
23
                </div>

Lukas Böhm's avatar
design    
Lukas Böhm committed
24
25
26
                <div class="row form-group">
                    {{ form.timer(class='selectpicker col') }}
                    {{ form.download_limit(class='selectpicker col') }}
Lukas Böhm's avatar
Lukas Böhm committed
27
28
                </div>

Lukas Böhm's avatar
Lukas Böhm committed
29
30
31
32
                <div class="progress form-group d-none">
                    <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
                </div>

Lukas Böhm's avatar
design    
Lukas Böhm committed
33
34
                <div class="form-group">
                    {{ form.submit(class='btn btn-lg btn-block btn-primary') }}
Lukas Böhm's avatar
Lukas Böhm committed
35
36
                    <button type="button" class="btn btn-lg btn-block btn-secondary d-none" id="abort">Abbruch</button>

Lukas Böhm's avatar
design    
Lukas Böhm committed
37
                </div>
Lukas Böhm's avatar
Lukas Böhm committed
38
39
40
41
42

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

Lukas Bhm's avatar
Lukas Bhm committed
43
44
45
46
47
48
49
50
    <style>
        .truncate {
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
Lukas Böhm's avatar
Lukas Böhm committed
51
52
53
54
55
    <script>
        // to let the name of the file appear on select
        $(".custom-file-input").on("change", function() {
            let fns = $(this)[0].files;
            let label = "";
Lukas Bhm's avatar
Lukas Bhm committed
56
            for (var i = 0; i < fns.length; i++) {
Lukas Böhm's avatar
Lukas Böhm committed
57
                label = label.concat(fns[i].name);
Lukas Bhm's avatar
Lukas Bhm committed
58
                if (i < fns.length - 1) label = label.concat(", ");
Lukas Böhm's avatar
Lukas Böhm committed
59
60
61
62
            }
            $(this).siblings(".custom-file-label").addClass("selected").html(label);
        });
    </script>
Lukas Böhm's avatar
Lukas Böhm committed
63
64
    <script src="{{ url_for('static', filename='js/jquery.form.min.js') }}"></script>
    <script>
Lukas Bhm's avatar
Lukas Bhm committed
65
        // PROGRESS BAR AND SUBMIT
Lukas Böhm's avatar
Lukas Böhm committed
66
67
68
69
70
71
72
        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;
Lukas Bhm's avatar
Lukas Bhm committed
73
74
                document.getElementById('name').disabled = true;
                document.getElementById('files').disabled = true;
Lukas Böhm's avatar
Lukas Böhm committed
75
76
77
78
79
80
81
82
83
84
85
86
87

                $('#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){
Lukas Bhm's avatar
Lukas Bhm committed
88
89
90
91
92
93
94
                    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;
                    }
Lukas Böhm's avatar
Lukas Böhm committed
95
96
97
98
                } else {
                    document.getElementById('download_limit').disabled = false;
                    document.getElementById('timer').disabled = false;
                    document.getElementById('submit').disabled = false;
Lukas Bhm's avatar
Lukas Bhm committed
99
100
                    document.getElementById('name').disabled = false;
                    document.getElementById('files').disabled = false;
Lukas Böhm's avatar
Lukas Böhm committed
101
                }
Lukas Bhm's avatar
Lukas Bhm committed
102
103
104
            }
        });
    </script>
Lukas Böhm's avatar
Lukas Böhm committed
105
106
        });
    </script>
Lukas Böhm's avatar
Lukas Böhm committed
107
{% endblock content %}