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

@@ -636,6 +636,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

@@ -1017,15 +1017,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

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

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