🎁 Adds custom js validations to add/remove required attr

app/assets/javascripts/bulkrax/bulkrax.js

@@ -5,19 +5,55 @@ $(document).on('turbolinks:load ready', function() {
   $('button#err_toggle').click(function() {
     $('#error_trace').toggle();
   });
+
   $('button#fm_toggle').click(function() {
     $('#field_mapping').toggle();
   });
+
   $('#bulkraxItemModal').on('show.bs.modal', function (event) {
-    var button = $(event.relatedTarget) // Button that triggered the modal
-    var recipient = button.data('entry-id') // Extract info from data-* attributes
-    // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
-    // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
-    var modal = $(this)
+    var button = $(event.relatedTarget); // Button that triggered the modal
+    var recipient = button.data('entry-id'); // Extract info from data-* attributes
+
+    var modal = $(this);
     modal.find('a').each(function() {
-      this.href = this.href.replace(/\d+\?/, recipient + '?')
-    })
-    return true
-  })
-  $('#fileupload-bulkrax').hyraxUploader({maxNumberOfFiles: 1});
+      this.href = this.href.replace(/\d+\?/, recipient + '?');
+    });
+    return true;
+  });
+
+  // Initialize the uploader
+  $('.fileupload-bulkrax').hyraxUploader({ maxNumberOfFiles: 1 });
+
+  // Function to toggle 'required' attribute based on uploaded files
+  function toggleRequiredAttribute() {
+    const fileInput = $('#addfiles');
+    const uploadedFilesTable = $('.fileupload-bulkrax tbody.files');
+
+    if (uploadedFilesTable.find('tr.template-download').length > 0) {
+      // Remove 'required' if there are uploaded files
+      fileInput.removeAttr('required');
+    } else {
+      // Add 'required' if no uploaded files
+      fileInput.attr('required', 'required');
+    }
+  }
+
+  // Check the required attribute when a file is added or removed
+  $('#addfiles').on('change', function() {
+    toggleRequiredAttribute();
+  });
+
+  // Also check when an upload completes or is canceled
+  $('.fileupload-bulkrax').on('fileuploadcompleted fileuploaddestroyed', function() {
+    toggleRequiredAttribute();
+  });
+
+  // Ensure 'required' is only added if there are no files on form reset
+  $('#file-upload-cancel-btn').on('click', function() {
+    $('#addfiles').attr('required', 'required');
+    $('#addfiles').val(''); // Clear file input to ensure 'required' behavior resets
+  });
+
+  // Initial check in case files are already uploaded
+  toggleRequiredAttribute();
 });

app/views/bulkrax/importers/_bagit_fields.html.erb

@@ -60,29 +60,4 @@
       <%= render 'browse_everything', form: form %>
     <% end %>
   </div>
-</div>
-
-<!-- Uploader initialization script -->
-<script type="text/javascript">
-  $(function() {
-    if ($('#fileupload-bulkrax').length) {
-      // console.log('Initializing uploader on #fileupload-bulkrax');
-      $('#fileupload-bulkrax').hyraxUploader({
-        maxNumberOfFiles: 1,
-        add: function (e, data) {
-          console.log('Add event triggered with data:', data);
-          var that = this;
-          $.post('/uploads/', { files: [data.files[0].name] }, function (result) {
-            console.log('File post successful:', result);
-            data.formData = { id: result.files[0].id };
-            $.blueimp.fileupload.prototype.options.add.call(that, e, data);
-          }).fail(function() {
-            console.log('Error posting file');
-          });
-        }
-      }).on('fileuploadadded', function (e, data) {
-        // console.log('File upload added event triggered with data:', data);
-      });
-    }
-  });
-</script>
+</div>

app/views/bulkrax/importers/_file_uploader.html.erb

@@ -1,11 +1,11 @@
-<div id="fileupload-bulkrax">
+<div class="fileupload-bulkrax">
   <noscript><input type="hidden" name="redirect" value="<%= main_app.root_path %>" /></noscript>
   <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
   <div class="fileupload-buttonbar">
     <div class="row">
       <div class="col-12">
         <div class="fileinput-button" id="add-files">
-          <input id="addfiles" type="file" style="display:none;" name="files[]" 
+          <input id="addfiles" type="file" style="display:none;" name="files[]"
                  accept="<%= accepted_file_types || 'text/csv,application/zip,application/gzip' %>" multiple />
           <button type="button" class="btn btn-success" onclick="document.getElementById('addfiles').click();">
             <span class="fa fa-plus"></span>

app/views/bulkrax/importers/_xml_fields.html.erb

@@ -65,30 +65,4 @@
     <% if defined?(::Hyrax) && Hyrax.config.browse_everything? %>
     <% end %>
   </div>
-</div>
-
-<!-- Uploader initialization script -->
-<script type="text/javascript">
-  $(function() {
-    // console.log('Running uploader initialization in XML partial');
-    if ($('#fileupload-bulkrax').length) {
-      // console.log('Initializing uploader on #fileupload-bulkrax in XML view');
-      $('#fileupload-bulkrax').hyraxUploader({
-        maxNumberOfFiles: 1,
-        add: function (e, data) {
-          console.log('Add event triggered with data:', data);
-          var that = this;
-          $.post('/uploads/', { files: [data.files[0].name] }, function (result) {
-            console.log('File post successful:', result);
-            data.formData = { id: result.files[0].id };
-            $.blueimp.fileupload.prototype.options.add.call(that, e, data);
-          }).fail(function() {
-            console.log('Error posting file');
-          });
-        }
-      }).on('fileuploadadded', function (e, data) {
-        // console.log('File upload added event triggered with data:', data);
-      });
-    }
-  });
-</script>
+</div>