Add multiple file upload suppoert

Author: codingjoe

s3file/middleware.py

@@ -1,3 +1,4 @@
+import json
 import logging
 import os
 
@@ -14,9 +15,9 @@ def __init__(self, get_response):
         self.get_response = get_response
 
     def __call__(self, request):
-        file_fields = request.POST.getlist('s3file', [])
+        file_fields = json.loads(request.POST.get('s3file', '[]'))
         for field_name in file_fields:
-            paths = request.POST.getlist(field_name, [])
+            paths = json.loads(request.POST.get(field_name, '[]'))
             request.FILES.setlist(field_name, list(self.get_files_from_storage(paths)))
 
         if local_dev and request.path == '/__s3_mock__/':

s3file/static/s3file/js/s3file.js

@@ -7,15 +7,6 @@
     return decodeURI(tag.childNodes[0].nodeValue)
   }
 
-  function addHiddenInput (body, name, form) {
-    var key = parseURL(body)
-    var input = document.createElement('input')
-    input.type = 'hidden'
-    input.value = key
-    input.name = name
-    form.appendChild(input)
-  }
-
   function waitForAllFiles (form) {
     if (window.uploading !== 0) {
       setTimeout(function () {
@@ -45,22 +36,19 @@
         form.loaded += diff
         fileInput.loaded += diff
         file.loaded = e.loaded
-
         var defaultEventData = {
           currentFile: file,
           currentFileName: file.name,
           currentFileProgress: Math.min(e.loaded / e.total, 1),
           originalEvent: e
         }
-
         form.dispatchEvent(new window.CustomEvent('progress', {
           detail: Object.assign({
             progress: Math.min(form.loaded / form.total, 1),
             loaded: form.loaded,
             total: form.total
           }, defaultEventData)
         }))
-
         fileInput.dispatchEvent(new window.CustomEvent('progress', {
           detail: Object.assign({
             progress: Math.min(fileInput.loaded / fileInput.total, 1),
@@ -100,15 +88,15 @@
       return request('POST', url, s3Form, fileInput, file, form)
     })
     Promise.all(promises).then(function (results) {
-      results.forEach(function (result) {
-        addHiddenInput(result, name, form)
+      var keys = results.map(function (result) {
+        return parseURL(result)
       })
-      var input = document.createElement('input')
-      input.type = 'hidden'
-      input.name = 's3file'
-      input.value = fileInput.name
+      var hiddenFileInput = document.createElement('input')
+      hiddenFileInput.type = 'hidden'
+      hiddenFileInput.name = name
+      hiddenFileInput.value = JSON.stringify(keys)
+      form.appendChild(hiddenFileInput)
       fileInput.name = ''
-      form.appendChild(input)
       window.uploading -= 1
     }, function (err) {
       console.log(err)
@@ -131,8 +119,15 @@
     window.uploading = 0
     form.loaded = 0
     form.total = 0
-    var inputs = form.querySelectorAll('.s3file')
-    Array.from(inputs).forEach(function (input) {
+    var inputs = Array.from(form.querySelectorAll('.s3file'))
+    var hiddenS3Input = document.createElement('input')
+    hiddenS3Input.type = 'hidden'
+    hiddenS3Input.name = 's3file'
+    form.appendChild(hiddenS3Input)
+    hiddenS3Input.value = JSON.stringify(inputs.map(function (input) {
+      return input.name
+    }))
+    inputs.forEach(function (input) {
       window.uploading += 1
       uploadFiles(form, input, input.name)
     })

tests/conftest.py

@@ -30,6 +30,24 @@ def upload_file(request):
     return file_name
 
 
+@pytest.fixture
+def another_upload_file(request):
+    path = tempfile.mkdtemp()
+    file_name = os.path.join(path, 'another_%s.txt' % request.node.name)
+    with open(file_name, 'w') as f:
+        f.write(request.node.name)
+    return file_name
+
+
+@pytest.fixture
+def yet_another_upload_file(request):
+    path = tempfile.mkdtemp()
+    file_name = os.path.join(path, 'yet_another_%s.txt' % request.node.name)
+    with open(file_name, 'w') as f:
+        f.write(request.node.name)
+    return file_name
+
+
 @pytest.fixture
 def filemodel(request, db):
     from tests.testapp.models import FileModel

tests/test_checks.py

@@ -10,5 +10,5 @@ def test_storage_check():
         call_command('check', '--deploy')
 
     assert (
-        'FileSystemStorage should not be used in a production environment.'
-    ) in str(e.value)
+               'FileSystemStorage should not be used in a production environment.'
+           ) in str(e.value)

tests/test_forms.py

@@ -1,4 +1,5 @@
 import json
+import os
 from contextlib import contextmanager
 
 import pytest
@@ -40,8 +41,8 @@ def test_value_from_datadict(self, client, upload_file):
         with open(upload_file) as f:
             uploaded_file = default_storage.save('test.jpg', f)
         response = client.post(reverse('upload'), {
-            'file': uploaded_file,
-            's3file': 'file'
+            'file': json.dumps([uploaded_file]),
+            's3file': '["file"]',
         })
 
         assert response.status_code == 201
@@ -133,7 +134,7 @@ def test_no_js_error(self, driver, live_server):
 
     def test_file_insert(self, request, driver, live_server, upload_file, freeze):
         driver.get(live_server + self.url)
-        file_input = driver.find_element_by_xpath('//input[@type=\'file\']')
+        file_input = driver.find_element_by_xpath('//input[@name=\'file\']')
         file_input.send_keys(upload_file)
         assert file_input.get_attribute('name') == 'file'
         with wait_for_page_load(driver, timeout=10):
@@ -146,7 +147,7 @@ def test_file_insert(self, request, driver, live_server, upload_file, freeze):
 
     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 = driver.find_element_by_xpath('//input[@name=\'file\']')
         file_input.send_keys(upload_file)
         assert file_input.get_attribute('name') == 'file'
         save_button = driver.find_element_by_xpath('//input[@name=\'save\']')
@@ -155,7 +156,7 @@ def test_file_insert_submit_value(self, driver, live_server, upload_file, freeze
         assert 'save' in driver.page_source
 
         driver.get(live_server + self.url)
-        file_input = driver.find_element_by_xpath('//input[@type=\'file\']')
+        file_input = driver.find_element_by_xpath('//input[@name=\'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\']')
@@ -166,7 +167,7 @@ def test_file_insert_submit_value(self, driver, live_server, upload_file, freeze
 
     def test_progress(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 = driver.find_element_by_xpath('//input[@name=\'file\']')
         file_input.send_keys(upload_file)
         assert file_input.get_attribute('name') == 'file'
         save_button = driver.find_element_by_xpath('//input[@name=\'save\']')
@@ -175,14 +176,33 @@ def test_progress(self, driver, live_server, upload_file, freeze):
         assert 'save' in driver.page_source
 
         driver.get(live_server + self.url)
-        file_input = driver.find_element_by_xpath('//input[@type=\'file\']')
+        file_input = driver.find_element_by_xpath('//input[@name=\'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()
         response = json.loads(driver.find_elements_by_css_selector('pre')[0].text)
-        assert response['progress'] == '1'
+        assert response['POST']['progress'] == '1'
+
+    def test_multi_file(self, driver, live_server, freeze,
+                        upload_file, another_upload_file, yet_another_upload_file):
+        driver.get(live_server + self.url)
+        file_input = driver.find_element_by_xpath('//input[@name=\'file\']')
+        file_input.send_keys(' \n '.join([upload_file, another_upload_file]))
+        file_input = driver.find_element_by_xpath('//input[@name=\'other_file\']')
+        file_input.send_keys(yet_another_upload_file)
+        save_button = driver.find_element_by_xpath('//input[@name=\'save\']')
+        with wait_for_page_load(driver, timeout=10):
+            save_button.click()
+        response = json.loads(driver.find_elements_by_css_selector('pre')[0].text)
+        assert response['FILES'] == {
+            'file': [
+                os.path.basename(upload_file),
+                os.path.basename(another_upload_file),
+            ],
+            'other_file': [os.path.basename(yet_another_upload_file)]
+        }
 
     def test_media(self):
         assert ClearableFileInput().media._js == ['s3file/js/s3file.js']

tests/test_middleware.py

@@ -22,13 +22,16 @@ def test_process_request(self, rf):
         assert request.FILES.get('file').read() == b'uploaded'
 
         default_storage.save('s3_file.txt', ContentFile(b's3file'))
-        request = rf.post('/', data={'file': 's3_file.txt', 's3file': 'file'})
+        request = rf.post('/', data={'file': '["s3_file.txt"]', 's3file': '["file"]'})
         S3FileMiddleware(lambda x: None)(request)
         assert request.FILES.getlist('file')
         assert request.FILES.get('file').read() == b's3file'
 
     def test_process_request__no_file(self, rf, caplog):
-        request = rf.post('/', data={'file': 'does_not_exist.txt', 's3file': 'file'})
+        request = rf.post(
+            '/',
+            data={'file': '["does_not_exist.txt"]', 's3file': '["file"]'}
+        )
         S3FileMiddleware(lambda x: None)(request)
         assert not request.FILES.getlist('file')
         assert 'File not found: does_not_exist.txt' in caplog.text

tests/testapp/forms.py

@@ -12,7 +12,7 @@
 class UploadForm(forms.ModelForm):
     class Meta:
         model = FileModel
-        fields = ('file',)
+        fields = ('file', 'other_file')
         widgets = {
-            'file': forms.ClearableFileInput(attrs={'multiple': True})
+            'file': forms.ClearableFileInput(attrs={'multiple': True}),
         }

tests/testapp/models.py

@@ -3,3 +3,4 @@
 
 class FileModel(models.Model):
     file = models.FileField(upload_to='path/to/files', blank=True)
+    other_file = models.FileField(upload_to='path/to/files', blank=True)

tests/testapp/views.py

@@ -1,12 +1,27 @@
+from django.core.files import File
+from django.core.serializers.json import DjangoJSONEncoder
 from django.http import JsonResponse
 from django.views import generic
 
 from tests.testapp import forms
 
 
+class FileEncoder(DjangoJSONEncoder):
+    def default(self, o):
+        if isinstance(o, File):
+            return o.name
+        super().default(o)
+
+
 class ExampleFormView(generic.FormView):
     form_class = forms.UploadForm
     template_name = 'form.html'
 
     def form_valid(self, form):
-        return JsonResponse(self.request.POST, status=201)
+        return JsonResponse({
+            'POST': self.request.POST,
+            'FILES': {
+                'file': self.request.FILES.getlist('file'),
+                'other_file': self.request.FILES.getlist('other_file'),
+            }
+        }, status=201, encoder=FileEncoder)