Add multiple photo upload support.

Three file inputs, progressively enhanced with dropzone.

This moves the photo input higher up, so that photos can upload while
you're filling out the form. It standardises and improves photo error
handling.

[fixmystreet.com] Guidance for what photos should and shouldn’t include.

7 files changed, 94 insertions, 72 deletions

diff --git a/templates/web/base/common_header_tags.html b/templates/web/base/common_header_tags.html
index 0ad3ffb5f..1faf542d8 100644
--- a/templates/web/base/common_header_tags.html
+++ b/templates/web/base/common_header_tags.html
@@ -8,6 +8,7 @@
 
 <script type="text/javascript" src="[% start %]/jslib/jquery-1.7.2.min.js"></script>
 <script src="[% start %][% version('/js/jquery.validate.min.js') %]" type="text/javascript" charset="utf-8"></script>
+<script type="text/javascript" src="[% start %]/js/dropzone.min.js"></script>
 
 <script type="text/javascript" src="[% start %][% version('/js/geo.min.js') %]"></script>
 <script type="text/javascript" src="[% start %][% version('/js/fixmystreet.js') %]"></script>
diff --git a/templates/web/base/js/translation_strings.html b/templates/web/base/js/translation_strings.html
index 669055a1b..b97104f92 100644
--- a/templates/web/base/js/translation_strings.html
+++ b/templates/web/base/js/translation_strings.html
@@ -47,5 +47,10 @@
 
         permalink: '[% loc('Permalink') | replace("'", "\\'") %]',
 
+        upload_max_files_exceeded: '[% loc ('Whoa there Testino! Three photos are enough.') | replace("'", "\\'") %]',
+        upload_default_message: '[% loc ('Drag and drop photos here or <u>click to upload</u>') | replace("'", "\\'") %]',
+        upload_cancel_confirmation: '[% loc ('Are you sure you want to cancel this upload?') | replace("'", "\\'") %]',
+        upload_invalid_file_type: '[% loc ('Please upload a JPEG image only') | replace("'", "\\'") %]',
+
         report_problem_heading: '[% loc('Click map to report a problem') | replace("'", "\\'") %]'
     };
diff --git a/templates/web/base/report/new/fill_in_details_form.html b/templates/web/base/report/new/fill_in_details_form.html
index 82b1097b7..5599c2059 100644
--- a/templates/web/base/report/new/fill_in_details_form.html
+++ b/templates/web/base/report/new/fill_in_details_form.html
@@ -48,6 +48,32 @@
           [% END %]
             <input type="text" value="[% report.title | html %]" name="title" id="form_title" placeholder="[% loc('What’s the issue, and where is it?') %]" required>
 
+          [% IF c.cobrand.allow_photo_upload %]
+            <input type="hidden" name="upload_fileid" value="[% upload_fileid %]">
+            <label for="form_photo">[% loc('Photo') %]</label>
+
+              [% IF field_errors.photo %]
+                <p class='form-error'>[% field_errors.photo %]</p>
+              [% END %]
+
+            <div id="form_photos">
+              [% IF upload_fileid %]
+                <script>
+                    fixmystreet.uploaded_files = "[% upload_fileid %]".split(',');
+                </script>
+                <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="">
+                [% END %]
+              [% END %]
+                <input type="file" name="photo1" id="form_photo">
+                <input type="file" name="photo2" id="form_photo2">
+                <input type="file" name="photo3" id="form_photo3">
+            </div>
+          [% END %]
+
+          [% TRY %][% PROCESS 'report/new/after_photo.html' %][% CATCH file %][% END %]
+
             <label for="form_detail">[% loc('Description') %] [% INCLUDE 'report/public_label.html' %]</label>
           [% IF field_errors.detail %]
             <p class='form-error'>[% field_errors.detail %]</p>
@@ -62,29 +88,6 @@
 
           [% TRY %][% PROCESS 'report/new/after_category.html' %][% CATCH file %][% END %]
 
