Allow multiple JS dropzones on a single page.

As well as the original form using #form_photo, add
Dropzone to any form with a .js-photo-label in it.

1 files changed, 10 insertions, 4 deletions

diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 8e5e40f4d..af69a536e 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -556,10 +556,16 @@ $.extend(fixmystreet.set_up, {
 
     if ('Dropzone' in window) {
       Dropzone.autoDiscover = false;
+    } else {
+      return;
     }
-    if ('Dropzone' in window && $('#form_photo', $context).length) {
-      var $originalLabel = $('[for="form_photo"]', $context);
-      var $originalInput = $('#form_photos', $context);
+
+    var forms = $('[for="form_photo"], .js-photo-label', $context).closest('form');
+    forms.each(function() {
+      // Internal $context is the individual form with the photo upload inside
+      var $context = $(this);
+      var $originalLabel = $('[for="form_photo"], .js-photo-label', $context);
+      var $originalInput = $('#form_photos, .js-photo-fields', $context);
       var $dropzone = $('<div>').addClass('dropzone');
 
       $originalLabel.removeAttr('for');
@@ -642,7 +648,7 @@ $.extend(fixmystreet.set_up, {
         photodrop.emit("complete", mockFile);
         photodrop.options.maxFiles -= 1;
       });
-    }
+    });
   },
 
   report_list_filters: function() {