Photo-first reporting

perllib/FixMyStreet/App/Controller/Photo.pm

@@ -133,6 +133,22 @@
         $out = { id => $fileid };
     }
 
+    if ($c->get_param('get_latlon') && $c->stash->{photo_gps}) {
+        $out = {
+            %$out,
+            %{ $c->stash->{photo_gps} },
+        };
+    }
+
+    if ($c->get_param('start_report') && $c->stash->{photo_gps}) {
+        my $url = $c->uri_for( "/report/new", {
+            lat => $c->stash->{photo_gps}->{lat},
+            lon => $c->stash->{photo_gps}->{lon},
+            photo_id => $fileid,
+        } );
+        return $c->res->redirect($url);
+    }
+
     $c->res->content_type('application/json; charset=utf-8');
     $c->res->body(encode_json($out));
 }

perllib/FixMyStreet/App/Controller/Report/New.pm

@@ -639,6 +639,10 @@
         $report = $c->model('DB::Problem')->new( {} );
     }
 
+    if (!$c->stash->{upload_fileid} && $c->get_param('photo_id')) {
+        $c->stash->{upload_fileid} = $c->get_param('photo_id');
+    }
+
     # If we have a user logged in let's prefill some values for them.
     if (!$report->user && $c->user) {
         my $user = $c->user->obj;

perllib/FixMyStreet/App/Model/PhotoSet.pm

@@ -177,6 +177,11 @@
                     return ();
                 }
 
+                if ($type eq 'jpeg' && !$self->c->stash->{photo_gps}) {
+                    # only store GPS for the first uploaded photo
+                    $self->stash_gps_info($upload->tempname);
+                }
+
                 # Convert all images to JPEGs
                 my %params = ( magick => 'JPEG' );
 
@@ -206,6 +211,31 @@
     },
 );
 
+sub stash_gps_info {
+    my ($self, $filename) = @_;
+
+    return unless can_run('jhead');
+
+    eval {
+        # run jhead on $filename and store in $stdout
+        my $stdout;
+        my $pid = open3(undef, $stdout, undef, 'jhead', $filename);
+        # parse lines like "GPS Latitude : N 51d 36m 52.32s
+        # GPS Longitude: W  0d 42m 27.24s"
+        my ($lat, $lon);
+        while (<$stdout>) {
+            if (/GPS Latitude : ([NS])\s+(\d+)d\s+(\d+)m\s+(\d+\.\d+)s/) {
+                $lat = $2 + $3/60 + $4/3600;
+                $lat = -$lat if $1 eq 'S';
+            } elsif (/GPS Longitude: ([EW])\s+(\d+)d\s+(\d+)m\s+(\d+\.\d+)s/) {
+                $lon = $2 + $3/60 + $4/3600;
+                $lon = -$lon if $1 eq 'W';
+            }
+        }
+        $self->c->stash->{photo_gps} = { lat => $lat, lon => $lon };
+    };
+}
+
 sub get_image_type {
     my ($self, $index) = @_;
     my $filename = $self->get_id($index);

templates/web/base/around/postcode_form.html

@@ -16,6 +16,17 @@
             <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="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">
             <label for="pc">[% question %]:</label>
             [% INCLUDE 'around/_postcode_form_examples.html' %]

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'),

web/cobrands/fixmystreet/fixmystreet.js

@@ -1020,15 +1020,15 @@ $.extend(fixmystreet.set_up, {
         }
         var prevFile;
         var photodrop = new Dropzone($dropzone[0], {
-            url: '/photo/upload',
+            url: '/photo/upload?get_latlon=1',
             paramName: 'photo',
             maxFiles: max_photos,
             addRemoveLinks: true,
             thumbnailHeight: 150,
             thumbnailWidth: 150,
-            resizeWidth: 2048,
-            resizeHeight: 2048,
-            resizeQuality: 0.6,
+            // resizeWidth: 2048,
+            // resizeHeight: 2048,
+            // resizeQuality: 0.6,
             acceptedFiles: 'image/jpeg,image/pjpeg,image/gif,image/tiff,image/png,.png,.tiff,.tif,.gif,.jpeg,.jpg',
             dictDefaultMessage: default_message,
             dictCancelUploadConfirmation: translation_strings.upload_cancel_confirmation,

web/cobrands/sass/_base.scss

@@ -3423,3 +3423,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;
+}

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) {