-          [% IF c.cobrand.allow_photo_upload %]
-              <label for="form_photo">[% loc('Photo') %]</label>
-              [% IF upload_fileid || report.photo %]
-                  [% IF upload_fileid %]
-                    <img align="right" src="/photo/[% upload_fileid %].temp.jpeg" alt="">
-                    <input type="hidden" name="upload_fileid" value="[% upload_fileid %]">
-                  [% END %]
-
-                <p>[% loc('You have already attached a photo to this report, attaching another one will replace it.') %]</p>
-
-                  [% IF report.photo %]
-                    <img align="right" src="/photo/[% report.id %].jpeg">
-                  [% END %]
-              [% END %]
-
-              [% IF field_errors.photo %]
-                <p class='form-error'>[% field_errors.photo %]</p>
-              [% END %]
-            <input type="file" name="photo" id="form_photo">
-          [% END %]
-
-          [% TRY %][% PROCESS 'report/new/after_photo.html' %][% CATCH file %][% END %]
-
           [% IF c.user_exists %]
             [% PROCESS "report/new/form_user_loggedin.html" %]
           [% ELSE %]
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 6bf077322..09e695278 100644
--- a/templates/web/bromley/report/new/fill_in_details_form.html
+++ b/templates/web/bromley/report/new/fill_in_details_form.html
@@ -48,6 +48,32 @@
             [% END %]
             <input type="text" value="[% report.title | html %]" name="title" id="form_title" placeholder="[% loc('Provide a title') %]" required>
 
+          [% IF c.cobrand.allow_photo_upload %]
+            <input type="hidden" name="upload_fileid" value="[% upload_fileid %]">
+            <label for="form_photo">[% loc('Photo') %]</label>
+
+              [% IF field_errors.photo %]
+                <p class='form-error'>[% field_errors.photo %]</p>
+              [% END %]
+
+            <div id="form_photos">
+              [% IF upload_fileid %]
+                <script>
+                    fixmystreet.uploaded_files = "[% upload_fileid %]".split(',');
+                </script>
+                <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="">
+                [% END %]
+              [% END %]
+                <input type="file" name="photo1" id="form_photo">
+                <input type="file" name="photo2" id="form_photo2">
+                <input type="file" name="photo3" id="form_photo3">
+            </div>
+          [% END %]
+
+          [% TRY %][% PROCESS 'report/new/after_photo.html' %][% CATCH file %][% END %]
+
             <label for="form_detail">[% loc('Details') %]</label>
             [% IF report.used_map %]
             <p>
@@ -62,29 +88,6 @@
 
             [% PROCESS "report/new/category_wrapper.html" %]
 
-            [% IF c.cobrand.allow_photo_upload %]
-                [% IF field_errors.photo %]
-                    <p class='form-error'>[% field_errors.photo %]</p>
-                [% END %]
-                
-                
-                [% IF upload_fileid || report.photo %]
-                    [% IF upload_fileid %]
-                        <img align="right" src="/photo/[% upload_fileid %].temp.jpeg" alt="">
-                        <input type="hidden" name="upload_fileid" value="[% upload_fileid %]">
-                    [% END %]
-
-                    <p>[% loc('You have already attached a photo to this report, attaching another one will replace it.') %]</p>
-
-                    [% IF report.photo %]
-                        <img align="right" src="/photo/[% report.id %].jpeg">
-                    [% END %]
-                [% END %]
-                
-                <label for="form_photo">[% loc('Photo') %]</label>
-                <input type="file" name="photo" id="form_photo">
-            [% END %]
-
             [% IF c.user_exists %]
                 <div class="form-box">
                     [% INCLUDE 'report/new/extra_name.html' %]
