Fix -- Add missing submit value to form

Some forms like Django's admin have multiple submit buttons.
The value of those buttons is transmitted on click events. We
add them as a hidden field to submit the same value, even thogh
the original event is not executed.

Author: codingjoe

s3file/static/s3file/js/s3file.js

@@ -16,13 +16,13 @@
     form.appendChild(input)
   }
 
-  function waitForAllFiles(form) {
+  function waitForAllFiles (form) {
     if (window.uploading !== 0) {
       setTimeout(() => {
         waitForAllFiles(form)
       }, 100)
     } else {
-      HTMLFormElement.prototype.submit.call(form)
+      window.HTMLFormElement.prototype.submit.call(form)
     }
   }
 
@@ -77,7 +77,29 @@
       fileInput.setCustomValidity(err)
       fileInput.reportValidity()
     })
+  }
+
+  function clickSubmit (e) {
+    e.preventDefault()
+    let submitButton = e.target
+    let form = submitButton.closest('form')
+    const submitInput = document.createElement('input')
+    submitInput.type = 'hidden'
+    submitInput.value = true
+    submitInput.name = submitButton.name
+    form.appendChild(submitInput)
+    uploadS3Inputs(form)
+  }
 
+  function uploadS3Inputs (form) {
+    window.uploading = 0
+    const inputs = form.querySelectorAll('.s3file')
+    Array.from(inputs).forEach(input => {
+      window.uploading += 1
+      uploadFiles(form, input, input.name)
+    }
+      )
+    waitForAllFiles(form)
   }
 
   document.addEventListener('DOMContentLoaded', () => {
@@ -88,16 +110,13 @@
     forms.forEach(form => {
       form.onsubmit = (e) => {
         e.preventDefault()
-        window.uploading = 0
-        const inputs = document.querySelectorAll('.s3file')
-        Array.from(inputs).forEach(input => {
-            window.uploading += 1
-            uploadFiles(form, input, input.name)
-          }
-        )
-        waitForAllFiles(form)
+        uploadS3Inputs(e.target)
+      }
+      let submitButtons = form.querySelectorAll('input[type=submit], button[type=submit]')
+      Array.from(submitButtons).forEach(submitButton => {
+        submitButton.onclick = clickSubmit
       }
+      )
     })
   })
-
 })()

setup.py

@@ -3,7 +3,7 @@
 
 setup(
     name='django-s3file',
-    version='3.0.2',
+    version='3.0.3',
     description='A lightweight file uploader input for Django and Amazon S3',
     author='codingjoe',
     url='https://github.com/codingjoe/django-s3file',

tests/test_forms.py

@@ -1,3 +1,4 @@
+import json
 from contextlib import contextmanager
 
 import pytest
@@ -51,7 +52,7 @@ def test_value_from_datadict(self, client, upload_file):
             's3file': 'file'
         })
 
-        assert response.status_code == 302
+        assert response.status_code == 201
 
     def test_value_from_datadict_initial_data(self, filemodel):
         form = UploadForm(instance=filemodel)
@@ -136,5 +137,24 @@ def test_file_insert(self, request, driver, live_server, upload_file, freeze):
             error = driver.find_element_by_xpath('//body[@JSError]')
             pytest.fail(error.get_attribute('JSError'))
 
+    def test_file_insert_submit_value(self, driver, live_server, upload_file, freeze):
+        driver.get(live_server + self.url)
+        file_input = driver.find_element_by_xpath('//input[@type=\'file\']')
+        file_input.send_keys(upload_file)
+        assert file_input.get_attribute('name') == 'file'
+        save_button = driver.find_element_by_xpath('//input[@name=\'save\']')
+        with wait_for_page_load(driver, timeout=10):
+            save_button.click()
+        assert 'save' in driver.page_source
+
+        driver.get(live_server + self.url)
+        file_input = driver.find_element_by_xpath('//input[@type=\'file\']')
+        file_input.send_keys(upload_file)
+        assert file_input.get_attribute('name') == 'file'
+        save_button = driver.find_element_by_xpath('//button[@name=\'save_continue\']')
+        with wait_for_page_load(driver, timeout=10):
+            save_button.click()
+        assert 'save_continue' in driver.page_source
+
     def test_media(self):
         assert ClearableFileInput().media._js == ['s3file/js/s3file.js']

tests/testapp/templates/form.html

@@ -13,7 +13,8 @@
 <form method="post">
     {% csrf_token %}
     {{ form }}
-    <input type="submit" name="submit" value="Submit Form"/>
+    <input type="submit" name="save" value="Save"/>
+    <button type="submit" name="save_continue">Save &amp; continue</button>
 </form>
 {{ form.media.js }}
 </body>

tests/testapp/urls.py

@@ -7,9 +7,5 @@
     url(r'^s3/$',
         views.S3MockView.as_view(), name='s3mock'),
     url(r'^upload/$',
-        FormView.as_view(
-            form_class=forms.UploadForm,
-            template_name='form.html',
-            success_url='/upload/'
-        ), name='upload'),
+        views.ExampleFormView.as_view(), name='upload'),
 ]

tests/testapp/views.py

@@ -1,7 +1,9 @@
 from django.core.files.storage import default_storage
-from django.http import response
+from django.http import JsonResponse, response
 from django.views import generic
 
+from tests.testapp import forms
+
 
 class S3MockView(generic.View):
 
@@ -19,3 +21,11 @@ def post(self, request):
             '<ETag>"1e2580c388265551922a1f73ae5954a3"</ETag>'
             '</PostResponse>' % key,
             status=201)
+
+
+class ExampleFormView(generic.FormView):
+    form_class = forms.UploadForm
+    template_name = 'form.html'
+
+    def form_valid(self, form):
+        return JsonResponse(self.request.POST, status=201)