Show error message if too many files are selected for upload (#2376)

Django's (default) file upload mechanism is limited in the number of
files it can handle (independent of limitations on file size.)

Consequently, Django enforces a hard limit on the number of files and
raises an exception if this is exceeded. (Pull #2036 made this limit
configurable.)

Note that HTML doesn't allow specifying any limit for multiple-file
upload fields.

Try to prevent people hitting the limit by accident, by disabling the
submit button through JavaScript if too many files are selected.

For thoughts about better long-term solutions, see issue #2242.

Author: bemoody

physionet-django/project/templates/project/edit_files_panel.html

@@ -252,6 +252,8 @@
     // Check the size of the files to be uploaded and stop the form if the file
     // size exceeds the maximum allowed.
 
+    let max_files = {{ max_files_per_upload|default:0 }};
+
     // The size is calculated in bytes
     files = $('#id_file_field').get(0).files;
     let size = 0;
@@ -268,10 +270,19 @@
       $('#data_size').text(readableBytes(size))
       // Show the message
       $('#error_data_size').show();
+      $('#error_too_many_files').hide();
+    }
+    else if (files.length > max_files && max_files > 0) {
+      // Disable the submit button on the form
+      $('#upload-files-button-submit').attr("disabled", true);
+      // Show the message
+      $('#error_data_size').hide();
+      $('#error_too_many_files').show();
     }
     else{
       // Hide the message
       $('#error_data_size').hide();
+      $('#error_too_many_files').hide();
       // Enable the submit button on the form
       $('#upload-files-button-submit').attr("disabled", false);
     }

physionet-django/project/templates/project/project_files_form.html

@@ -35,7 +35,13 @@ <h5 class="modal-title">Upload Files</h5>
           </button>
         </div>
           <div class="modal-body">
-            <p>Individual file size limit: {{ individual_size_limit }}.</p>
+            <p>
+              {% if storage_type != "GCP" %}
+                You can select up to {{ max_files_per_upload }} files
+                to upload at once.
+              {% endif %}
+              Each file must be smaller than {{ individual_size_limit }}.
+            </p>
               {% if storage_type == "GCP" %}
                 <div id="myDropzone"></div>
               {% else %}
@@ -48,6 +54,9 @@ <h5 class="modal-title">Upload Files</h5>
               <p>The total size of the selected files is <span id="data_size"></span>.<br>
               Your remaining storage allowance is {{ storage_info.readable_remaining }}.</p>
             </div>
+            <div id="error_too_many_files" style="display:none" class="alert alert-danger">
+              Only {{ max_files_per_upload }} files can be uploaded at once.
+            </div>
           </div>
           <div class="modal-footer">
             {% if storage_type == "GCP" %}

physionet-django/project/views.py

@@ -1029,6 +1029,7 @@ def project_files_panel(request, project_slug, **kwargs):
             'is_submitting': is_submitting,
             'is_editor': is_editor,
             'files_editable': files_editable,
+            'max_files_per_upload': settings.DATA_UPLOAD_MAX_NUMBER_FILES,
             'individual_size_limit': utility.readable_size(ActiveProject.INDIVIDUAL_FILE_SIZE_LIMIT),
         },
     )
@@ -1149,6 +1150,7 @@ def project_files(request, project_slug, subdir='', **kwargs):
         'project/project_files.html',
         {
             'project': project,
+            'max_files_per_upload': settings.DATA_UPLOAD_MAX_NUMBER_FILES,
             'individual_size_limit': utility.readable_size(ActiveProject.INDIVIDUAL_FILE_SIZE_LIMIT),
             'subdir': subdir,
             'parent_dir': parent_dir,