diff --git a/templates/web/fixmystreet.com/report/new/after_photo.html b/templates/web/fixmystreet.com/report/new/after_photo.html
new file mode 100644
index 000000000..987f6d124
--- /dev/null
+++ b/templates/web/fixmystreet.com/report/new/after_photo.html
@@ -0,0 +1,10 @@
+<div class="description_tips">
+  <h4>Tips for perfect photos:</h4>
+    <ul class="do">
+        <li>Show what the problem is</li>
+        <li>Show where it’s located</li>
+    </ul>
+    <ul class="dont">
+        <li>Avoid personal information and vehicle number plates</li>
+    </ul>
+</div>
\ No newline at end of file
diff --git a/templates/web/oxfordshire/report/new/after_photo.html b/templates/web/oxfordshire/report/new/after_photo.html
deleted file mode 100644
index bd8b7076f..000000000
--- a/templates/web/oxfordshire/report/new/after_photo.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<p><small>Please be aware that you can only attach one picture so ensure that
-you provide a picture that clearly shows the location not just the fault.
-</small></p>
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 c8c567786..7a487f902 100644
--- a/templates/web/zurich/report/new/fill_in_details_form.html
+++ b/templates/web/zurich/report/new/fill_in_details_form.html
@@ -39,39 +39,42 @@
                 <p class='form-error'>[% field_errors.bodies %]</p>
             [% END %]
 
-            <label for="form_detail">[% loc('Details') %]</label>
-            [% IF field_errors.detail %]
-                <p class='form-error'>[% field_errors.detail %]</p>
-            [% END %]
-            <textarea rows="7" cols="26" name="detail" id="form_detail" placeholder="[% loc('Please fill in details of the problem.') %]" required>[% report.detail | html %]</textarea>
-
-            [% PROCESS "report/new/category_wrapper.html" %]
-
-            [% IF c.cobrand.allow_photo_upload %]
+          [% IF c.cobrand.allow_photo_upload %]
+            <input type="hidden" name="upload_fileid" value="[% upload_fileid %]">
                 <label for="form_photo">
                     [% loc('Photo') %]
                     [% loc('(Defect &amp; location of defect)') %]
                 </label>
-                [% IF upload_fileid || report.photo %]
-                    [% IF upload_fileid %]
-                        <img align="right" src="/photo/[% upload_fileid %].temp.jpeg" alt="">
-                        <input type="hidden" name="upload_fileid" value="[% upload_fileid %]">
-                    [% END %]
 
-                    <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>
-
-                    [% IF report.photo %]
-                        <img align="right" src="/photo/[% report.id %].jpeg">
-                    [% END %]
-                [% END %]
-
-                [% IF field_errors.photo %]
-                    <p class='form-error'>[% field_errors.photo %]</p>
+              [% IF field_errors.photo %]
+                <p class='form-error'>[% field_errors.photo %]</p>
+              [% END %]
+
+            <div id="form_photos">
+              [% IF upload_fileid %]
+                <script>
+                    fixmystreet.uploaded_files = "[% upload_fileid %]".split(',');
+                </script>
+                <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="">
                 [% END %]
+              [% END %]
                 <input type="file" name="photo1" id="form_photo">
                 <input type="file" name="photo2" id="form_photo2">
                 <input type="file" name="photo3" id="form_photo3">
+            </div>
+          [% END %]
+
+          [% TRY %][% PROCESS 'report/new/after_photo.html' %][% CATCH file %][% END %]
+
+            <label for="form_detail">[% loc('Details') %]</label>
+            [% IF field_errors.detail %]
+                <p class='form-error'>[% field_errors.detail %]</p>
             [% END %]
+            <textarea rows="7" cols="26" name="detail" id="form_detail" placeholder="[% loc('Please fill in details of the problem.') %]" required>[% report.detail | html %]</textarea>
+
+            [% PROCESS "report/new/category_wrapper.html" %]
 
                 <label for="form_email">[% loc('Your email') %]</label>
                 [% IF field_errors.email %]