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)