design

app/forms.py

@@ -6,7 +6,7 @@ from flask_wtf import FlaskForm
 
 class UploadForm(FlaskForm):
     files = MultipleFileField('Dateien hochladen', validators=[DataRequired()])
-    name = StringField(validators=[DataRequired()])
+    name = StringField(validators=[Optional()])
     timer = SelectField(choices=[(2, '2 Minuten'), (5, '5 Minuten'), (15, '15 Minuten'), (30, '30 Minuten'),
                                  (120, '2 Stunden'), (360, '6 Stunden'), (1440, '1 Tag'), (10080, '7 Tage'),
                                  (43200, '1 Monat'), (990000000, 'Für immer')],

app/templates/Upload.html

@@ -24,17 +24,19 @@
             </div>
             <div class="card-body">
 
-                <div class="custom-file">
-                    {{ form.files() }}
-                    {# form.files.label(class='custom-file-label') #}
+                <div class="custom-file mb-3">
+                    {{ form.files(class='custom-file-input') }}
+                    {{ form.files.label(class='custom-file-label') }}
                 </div>
 
-                <div class="row">
-                    {{ form.timer(class='form-control col') }}
-                    {{ form.download_limit(class='form-control col') }}
+                <div class="row form-group">
+                    {{ form.timer(class='selectpicker col') }}
+                    {{ form.download_limit(class='selectpicker col') }}
                 </div>
 
-                {{ form.submit(class='btn btn-lg btn-block btn-primary') }}
+                <div class="form-group">
+                    {{ form.submit(class='btn btn-lg btn-block btn-primary') }}
+                </div>
 
             </div>
         </form>
@@ -47,4 +49,17 @@
     </footer>
 
 </div>
+
+<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>
 {% endblock page %}
\ No newline at end of file