Use Dropzone for front page photo upload

mysociety · Sep 19, 2024 · 624f863 · 624f863
1 parent 8865350
commit 624f863
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 4 deletions.
diff --git a/templates/web/base/around/postcode_form.html b/templates/web/base/around/postcode_form.html
@@ -16,12 +16,15 @@
             <p>To continue draft<span class="js-draft-name"></span> enter its location.<br>
             <a href="/" class="btn">Cancel</a>
         </div>
-        <form action="[% c.uri_for('/photo/upload') %]" method="post" name="photoForm" id="photoForm" class="postcode-form-box js-geolocate" enctype="multipart/form-data">
-            <label for="photo">[% loc('Upload a photo') %]:</label>
-            <input type="file" name="photo" id="photo" accept="image/*" required>
+        <form action="[% c.uri_for('/photo/upload') %]" method="post" name="photoForm" id="photoForm" class="js-geolocate" enctype="multipart/form-data">
+            <div id="photoFormPhoto" class="dropzone" >
+                <label for="photo">[% loc('Upload a photo') %]:</label>
+                <input type="file" name="photo" id="photo" accept="image/*" required>
+            </div>
             <input type="hidden" name="lat">
             <input type="hidden" name="lon">
             <input type="hidden" name="start_report" value="1">
+            <input type="hidden" name="photo_id">
             <input type="submit" value="[% loc('Start report from photo') %]" class="btn btn--final">
         </form>
         <form action="[% c.uri_for('/around') %]" method="get" name="postcodeForm" id="postcodeForm" class="postcode-form-box js-geolocate">

diff --git a/templates/web/base/common_scripts.html b/templates/web/base/common_scripts.html
@@ -12,6 +12,8 @@
 IF bodyclass.match('frontpage');
     scripts.push(
         version('/vendor/idb-keyval-iife.min.js'),
+        version('/vendor/jquery-3.6.0.min.js'),
+        version('/vendor/dropzone.min.js'),
         version('/js/offline_draft.js'),
         version('/js/front.js'),
         version('/js/geolocation.js'),

diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
@@ -3403,3 +3403,8 @@ $site-message-border: 1px solid #525252 !default;
 
 @import "govuk-frontend/forms";
 @import "_govuk"; // Adds some overrides to the default GOVUK behaviour
+
+#front-main .dropzone {
+  background-color: rgba(255, 190, 0, 0.88);
+  border-color: #a28400;
+}
diff --git a/web/js/front.js b/web/js/front.js
@@ -1,7 +1,51 @@
-document.getElementById('pc').focus();
+// document.getElementById('pc').focus();
 
 (function(){
 
+    function dropzoneSetup() {
+        console.log('dropzoneSetup');
+        if ('Dropzone' in window) {
+            Dropzone.autoDiscover = false;
+            console.log('Dropzone', Dropzone);
+        } else {
+            console.log('Dropzone not found');
+            return;
+        }
+
+        var dz = new Dropzone('#photoFormPhoto', {
+            url: '/photo/upload?get_latlon=1',
+            paramName: 'photo',
+            maxFiles: 1,
+            addRemoveLinks: true,
+            thumbnailHeight: 256,
+            thumbnailWidth: 256,
+            // resizeHeight: 2048,
+            // resizeWidth: 2048,
+            // resizeQuality: 0.6,
+            acceptedFiles: 'image/jpeg,image/pjpeg,image/gif,image/tiff,image/png,.png,.tiff,.tif,.gif,.jpeg,.jpg',
+            dictDefaultMessage: "Upload a photo to start a new report",
+            // dictCancelUploadConfirmation: translation_strings.upload_cancel_confirmation,
+            // dictInvalidFileType: translation_strings.upload_invalid_file_type,
+            // dictMaxFilesExceeded: translation_strings.upload_max_files_exceeded,
+            init: function() {
+                console.log('init', this);
+                var $f = $("#photoForm");
+                $("#photoForm label, #photoForm input[type=file], #photoForm input[type=submit]").hide();
+                $f.attr("method", "get");
+                $f.attr("action", "/report/new");
+                $f.attr("enctype", "");
+                this.on("success", function(file, xhrResponse) {
+                    console.log('success', file, xhrResponse);
+                    $("#photoForm label, #photoForm input[type=file], #photoForm input[type=submit]").remove();
+                    $f.find("input[name=photo_id]").val(xhrResponse.id);
+                    $f.find("input[name=lat]").val(xhrResponse.lat);
+                    $f.find("input[name=lon]").val(xhrResponse.lon);
+                    $f.submit();
+                });
+            }
+        });
+    }
+    dropzoneSetup();
     function set_up_mobile_nav() {
         var html = document.documentElement;
         if (!html.classList) {