Display readable errors instead of html (#107)

* Display readable errors instead of html

* Refactor Dropzone js into new file and add comments

* Fix lint

Author: sea-kelp

OpenOversight/app/__init__.py

@@ -3,7 +3,7 @@
 import os
 from logging.handlers import RotatingFileHandler
 
-from flask import Flask, render_template, request
+from flask import Flask, jsonify, render_template, request
 from flask_bootstrap import Bootstrap
 from flask_limiter import Limiter
 from flask_limiter.util import get_remote_address
@@ -73,21 +73,33 @@ def create_app(config_name="default"):
     # Also log when endpoints are getting hit hard
     limiter.logger.addHandler(file_handler)
 
-    @app.errorhandler(404)
-    def page_not_found(e):
-        return render_template("404.html"), 404
-
-    @app.errorhandler(403)
-    def forbidden(e):
-        return render_template("403.html"), 403
-
-    @app.errorhandler(500)
-    def internal_error(e):
-        return render_template("500.html"), 500
+    # Define error handlers
+    def create_errorhandler(code, error, template):
+        """
+        Create an error handler that returns a JSON or a template response
+        based on the request "Accept" header.
+        :param code: status code to handle
+        :param error: response error message, if JSON
+        :param template: template response
+        """
 
-    @app.errorhandler(429)
-    def rate_exceeded(e):
-        return render_template("429.html"), 429
+        def _handler_method(e):
+            if request.accept_mimetypes.best == "application/json":
+                return jsonify(error=error), code
+            return render_template(template), code
+
+        return _handler_method
+
+    error_handlers = [
+        (403, "Forbidden", "403.html"),
+        (404, "Not found", "404.html"),
+        (413, "File too large", "413.html"),
+        (429, "Too many requests", "429.html"),
+        (500, "Internal Server Error", "500.html"),
+    ]
+    for code, error, template in error_handlers:
+        # Pass generated errorhandler function to @app.errorhandler decorator
+        app.errorhandler(code)(create_errorhandler(code, error, template))
 
     # create jinja2 filter for titles with multiple capitals
     @app.template_filter("capfirst")

OpenOversight/app/main/views.py

@@ -1307,9 +1307,14 @@ def upload(department_id, officer_id=None):
     file_to_upload = request.files["file"]
     if not allowed_file(file_to_upload.filename):
         return jsonify(error="File type not allowed!"), 415
-    image = upload_image_to_s3_and_store_in_db(
-        file_to_upload, current_user.get_id(), department_id=department_id
-    )
+
+    try:
+        image = upload_image_to_s3_and_store_in_db(
+            file_to_upload, current_user.get_id(), department_id=department_id
+        )
+    except ValueError:
+        # Raised if MIME type not allowed
+        return jsonify(error="Invalid data type!"), 415
 
     if image:
         db.session.add(image)

OpenOversight/app/static/js/init-dropzone.js

@@ -0,0 +1,36 @@
+/**
+ * Initialize dropzone component
+ * @param id element id
+ * @param url url to upload to
+ * @param csrf_token CSRF token
+ * @return the Dropzone object
+ */
+function init_dropzone(id, url, csrf_token) {
+    Dropzone.autoDiscover = false;
+
+    let myDropzone = new Dropzone(id, {
+      url: url,
+      method: "POST",
+      uploadMultiple: false,
+      parallelUploads: 50,
+      acceptedFiles: "image/png, image/jpeg, image/gif, image/jpg, image/webp",
+      maxFiles: 50,
+      headers: {
+        'Accept': 'application/json',
+        'X-CSRF-TOKEN': csrf_token
+      },
+      init: function() {
+        this.on("error", function(file, response) {
+          if (typeof(response) == "object") {
+            response = response.error;
+          }
+          if (response.startsWith("<!DOCTYPE")) {
+            // Catch any remaining HTML error pages
+            response = "Upload failed.";
+          }
+          file.previewTemplate.appendChild(document.createTextNode(response));
+        });
+      }
+    });
+    return myDropzone;
+}

OpenOversight/app/templates/413.html

@@ -0,0 +1,12 @@
+{% extends "base.html" %}
+{% block title %}File Too Large{% endblock %}
+
+{% block content %}
+
+<div class="container theme-showcase" role="main">
+
+<h1>File Too Large</h1>
+<p>The file you are trying to upload is too large. <a href="{{ url_for('main.index') }}">Return to homepage</a>.</p>
+
+</div>
+{% endblock %}

OpenOversight/app/templates/submit_image.html

@@ -46,6 +46,7 @@ <h3>Drop images here to submit photos of officers:</h3>
 
     <script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
     <script src="{{ url_for('static', filename='js/dropzone.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/init-dropzone.js') }}"></script>
 
     <script>
         // Select user's preferred department by default
@@ -63,27 +64,8 @@ <h3>Drop images here to submit photos of officers:</h3>
             });
         });
 
-        Dropzone.autoDiscover = false;
-        const getURL = (file) => {
-            return "/upload/department/" + dept_id;
-        }
-
-        let myDropzone = new Dropzone("#my-cop-dropzone", {
-            method: "post",
-            url: getURL,
-            uploadMultiple: false,
-            parallelUploads: 50,
-            acceptedFiles: "image/png, image/jpeg, image/gif, image/jpg, image/webp",
-            maxFiles: 50,
-            headers: {
-                'X-CSRF-TOKEN': csrf_token
-            },
-            init: function() {
-                this.on("error", function(file, responseText) {
-                    file.previewTemplate.appendChild(document.createTextNode(responseText));
-                });
-            }
-        });
+        const getURL = (file) => "/upload/department/" + dept_id;
+        init_dropzone("#my-cop-dropzone", getURL, csrf_token);
     </script>
 </div>
 

OpenOversight/app/templates/submit_officer_image.html

@@ -28,24 +28,13 @@ <h3>Drop images here to submit photos of {{ officer.full_name() }} in {{ officer
 {% block js_footer %}
   <script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
   <script src="{{ url_for('static', filename='js/dropzone.js') }}"></script>
+  <script src="{{ url_for('static', filename='js/init-dropzone.js') }}"></script>
   <script>
     var csrf_token = "{{ csrf_token() }}";
-    Dropzone.autoDiscover = false;
-    let myDropzone = new Dropzone("#my-cop-dropzone", {
-      url: "/upload/department/{{ officer.department_id }}/officer/{{ officer.id }}",
-      method: "POST",
-      uploadMultiple: false,
-      parallelUploads: 50,
-      acceptedFiles: "image/png, image/jpeg, image/gif, image/jpg",
-      maxFiles: 50,
-      headers: {
-        'X-CSRF-TOKEN': csrf_token
-      },
-      init: function() {
-        this.on("error", function(file, responseText) {
-          file.previewTemplate.appendChild(document.createTextNode(responseText));
-        });
-      }
-    });
+    init_dropzone(
+      "#my-cop-dropzone",
+      "/upload/department/{{ officer.department_id }}/officer/{{ officer.id }}",
+      csrf_token
+    );
   </script>
 {% endblock %}