Add client side vaildation for checking if users upload files that are probably too large (#2067)

* Add client side vaildation for checking if users upload files that are probably too large
* Closes #1972

CTFd/forms/setup.py

@@ -49,16 +49,18 @@ class SetupForm(BaseForm):
 
     ctf_logo = FileField(
         "Logo",
-        description="Logo to use for the website instead of a CTF name. Used as the home page button.",
+        description="Logo to use for the website instead of a CTF name. Used as the home page button. Optional.",
+    )
+    ctf_banner = FileField(
+        "Banner", description="Banner to use for the homepage. Optional."
     )
-    ctf_banner = FileField("Banner", description="Banner to use for the homepage.")
     ctf_small_icon = FileField(
         "Small Icon",
-        description="favicon used in user's browsers. Only PNGs accepted. Must be 32x32px.",
+        description="favicon used in user's browsers. Only PNGs accepted. Must be 32x32px. Optional.",
     )
     ctf_theme = SelectField(
         "Theme",
-        description="CTFd Theme to use",
+        description="CTFd Theme to use. Can be changed later.",
         choices=list(zip(get_themes(), get_themes())),
         default=DEFAULT_THEME,
         validators=[InputRequired()],

CTFd/themes/core/assets/js/pages/setup.js

@@ -99,6 +99,42 @@ $(() => {
     $("#config-color-picker").val("");
   });
 
+  $("#ctf_logo").on("change", function() {
+    if (this.files[0].size > 128000) {
+      if (
+        !confirm(
+          "This image file is larger than 128KB which may result in increased load times. Are you sure you'd like to use this logo?"
+        )
+      ) {
+        this.value = "";
+      }
+    }
+  });
+
+  $("#ctf_banner").on("change", function() {
+    if (this.files[0].size > 512000) {
+      if (
+        !confirm(
+          "This image file is larger than 512KB which may result in increased load times. Are you sure you'd like to use this icon?"
+        )
+      ) {
+        this.value = "";
+      }
+    }
+  });
+
+  $("#ctf_small_icon").on("change", function() {
+    if (this.files[0].size > 32000) {
+      if (
+        !confirm(
+          "This image file is larger than 32KB which may result in increased load times. Are you sure you'd like to use this icon?"
+        )
+      ) {
+        this.value = "";
+      }
+    }
+  });
+
   window.addEventListener("storage", function(event) {
     if (event.key == "integrations" && event.newValue) {
       let integration = JSON.parse(event.newValue);

package.json

@@ -46,6 +46,7 @@
     "nunjucks": "~3.2.0",
     "optimize-css-assets-webpack-plugin": "~5.0.1",
     "popper.js": "^1.15.0",
+    "prettier": "1.17.0",
     "remove-strict-webpack-plugin": "~0.1.2",
     "sass": "^1.43.4",
     "sass-loader": "10.1.1",

yarn.lock

@@ -4797,6 +4797,11 @@ prepend-http@^1.0.0, prepend-http@^1.0.1:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
   integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
 
+prettier@1.17.0:
+  version "1.17.0"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.17.0.tgz#53b303676eed22cc14a9f0cec09b477b3026c008"
+  integrity sha512-sXe5lSt2WQlCbydGETgfm1YBShgOX4HxQkFPvbxkcwgDvGDeqVau8h+12+lmSVlP3rHPz0oavfddSZg/q+Szjw==
+
 prettier@^1.18.2:
   version "1.19.1"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"