feat: allow multiple files picker on inline and array field

Author: EduardoJM

image_uploader_widget/static/image_uploader_widget/js/image-uploader-inline.js

@@ -138,49 +138,27 @@ function cloneFromEmptyTemplate(root) {
 }
 
 function handleAddNewImage(root, tempFileInput, inputFile = null) {
-  file = inputFile ||(tempFileInput.files || [null])[0];
-  if (!file) {
-      return;
-  }
-  if (!file.type.startsWith('image/')) {
+  files = inputFile ? [inputFile] : (tempFileInput.files || []);
+  if (!files.length) {
     return;
   }
-  const row = cloneFromEmptyTemplate(root);
-  const img = document.createElement('img');
-  img.src = URL.createObjectURL(file);
-  row.appendChild(img);
-  const rowFileInput = row.querySelector('input[type=file]');
-  const parent = rowFileInput.parentElement;
+  for (const file of files) {
+    if (!file.type.startsWith('image/')) {
+      continue;
+    }
+    const row = cloneFromEmptyTemplate(root);
+    const img = document.createElement('img');
+    img.src = URL.createObjectURL(file);
+    row.appendChild(img);
+    const rowFileInput = row.querySelector('input[type=file]');
+    // const parent = rowFileInput.parentElement;
 
-  if (!tempFileInput) {
     const dataTransferList = new DataTransfer();
     dataTransferList.items.add(file);
     rowFileInput.files = dataTransferList.files;
-
-    updateAllIndexes(root);
-    return;
   }
 
-  const className = rowFileInput.className;
-  const name = rowFileInput.getAttribute('name');
-  parent.removeChild(rowFileInput);
-
-  clonedInput = tempFileInput.cloneNode(true)
-  clonedInput.className = className;
-  clonedInput.setAttribute('name', name || '');
-
-  //
-  // TODO: Safari not clone files inside the input.
-  //
-  //
-  const dataTransferList = new DataTransfer();
-  dataTransferList.items.add(file);
-  clonedInput.files = dataTransferList.files;
-
   tempFileInput.value = null
-
-  parent.appendChild(clonedInput);
-
   updateAllIndexes(root);
 }
 

image_uploader_widget/templates/image_uploader_widget/admin/inline_image_uploader.html

@@ -114,6 +114,7 @@
       type="file"
       class="temp_file"
       accept="{{ inline_admin_formset.formset.accept }}"
+      multiple
       style="display: none;"
     />
   </div>

image_uploader_widget/templates/image_uploader_widget/postgres/image_array.html

@@ -144,6 +144,7 @@
       type="file"
       class="temp_file"
       accept="image/*"
+      multiple
       style="display: none;"
     />
   </div>

tests/e2e/inline_base.py

@@ -43,6 +43,19 @@ def test_choose_same_file_two_times(self):
         thumbs = self.inline_po.get_visible_thumbnails()
         self.assertEqual(len(thumbs), 2)
 
+    def test_choose_multiple_images(self):
+        self.goto_add_page()
+
+        images = ["image1.png", "image2.png", "image3.png"]
+        self.inline_po.execute_select_multiple_images(images)
+
+        thumbs = self.inline_po.get_visible_thumbnails()
+        self.assertEqual(len(thumbs), 3)
+
+        self.inline_po.execute_select_image("image1.png")
+        thumbs = self.inline_po.get_visible_thumbnails()
+        self.assertEqual(len(thumbs), 4)
+
     def test_initial_state(self):
         self.goto_add_page()
         time.sleep(0.3)

tests/e2e/tests_array_field/tests_e2e_widget_array_field.py

@@ -62,6 +62,32 @@ def test_choose_files_and_save(self):
         for url in item.images:
             self.assertIsNotNone(url)
 
+    def test_choose_multiple_files_and_save(self):
+        self.assertEqual(len(models.TestWithArrayField.objects.all()), 0)
+        self.goto_add_page()
+
+        thumbs = self.inline_po.get_visible_thumbnails()
+        self.assertEqual(len(thumbs), 0)
+
+        self.inline_po.execute_select_multiple_images(["image1.png", "image2.png"])
+        thumbs = self.inline_po.get_visible_thumbnails()
+        self.assertEqual(len(thumbs), 2)
+
+        self.inline_po.execute_select_multiple_images(["image2.png", "image3.png"])
+        thumbs = self.inline_po.get_visible_thumbnails()
+        self.assertEqual(len(thumbs), 4)
+
+        for thumb in thumbs:
+            self.assertTrue(thumb.is_valid(required=False))
+
+        self.admin_po.change_form.submit_form()
+
+        item = models.TestWithArrayField.objects.first()
+        self.assertIsNotNone(item)
+        self.assertEqual(len(item.images), 4)
+        for url in item.images:
+            self.assertIsNotNone(url)
+
     def test_remove_unsaved_image(self):
         self.assertEqual(len(models.TestWithArrayField.objects.all()), 0)
         self.goto_add_page()

tests/e2e/tests_inline/tests_e2e_inline.py

@@ -55,6 +55,31 @@ def test_choose_files_and_save(self):
         for item in items:
             self.assertIsNotNone(item.image)
 
+    def test_choose_multiple_files_and_save(self):
+        self.assertEqual(len(models.InlineItem.objects.all()), 0)
+        self.goto_add_page()
+
+        thumbs = self.inline_po.get_visible_thumbnails()
+        self.assertEqual(len(thumbs), 0)
+
+        self.inline_po.execute_select_multiple_images(["image1.png", "image2.png"])
+        thumbs = self.inline_po.get_visible_thumbnails()
+        self.assertEqual(len(thumbs), 2)
+
+        self.inline_po.execute_select_multiple_images(["image2.png", "image3.png"])
+        thumbs = self.inline_po.get_visible_thumbnails()
+        self.assertEqual(len(thumbs), 4)
+
+        for thumb in thumbs:
+            self.assertTrue(thumb.is_valid(required=False))
+
+        self.admin_po.change_form.submit_form()
+
+        items = models.InlineItem.objects.all()
+        self.assertEqual(len(items), 4)
+        for item in items:
+            self.assertIsNotNone(item.image)
+
     def test_remove_non_saved_itens(self):
         self.assertEqual(len(models.InlineItem.objects.all()), 0)
         self.goto_add_page()

tests/pom/component/inline_po.py

@@ -29,6 +29,10 @@ def execute_select_image(self, image: str):
         image = get_mock_image(image)
         self.page_elements.temp_file_input.set_input_files(image)
 
+    def execute_select_multiple_images(self, images):
+        images = [get_mock_image(img) for img in images]
+        self.page_elements.temp_file_input.set_input_files(images)
+
     def is_add_button_visible(self):
         return self.page_elements.add_image_button.is_visible()