Add PNG image support.

Store image type along with hash in photo column, and use that when
outputting images / generating URLs. Make sure all public photo URL
generation goes through appropriate functions, and change temp URLs
so the filename can be output directly from the list.

24 files changed, 114 insertions, 79 deletions

diff --git a/perllib/FixMyStreet/App/Controller/Open311.pm b/perllib/FixMyStreet/App/Controller/Open311.pm
index f35dc64a5..4f1727b1a 100644
--- a/perllib/FixMyStreet/App/Controller/Open311.pm
+++ b/perllib/FixMyStreet/App/Controller/Open311.pm
@@ -284,7 +284,7 @@ sub output_requests : Private {
         my $display_photos = $c->cobrand->allow_photo_display($problem);
         if ($display_photos && $problem->photo) {
             my $url = $c->cobrand->base_url();
-            my $imgurl = $url . "/photo/$id.full.jpeg";
+            my $imgurl = $url . $problem->photos->[0]->{url_full};
             $request->{'media_url'} = [ $imgurl ];
         }
         push(@problemlist, $request);
diff --git a/perllib/FixMyStreet/App/Controller/Photo.pm b/perllib/FixMyStreet/App/Controller/Photo.pm
index bfb1c5535..59f54bad7 100644
--- a/perllib/FixMyStreet/App/Controller/Photo.pm
+++ b/perllib/FixMyStreet/App/Controller/Photo.pm
@@ -29,12 +29,12 @@ Display a photo
 
 =cut
 
-sub during :LocalRegex('^([0-9a-f]{40})\.(temp|fulltemp)\.jpeg$') {
+sub during :LocalRegex('^(temp|fulltemp)\.([0-9a-f]{40}\.(?:jpeg|png|gif|tiff))$') {
     my ( $self, $c ) = @_;
-    my ( $hash, $size ) = @{ $c->req->captures };
+    my ( $size, $filename ) = @{ $c->req->captures };
 
     my $photoset = FixMyStreet::App::Model::PhotoSet->new({
-        data_items => [ $hash ]
+        data_items => [ $filename ]
     });
 
     $size = $size eq 'temp' ? 'default' : 'full';
@@ -43,7 +43,7 @@ sub during :LocalRegex('^([0-9a-f]{40})\.(temp|fulltemp)\.jpeg$') {
     $c->forward( 'output', [ $photo ] );
 }
 
-sub index :LocalRegex('^(c/)?(\d+)(?:\.(\d+))?(?:\.(full|tn|fp))?\.jpeg$') {
+sub index :LocalRegex('^(c/)?(\d+)(?:\.(\d+))?(?:\.(full|tn|fp))?\.(?:jpeg|png|gif|tiff)$') {
     my ( $self, $c ) = @_;
     my ( $is_update, $id, $photo_number, $size ) = @{ $c->req->captures };
 
@@ -79,10 +79,10 @@ sub output : Private {
 
     # Save to file
     File::Path::make_path( FixMyStreet->path_to( 'web', 'photo', 'c' )->stringify );
-    File::Slurp::write_file( FixMyStreet->path_to( 'web', $c->req->path )->stringify, \$photo );
+    File::Slurp::write_file( FixMyStreet->path_to( 'web', $c->req->path )->stringify, \$photo->{data} );
 
-    $c->res->content_type( 'image/jpeg' );
-    $c->res->body( $photo );
+    $c->res->content_type( $photo->{content_type} );
+    $c->res->body( $photo->{data} );
 }
 
 sub no_photo : Private {
diff --git a/perllib/FixMyStreet/App/Controller/Rss.pm b/perllib/FixMyStreet/App/Controller/Rss.pm
index 6047f063b..d708aa71c 100755
--- a/perllib/FixMyStreet/App/Controller/Rss.pm
+++ b/perllib/FixMyStreet/App/Controller/Rss.pm
@@ -6,6 +6,8 @@ use POSIX qw(strftime);
 use URI::Escape;
 use XML::RSS;
 
+use FixMyStreet::App::Model::PhotoSet;
+
 use mySociety::Gaze;
 use mySociety::Locale;
 use mySociety::MaPit;
@@ -277,8 +279,13 @@ sub add_row : Private {
     $item{category} = ent($row->{category}) if $row->{category};
 
     if ($c->cobrand->allow_photo_display($row) && $row->{photo}) {
+        # Bit yucky as we don't have full objects here
+        my $photoset = FixMyStreet::App::Model::PhotoSet->new({ db_data => $row->{photo} });
+        my $first_fn = $photoset->get_id(0);
+        my ($hash, $format) = split /\./, $first_fn;
+        my $cachebust = substr($hash, 0, 8);
         my $key = $alert_type->item_table eq 'comment' ? 'c/' : '';
-        $item{description} .= ent("\n<br><img src=\"". $base_url . "/photo/$key$row->{id}.jpeg\">");
+        $item{description} .= ent("\n<br><img src=\"". $base_url . "/photo/$key$row->{id}.0.$format?$cachebust\">");
     }
 
     if ( $row->{used_map} ) {
diff --git a/perllib/FixMyStreet/App/Model/PhotoSet.pm b/perllib/FixMyStreet/App/Model/PhotoSet.pm
index 54457bae9..41d02d2a7 100644
--- a/perllib/FixMyStreet/App/Model/PhotoSet.pm
+++ b/perllib/FixMyStreet/App/Model/PhotoSet.pm
@@ -49,7 +49,7 @@ has data_items => ( # either a) split from db_data or b) provided by photo uploa
         my $self = shift;
         my $data = $self->db_data or return [];
 
-        return [$data] if (_jpeg_magic($data));
+        return [$data] if (detect_type($data));
 
         return [ split ',' => $data ];
     },
@@ -70,10 +70,12 @@ has upload_dir => (
     },
 );
 
-sub _jpeg_magic {
-    $_[0] =~ /^\x{ff}\x{d8}/; # JPEG
-    # NB: should we also handle \x{89}\x{50} (PNG, 15 results in live DB) ?
-    #     and \x{49}\x{49} (Tiff, 3 results in live DB) ?
+sub detect_type {
+    return 'jpeg' if $_[0] =~ /^\x{ff}\x{d8}/;
+    return 'png' if $_[0] =~ /^\x{89}\x{50}/;
+    return 'tiff' if $_[0] =~ /^II/;
+    return 'gif' if $_[0] =~ /^GIF/;
+    return '';
 }
 
 =head2 C<ids>, C<num_images>, C<get_id>, C<all_ids>
@@ -106,15 +108,17 @@ has ids => ( #  Arrayref of $fileid tuples (always, so post upload/raw data proc
             my $part = $_;
 
             if (blessed $part and $part->isa('Catalyst::Request::Upload')) {
-                # check that the photo is a jpeg
                 my $upload = $part;
                 my $ct = $upload->type;
                 $ct =~ s/x-citrix-//; # Thanks, Citrix
+                my ($type) = $ct =~ m{image/(jpeg|pjpeg|gif|tiff|png)};
+                $type = 'jpeg' if $type && $type eq 'pjpeg';
                 # Had a report of a JPEG from an Android 2.1 coming through as a byte stream
-                unless ( $ct eq 'image/jpeg' || $ct eq 'image/pjpeg' || $ct eq 'application/octet-stream' ) {
+                $type = 'jpeg' if !$type && $ct eq 'application/octet-stream';
+                unless ( $type ) {
                     my $c = $self->c;
                     $c->log->info('Bad photo tried to upload, type=' . $ct);
-                    $c->stash->{photo_error} = _('Please upload a JPEG image only');
+                    $c->stash->{photo_error} = _('Please upload an image only');
                     return ();
                 }
 
@@ -139,12 +143,13 @@ has ids => ( #  Arrayref of $fileid tuples (always, so post upload/raw data proc
                 # get the photo into a variable
                 my $photo_blob = eval {
                     my $filename = $upload->tempname;
-                    my $out = `jhead -se -autorot $filename 2>&1`;
+                    my $out;
+                    $out = `jhead -se -autorot $filename 2>&1` if $type eq 'jpeg';
                     unless (defined $out) {
                         my ($w, $h, $err) = Image::Size::imgsize($filename);
-                        die _("Please upload a JPEG image only") . "\n" if !defined $w || $err ne 'JPG';
+                        die _("Please upload an image only") . "\n" if !defined $w || $err !~ /JPG|GIF|PNG|TIF/;
                     }
-                    die _("Please upload a JPEG image only") . "\n" if $out && $out =~ /Not JPEG:/;
+                    die _("Please upload an image only") . "\n" if $out && $out =~ /Not JPEG:/;
                     my $photo = $upload->slurp;
                 };
                 if ( my $error = $@ ) {
@@ -157,29 +162,30 @@ has ids => ( #  Arrayref of $fileid tuples (always, so post upload/raw data proc
 
                 # we have an image we can use - save it to the upload dir for storage
                 my $fileid = $self->get_fileid($photo_blob);
-                my $file = $self->get_file($fileid);
+                my $file = $self->get_file($fileid, $type);
                 $upload->copy_to( $file );
-                return $fileid;
+                return $file->basename;
 
             }
-            if (_jpeg_magic($part)) {
+            if (my $type = detect_type($part)) {
                 my $photo_blob = $part;
                 my $fileid = $self->get_fileid($photo_blob);
-                my $file = $self->get_file($fileid);
+                my $file = $self->get_file($fileid, $type);
                 $file->spew_raw($photo_blob);
-                return $fileid;
+                return $file->basename;
             }
-            if (length($part) == 40) {
-                my $fileid = $part;
-                my $file = $self->get_file($fileid);
+            my ($fileid, $type) = split /\./, $part;
+            $type ||= 'jpeg';
+            if (length($fileid) == 40) {
+                my $file = $self->get_file($fileid, $type);
                 if ($file->exists) {
-                    $fileid;
+                    $file->basename;
                 } else {
-                    warn "File $fileid doesn't exist";
+                    warn "File $part doesn't exist";
                     ();
                 }
             } else {
-                warn sprintf "Received bad photo hash of length %d", length($part);
+                warn sprintf "Received bad photo hash of length %d", length($fileid);
                 ();
             }
         });
@@ -193,18 +199,23 @@ sub get_fileid {
 }
 
 sub get_file {
-    my ($self, $fileid) = @_;
+    my ($self, $fileid, $type) = @_;
     my $cache_dir = $self->upload_dir;
-    return path( $cache_dir, "$fileid.jpeg" );
+    return path( $cache_dir, "$fileid.$type" );
 }
 
-sub get_raw_image_data {
+sub get_raw_image {
     my ($self, $index) = @_;
-    my $fileid = $self->get_id($index);
-    my $file = $self->get_file($fileid);
+    my $filename = $self->get_id($index);
+    my ($fileid, $type) = split /\./, $filename;
+    my $file = $self->get_file($fileid, $type);
     if ($file->exists) {
         my $photo = $file->slurp_raw;
-        return $photo;
+        return {
+            data => $photo,
+            content_type => "image/$type",
+            extension => $type,
+        };
     }
 }
 
@@ -212,8 +223,9 @@ sub get_image_data {
     my ($self, %args) = @_;
     my $num = $args{num} || 0;
 
-    my $photo = $self->get_raw_image_data( $num )
+    my $image = $self->get_raw_image( $num )
         or return;
+    my $photo = $image->{data};
 
     my $size = $args{size};
     if ( $size eq 'tn' ) {
@@ -226,7 +238,10 @@ sub get_image_data {
         $photo = _shrink( $photo, $args{default} || '250x250' );
     }
 
-    return $photo;
+    return {
+        data => $photo,
+        content_type => $image->{content_type},
+    };
 }
 
 sub delete_cached {
@@ -266,8 +281,8 @@ sub rotate_image {
     my @images = $self->all_ids;
     return if $index > $#images;
 
-    my $image_data = $self->get_raw_image_data($index);
-    $images[$index] = _rotate_image( $image_data, $direction );
+    my $image = $self->get_raw_image($index);
+    $images[$index] = _rotate_image( $image->{data}, $direction );
 
     my $new_set = (ref $self)->new({
         data_items => \@images,
diff --git a/perllib/FixMyStreet/Cobrand/Zurich.pm b/perllib/FixMyStreet/Cobrand/Zurich.pm
index 596ef2dc6..d31b1c84e 100644
--- a/perllib/FixMyStreet/Cobrand/Zurich.pm
+++ b/perllib/FixMyStreet/Cobrand/Zurich.pm
@@ -1018,14 +1018,15 @@ sub munge_sendreport_params {
             or return;
         my $id = $row->id;
         my @attachments = map {
+            my $image = $photoset->get_raw_image($_);
             {
-                body => $photoset->get_raw_image_data($_),
+                body => $image->{data},
                 attributes => {
-                    filename => "$id.$_.jpeg",
-                    content_type => 'image/jpeg',
+                    filename => "$id.$_." . $image->{extension},
+                    content_type => $image->{content_type},
                     encoding => 'base64',
                         # quoted-printable ends up with newlines corrupting binary data
-                    name => "$id.$_.jpeg",
+                    name => "$id.$_." . $image->{extension},
                 },
             }
         } (0..$num-1);
diff --git a/perllib/FixMyStreet/DB/Result/Comment.pm b/perllib/FixMyStreet/DB/Result/Comment.pm
index e5929ca57..85cdb29f0 100644
--- a/perllib/FixMyStreet/DB/Result/Comment.pm
+++ b/perllib/FixMyStreet/DB/Result/Comment.pm
@@ -173,12 +173,12 @@ sub photos {
     my $i = 0;
     my $id = $self->id;
     my @photos = map {
-        my $format = 'jpeg';
         my $cachebust = substr($_, 0, 8);
+        my ($hash, $format) = split /\./, $_;
         {
-            id => $_,
-            url_temp => "/photo/$_.temp.$format",
-            url_temp_full => "/photo/$_.fulltemp.$format",
+            id => $hash,
+            url_temp => "/photo/temp.$hash.$format",
+            url_temp_full => "/photo/fulltemp.$hash.$format",
             url => "/photo/c/$id.$i.$format?$cachebust",
             url_full => "/photo/c/$id.$i.full.$format?$cachebust",
             idx => $i++,
diff --git a/perllib/FixMyStreet/DB/Result/Problem.pm b/perllib/FixMyStreet/DB/Result/Problem.pm
index 780a30e69..764f381a2 100644
--- a/perllib/FixMyStreet/DB/Result/Problem.pm
+++ b/perllib/FixMyStreet/DB/Result/Problem.pm
@@ -875,12 +875,12 @@ sub photos {
     my $i = 0;
     my $id = $self->id;
     my @photos = map {
-        my $format = 'jpeg';
         my $cachebust = substr($_, 0, 8);
+        my ($hash, $format) = split /\./, $_;
         {
-            id => $_,
-            url_temp => "/photo/$_.temp.$format",
-            url_temp_full => "/photo/$_.fulltemp.$format",
+            id => $hash,
+            url_temp => "/photo/temp.$hash.$format",
+            url_temp_full => "/photo/fulltemp.$hash.$format",
             url => "/photo/$id.$i.$format?$cachebust",
             url_full => "/photo/$id.$i.full.$format?$cachebust",
             url_tn => "/photo/$id.$i.tn.$format?$cachebust",
diff --git a/perllib/FixMyStreet/Script/Reports.pm b/perllib/FixMyStreet/Script/Reports.pm
index e1eb5e2c5..58788119a 100644
--- a/perllib/FixMyStreet/Script/Reports.pm
+++ b/perllib/FixMyStreet/Script/Reports.pm
@@ -83,7 +83,7 @@ sub send(;$) {
         $h{phone_line} = $h{phone} ? _('Phone:') . " $h{phone}\n\n" : '';
         if ($row->photo) {
             $h{has_photo} = _("This web page also contains a photo of the problem, provided by the user.") . "\n\n";
-            $h{image_url} = $email_base_url . '/photo/' . $row->id . '.full.jpeg';
+            $h{image_url} = $email_base_url . $row->photos->[0]->{url_full};
         } else {
             $h{has_photo} = '';
             $h{image_url} = '';
diff --git a/perllib/Open311.pm b/perllib/Open311.pm
index e500219bc..fb793b027 100644
--- a/perllib/Open311.pm
+++ b/perllib/Open311.pm
@@ -345,7 +345,7 @@ sub _populate_service_request_update_params {
     if ( $comment->photo ) {
         my $cobrand = FixMyStreet::Cobrand->get_class_for_moniker($comment->cobrand)->new();
         my $email_base_url = $cobrand->base_url($comment->cobrand_data);
-        my $url = $email_base_url . '/photo/c/' . $comment->id . '.full.jpeg';
+        my $url = $email_base_url . $comment->photos->[0]->{url_full};
         $params->{media_url} = $url;
     }
 
diff --git a/t/app/controller/photo.t b/t/app/controller/photo.t
index 39380e769..425e3c4df 100644
--- a/t/app/controller/photo.t
+++ b/t/app/controller/photo.t
@@ -65,10 +65,10 @@ subtest "Check multiple upload worked" => sub {
         ok $mech->success, 'Made request with multiple photo upload';
         $mech->base_is('http://localhost/report/new');
         $mech->content_like(
-            qr[(<img align="right" src="/photo/1cdd4329ceee2234bd4e89cb33b42061a0724687.temp.jpeg" alt="">\s*){3}],
+            qr[(<img align="right" src="/photo/temp.1cdd4329ceee2234bd4e89cb33b42061a0724687.jpeg" alt="">\s*){3}],
             'Three uploaded pictures are all shown, safe');
         $mech->content_contains(
-            'name="upload_fileid" value="1cdd4329ceee2234bd4e89cb33b42061a0724687,1cdd4329ceee2234bd4e89cb33b42061a0724687,1cdd4329ceee2234bd4e89cb33b42061a0724687"',
+            'name="upload_fileid" value="1cdd4329ceee2234bd4e89cb33b42061a0724687.jpeg,1cdd4329ceee2234bd4e89cb33b42061a0724687.jpeg,1cdd4329ceee2234bd4e89cb33b42061a0724687.jpeg"',
             'Returned upload_fileid contains expected hash, 3 times');
         my $image_file = path($UPLOAD_DIR, '1cdd4329ceee2234bd4e89cb33b42061a0724687.jpeg');
         ok $image_file->exists, 'File uploaded to temp';
diff --git a/t/app/controller/report_new.t b/t/app/controller/report_new.t
index cf72221b4..eb29d37da 100644
--- a/t/app/controller/report_new.t
+++ b/t/app/controller/report_new.t
@@ -420,7 +420,7 @@ foreach my $test (
         changes => {
             photo1 => '',
         },
-        errors => [ "Please upload a JPEG image only" ],
+        errors => [ "Please upload an image only" ],
     },
     {
         msg    => 'bad photo upload gives error',
@@ -443,7 +443,7 @@ foreach my $test (
         changes => {
             photo1 => '',
         },
-        errors => [ "That image doesn't appear to have uploaded correctly (Please upload a JPEG image only ), please try again." ],
+        errors => [ "That image doesn't appear to have uploaded correctly (Please upload an image only ), please try again." ],
     },
     {
         msg    => 'photo with octet-stream gets through okay',
diff --git a/t/app/model/photoset.t b/t/app/model/photoset.t
index cfb5236a8..577e39eb1 100644
--- a/t/app/model/photoset.t
+++ b/t/app/model/photoset.t
@@ -58,7 +58,7 @@ subtest 'Photoset with photo inline in DB' => sub {
     my $report = make_report( $image_path->slurp );
     my $photoset = $report->get_photoset();
     is $photoset->num_images, 1, 'Found just 1 image';
-    is $photoset->data, '1cdd4329ceee2234bd4e89cb33b42061a0724687';
+    is $photoset->data, '1cdd4329ceee2234bd4e89cb33b42061a0724687.jpeg';
 };
 
 $image_path->copy( path( $UPLOAD_DIR, '0123456789012345678901234567890123456789.jpeg' ) );
diff --git a/t/open311.t b/t/open311.t
index 6333355e8..42d09b29c 100644
--- a/t/open311.t
+++ b/t/open311.t
@@ -3,6 +3,8 @@
 use utf8;
 use strict;
 use warnings;
+use File::Temp 'tempdir';
+use Path::Tiny;
 use Test::More;
 use Test::Warn;
 use FixMyStreet::DB;
@@ -24,7 +26,7 @@ EOT
 is $o->_process_error( $err_text ), "400: Service Code cannot be null -- can't proceed with the request.\n", 'error text parsing';
 is $o->_process_error( '503 - service unavailable' ), 'unknown error', 'error text parsing of bad error';
 
-my $o2 = Open311->new( endpoint => 'http://192.168.50.1/open311/', jurisdiction => 'example.org' );
+my $o2 = Open311->new( endpoint => 'http://127.0.0.1/open311/', jurisdiction => 'example.org' );
 
 my $u = FixMyStreet::DB->resultset('User')->new( { email => 'test@example.org', name => 'A User' } );
 
@@ -258,16 +260,26 @@ subtest 'extended request update post parameters' => sub {
 };
 
 subtest 'check media url set' => sub {
-    $comment->photo(1);
+    my $UPLOAD_DIR = tempdir( CLEANUP => 1 );
+
+    my $image_path = path('t/app/controller/sample.jpg');
+    $image_path->copy( path( $UPLOAD_DIR, '0123456789012345678901234567890123456789.jpeg' ) );
+
+    $comment->photo("0123456789012345678901234567890123456789");
     $comment->cobrand('fixmystreet');
 
-    my $results = make_update_req( $comment, '<?xml version="1.0" encoding="utf-8"?><service_request_updates><request_update><update_id>248</update_id></request_update></service_request_updates>' );
+    FixMyStreet::override_config {
+        UPLOAD_DIR => $UPLOAD_DIR,
+    }, sub {
+        my $results = make_update_req( $comment, '<?xml version="1.0" encoding="utf-8"?><service_request_updates><request_update><update_id>248</update_id></request_update></service_request_updates>' );
 
-    is $results->{ res }, 248, 'got update id';
+        is $results->{ res }, 248, 'got update id';
 
-    my $c = CGI::Simple->new( $results->{ req }->content );
-    my $expected_path = '/c/' . $comment->id . '.full.jpeg';
-    like $c->param('media_url'), qr/$expected_path/, 'image url included';
+        my $c = CGI::Simple->new( $results->{ req }->content );
+        my $expected_path = '/c/' . $comment->id . '.0.full.jpeg';
+        like $c->param('media_url'), qr/$expected_path/, 'image url included';
+    };
+    $comment->photo(undef);
 };
 
 foreach my $test (
diff --git a/t/open311/getservicerequestupdates.t b/t/open311/getservicerequestupdates.t
index 18a5802bb..a57d2d0e6 100644
--- a/t/open311/getservicerequestupdates.t
+++ b/t/open311/getservicerequestupdates.t
@@ -388,7 +388,7 @@ subtest 'Update with media_url includes image in update' => sub {
     is $problem->comments->count, 1, 'comment count';
     my $c = $problem->comments->first;
     is $c->external_id, 638344;
-    is $c->photo, '1cdd4329ceee2234bd4e89cb33b42061a0724687', 'photo exists';
+    is $c->photo, '1cdd4329ceee2234bd4e89cb33b42061a0724687.jpeg', 'photo exists';
 };
 
 foreach my $test (
diff --git a/templates/web/base/questionnaire/index.html b/templates/web/base/questionnaire/index.html
index 86887c163..a523cd439 100644
--- a/templates/web/base/questionnaire/index.html
+++ b/templates/web/base/questionnaire/index.html
@@ -82,7 +82,7 @@
       [% IF upload_fileid %]
         <p>[% loc('You have already attached photos to this update.  Note that you can attach a maximum of 3 to this update (if you try to upload more, the oldest will be removed).') %]</p>
         [% FOREACH id IN upload_fileid.split(',') %]
-        <img align="right" src="/photo/[% id %].temp.jpeg" alt="">
+        <img align="right" src="/photo/temp.[% id %]" alt="">
         [% END %]
     [% END %]
         <input type="file" name="photo1" id="form_photo">
diff --git a/templates/web/base/report/new/form_report.html b/templates/web/base/report/new/form_report.html
index 68fb2c796..3fbf7c160 100644
--- a/templates/web/base/report/new/form_report.html
+++ b/templates/web/base/report/new/form_report.html
@@ -31,7 +31,7 @@
       [% IF upload_fileid %]
         <p>[% loc('You have already attached photos to this report.  Note that you can attach a maximum of 3 to this report (if you try to upload more, the oldest will be removed).') %]</p>
         [% FOREACH id IN upload_fileid.split(',') %]
-        <img align="right" src="/photo/[% id %].temp.jpeg" alt="">
+        <img align="right" src="/photo/temp.[% id %]" alt="">
         [% END %]
       [% END %]
         <input type="file" name="photo1" id="form_photo">
diff --git a/templates/web/base/report/update/form_update.html b/templates/web/base/report/update/form_update.html
index fb977e00e..007bd68d8 100644
--- a/templates/web/base/report/update/form_update.html
+++ b/templates/web/base/report/update/form_update.html
@@ -13,7 +13,7 @@
       [% IF upload_fileid %]
         <p>[% loc('You have already attached photos to this update.  Note that you can attach a maximum of 3 to this update (if you try to upload more, the oldest will be removed).') %]</p>
         [% FOREACH id IN upload_fileid.split(',') %]
-        <img align="right" src="/photo/[% id %].temp.jpeg" alt="">
+        <img align="right" src="/photo/temp.[% id %]" alt="">
         [% END %]
     [% END %]
         <input type="file" name="photo1" id="form_photo">
diff --git a/templates/web/bromley/report/display.html b/templates/web/bromley/report/display.html
index 1484bc489..da83e005f 100644
--- a/templates/web/bromley/report/display.html
+++ b/templates/web/bromley/report/display.html
@@ -72,7 +72,7 @@
               [% IF upload_fileid %]
                 <p>[% loc('You have already attached photos to this update.  Note that you can attach a maximum of 3 to this update (if you try to upload more, the oldest will be removed).') %]</p>
                 [% FOREACH id IN upload_fileid.split(',') %]
-                <img align="right" src="/photo/[% id %].temp.jpeg" alt="">
+                <img align="right" src="/photo/temp.[% id %]" alt="">
                 [% END %]
             [% END %]
                 <input type="file" name="photo1" id="form_photo">
diff --git a/templates/web/bromley/report/new/fill_in_details_form.html b/templates/web/bromley/report/new/fill_in_details_form.html
index 858da1a07..96f23d1fb 100644
--- a/templates/web/bromley/report/new/fill_in_details_form.html
+++ b/templates/web/bromley/report/new/fill_in_details_form.html
@@ -60,7 +60,7 @@
               [% IF upload_fileid %]
                 <p>[% loc('You have already attached photos to this report.  Note that you can attach a maximum of 3 to this report (if you try to upload more, the oldest will be removed).') %]</p>
                 [% FOREACH id IN upload_fileid.split(',') %]
-                <img align="right" src="/photo/[% id %].temp.jpeg" alt="">
+                <img align="right" src="/photo/temp.[% id %]" alt="">
                 [% END %]
               [% END %]
                 <input type="file" name="photo1" id="form_photo">
diff --git a/templates/web/eastsussex/report/update-form.html b/templates/web/eastsussex/report/update-form.html
index ae9cceac4..abcc2f532 100644
--- a/templates/web/eastsussex/report/update-form.html
+++ b/templates/web/eastsussex/report/update-form.html
@@ -72,7 +72,7 @@
               [% IF upload_fileid %]
                 <p>[% loc('You have already attached photos to this update.  Note that you can attach a maximum of 3 to this update (if you try to upload more, the oldest will be removed).') %]</p>
                 [% FOREACH id IN upload_fileid.split(',') %]
-                <img align="right" src="/photo/[% id %].temp.jpeg" alt="">
+                <img align="right" src="/photo/temp.[% id %]" alt="">
                 [% END %]
             [% END %]
                 <input type="file" name="photo1" id="form_photo">
diff --git a/templates/web/emptyhomes/report/new/fill_in_details_form.html b/templates/web/emptyhomes/report/new/fill_in_details_form.html
index 1b82748c9..049ffa076 100644
--- a/templates/web/emptyhomes/report/new/fill_in_details_form.html
+++ b/templates/web/emptyhomes/report/new/fill_in_details_form.html
@@ -76,7 +76,7 @@
       [% IF upload_fileid %]
         <p>[% loc('You have already attached photos to this report.  Note that you can attach a maximum of 3 to this report (if you try to upload more, the oldest will be removed).') %]</p>
         [% FOREACH id IN upload_fileid.split(',') %]
-        <img align="right" src="/photo/[% id %].temp.jpeg" alt="">
+        <img align="right" src="/photo/temp.[% id %]" alt="">
         [% END %]
       [% END %]
         <input type="file" name="photo1" id="form_photo">
diff --git a/templates/web/seesomething/report/new/fill_in_details_form.html b/templates/web/seesomething/report/new/fill_in_details_form.html
index 1cc841af5..728b27e41 100644
--- a/templates/web/seesomething/report/new/fill_in_details_form.html
+++ b/templates/web/seesomething/report/new/fill_in_details_form.html
@@ -58,7 +58,7 @@
                   [% IF upload_fileid %]
                     <p>[% loc('You have already attached photos to this report.  Note that you can attach a maximum of 3 to this report (if you try to upload more, the oldest will be removed).') %]</p>
                     [% FOREACH id IN upload_fileid.split(',') %]
-                    <img align="right" src="/photo/[% id %].temp.jpeg" alt="">
+                    <img align="right" src="/photo/temp.[% id %]" alt="">
                     [% END %]
                   [% END %]
                     <input type="file" name="photo1" id="form_photo">
diff --git a/templates/web/zurich/report/new/fill_in_details_form.html b/templates/web/zurich/report/new/fill_in_details_form.html
index 7628bf23f..1e9db6b31 100644
--- a/templates/web/zurich/report/new/fill_in_details_form.html
+++ b/templates/web/zurich/report/new/fill_in_details_form.html
@@ -54,7 +54,7 @@
               [% IF upload_fileid %]
                 <p>[% loc('You have already attached photos to this report.  Note that you can attach a maximum of 3 to this report (if you try to upload more, the oldest will be removed).') %]</p>
                 [% FOREACH id IN upload_fileid.split(',') %]
-                <img align="right" src="/photo/[% id %].temp.jpeg" alt="">
+                <img align="right" src="/photo/temp.[% id %]" alt="">
                 [% END %]
               [% END %]
                 <input type="file" name="photo1" id="form_photo">
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 4de18be9a..5935d2bae 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -206,7 +206,7 @@ $(function(){
         addRemoveLinks: true,
         thumbnailHeight: 150,
         thumbnailWidth: 150,
-        acceptedFiles: 'image/jpeg,image/pjpeg',
+        acceptedFiles: 'image/jpeg,image/pjpeg,image/gif,image/tiff,image/png',
         dictDefaultMessage: translation_strings.upload_default_message,
         dictCancelUploadConfirmation: translation_strings.upload_cancel_confirmation,
         dictInvalidFileType: translation_strings.upload_invalid_file_type,
@@ -258,7 +258,7 @@ $(function(){
         }
         var mockFile = { name: f, server_id: f };
         photodrop.emit("addedfile", mockFile);
-        photodrop.createThumbnailFromUrl(mockFile, '/photo/' + f + '.temp.jpeg');
+        photodrop.createThumbnailFromUrl(mockFile, '/photo/temp.' + f);
         photodrop.emit("complete", mockFile);
         photodrop.options.maxFiles -= 1;
       });