[#4472] Persist file uploads through validation errors

Ensure Active Storage direct uploads retain selected files during form
resubmissions when validation errors occur. This improves the user
experience by avoiding the need to re-select files.

- Add a custom file input partial styled with Bootstrap to display
  file names for new and previously uploaded files.
- Include a hidden field with the signed ID of uploaded files for
  re-association after successful submission.
- Create a Stimulus controller (`file-input-label`) to dynamically
  update labels with the selected file name or default text.
- Update forms in `Partners::Profiles` to use the shared file upload
  partial.
- Add a system test to validate the persistence of file uploads
  through validation errors and final submission.

Author: danielabar

app/javascript/application.js

@@ -35,6 +35,11 @@ import 'utils/purchases'
 
 import Rails from "@rails/ujs"
 Rails.start()
+
+// Initialize Active Storage
+import * as ActiveStorage from "@rails/activestorage";
+ActiveStorage.start();
+
 // Disable turbo by default to avoid issues with turbolinks
 Turbo.session.drive = false
 
@@ -107,4 +112,3 @@ $(document).ready(function(){
     });
     picker.setDateRange(startDate, endDate);
 });
-

app/javascript/controllers/file_input_label_controller.js

@@ -0,0 +1,49 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="file-input-label"
+//
+// Reproduces the native browser behavior of updating a file input label
+// to show the selected file's name. This is necessary when using a custom
+// file input, such as with Bootstrap, that does not update automatically.
+//
+// Key Features:
+// 1. Handles initial display of a default label text (e.g., "Choose file..." or
+//    the previously selected file name if present).
+// 2. Updates the label dynamically when a new file is selected.
+//
+// How it works:
+// - When a file is selected, the `fileSelected` method updates the text of the
+//   label to reflect the name of the selected file.
+// - On page load, the `connect` method ensures the label is initialized to the
+//   correct state (default text or file name, if a file was previously selected).
+//
+// This controller is used in coordination with direct uploads in Active Storage.
+// When a validation error occurs, previously selected files persist on the server
+// (via direct upload), and the file name can be displayed to the user.
+export default class extends Controller {
+  static targets = ["input", "label"];
+  static values = {
+    defaultText: { type: String, default: 'Choose file...' }
+  }
+
+  connect() {
+    this.updateLabel();
+  }
+
+  updateLabel() {
+    const input = this.inputTarget;
+    const label = this.labelTarget;
+
+    // Check if the file input has a file selected
+    if (input.files.length > 0) {
+      label.textContent = input.files[0].name;
+    } else {
+      label.textContent = this.defaultTextValue;
+    }
+  }
+
+  // Update the label when a file is selected
+  fileSelected() {
+    this.updateLabel();
+  }
+}

app/views/partners/profiles/edit/_agency_information.html.erb

@@ -10,20 +10,14 @@
             <%= form.input :name, label: "Agency Name", class: "form-control", wrapper: :input_group %>
             <%= profile_form.input :agency_type, collection: Partner::AGENCY_TYPES.values, label: "Agency Type", class: "form-control", wrapper: :input_group %>
             <%= profile_form.input :other_agency_type, label: "Other Agency Type", class: "form-control", wrapper: :input_group %>
-            <div class="form-group row">
-              <label class="control-label col-md-3">501(c)(3) IRS Determination Letter or other Proof of Agency Status</label>
-              <% if profile.proof_of_partner_status.attached? %>
-                <div class="col-md-8">
-                  Attached
-                  file: <%= link_to profile.proof_of_partner_status.blob['filename'], rails_blob_path(profile.proof_of_partner_status), class: "font-weight-bold" %>
-                  <%= profile_form.file_field :proof_of_partner_status, class: "form-control-file form-control" %>
-                </div>
-              <% else %>
-                <div class="col-md-8">
-                  <%= profile_form.file_field :proof_of_partner_status, class: "form-control-file" %>
-                </div>
-              <% end %>
-            </div>
+
+            <%= render "shared/custom_file_input",
+              form_builder: profile_form,
+              attachment: profile.proof_of_partner_status,
+              attachment_name: :proof_of_partner_status,
+              label_for: "partner_profile_proof_of_partner_status",
+              label_text: "501(c)(3) IRS Determination Letter or other Proof of Agency Status" %>
+
             <%= profile_form.input :agency_mission, label: "Agency Mission", class: "form-control", wrapper: :input_group %>
             <%= profile_form.input :address1, label: "Address (line 1)", class: "form-control", wrapper: :input_group %>
             <%= profile_form.input :address2, label: "Address (line 2)", class: "form-control", wrapper: :input_group %>

app/views/partners/profiles/edit/_agency_stability.html.erb

@@ -10,18 +10,14 @@
             <%= form.input :founded, label: "Year Founded", class: "form-control", wrapper: :input_group %>
             <%= form.input :form_990, label: "Form 990 Filed", as: :radio_buttons, class: "form-control",
                            wrapper: :input_group, wrapper_html: {class: "form-yesno"}, input_html: {class: "radio-yesno"} %>
-            <label class="control-label col-md-3">Form 990</label>
-            <% if profile.proof_of_form_990.attached? %>
-              <div class="col-md-8">
-                Attached
-                file: <%= link_to profile.proof_of_form_990.blob['filename'], rails_blob_path(profile.proof_of_form_990), class: "font-weight-bold" %>
-                <%= form.file_field :proof_of_form_990, class: "form-control-file form-control" %>
-              </div>
-            <% else %>
-              <div class="col-md-8">
-                <%= form.file_field :proof_of_form_990, class: "form-control-file" %>
-              </div>
-            <% end %>
+
+            <%= render "shared/custom_file_input",
+              form_builder: form,
+              attachment: profile.proof_of_form_990,
+              attachment_name: :proof_of_form_990,
+              label_for: "partner_profile_proof_of_form_990",
+              label_text: "Form 990" %>
+
             <%= form.input :program_name, label: "Program Name(s)", class: "form-control", wrapper: :input_group %>
             <%= form.input :program_description, label: "Program Description(s)", class: "form-control", wrapper: :input_group %>
             <%= form.input :program_age, label: "Agency Age", class: "form-control", wrapper: :input_group %>

app/views/partners/profiles/step/_agency_information_form.html.erb

@@ -11,19 +11,12 @@
     <%= pf.input :other_agency_type, label: "Other Agency Type", class: "form-control" %>
   </div>
 
-  <div class="form-group row">
-    <label class="control-label col-md-3">501(c)(3) IRS Determination Letter or other Proof of Agency Status</label>
-    <% if profile.proof_of_partner_status.attached? %>
-      <div class="col-md-8">
-        Attached file: <%= link_to profile.proof_of_partner_status.blob['filename'], rails_blob_path(profile.proof_of_partner_status), class: "font-weight-bold" %>
-        <%= pf.file_field :proof_of_partner_status, class: "form-control-file" %>
-      </div>
-    <% else %>
-      <div class="col-md-8">
-        <%= pf.file_field :proof_of_partner_status, class: "form-control-file" %>
-      </div>
-    <% end %>
-  </div>
+  <%= render "shared/custom_file_input",
+           form_builder: pf,
+           attachment: profile.proof_of_partner_status,
+           attachment_name: :proof_of_partner_status,
+           label_for: "partner_profile_proof_of_partner_status",
+           label_text: "501(c)(3) IRS Determination Letter or other Proof of Agency Status" %>
 
   <div class="form-group">
     <%= pf.input :agency_mission, as: :text, label: "Agency Mission", class: "form-control" %>

app/views/partners/profiles/step/_agency_stability_form.html.erb

@@ -7,16 +7,12 @@
     <%= pf.input :form_990, label: "Form 990 Filed", as: :radio_buttons, class: "form-control" %>
   </div>
 
-  <% if profile.proof_of_form_990.attached? %>
-    <div class="form-group">
-      <label>Attached file: </label>
-      <%= link_to profile.proof_of_form_990.blob['filename'], rails_blob_path(profile.proof_of_form_990), class: "font-weight-bold" %>
-    </div>
-  <% end %>
-
-  <div class="form-group">
-    <%= pf.file_field :proof_of_form_990, class: "form-control-file" %>
-  </div>
+  <%= render "shared/custom_file_input",
+           form_builder: pf,
+           attachment: profile.proof_of_form_990,
+           attachment_name: :proof_of_form_990,
+           label_for: "partner_profile_proof_of_form_990",
+           label_text: "Form 990 Filed" %>
 
   <div class="form-group">
     <%= pf.input :program_name, label: "Program Name(s)", class: "form-control" %>

app/views/shared/_custom_file_input.html.erb

@@ -0,0 +1,41 @@
+<%# locals: (form_builder:, label_for:, label_text:, attachment:, attachment_name:) %>
+
+<%# Creates a custom file input field with the following features: %>
+<%# - Displays the name of a previously selected file (even after validation errors). %>
+<%# - Integrates with Active Storage direct uploads to persist the file on the server, %>
+<%#   even if form submission fails. %>
+<%# - Uses a Stimulus controller (`file_input_label`) to dynamically update the label %>
+<%#   text when a new file is selected. %>
+<%# - Styled with Bootstrap's custom file input classes. %>
+<%# %>
+<%# Arguments: %>
+<%# - form_builder: The form builder object. %>
+<%# - label_for: The ID of the file input (used for the label `for` attribute). %>
+<%# - label_text: The text to display for the file input's label. %>
+<%# - attachment: The Active Storage attachment object (used to check for existing files). %>
+<%# - attachment_name: The name of the attachment field (e.g., `:proof_of_form_990`). %>
+
+<div class="form-group">
+  <label class="control-label"><%= label_text %></label>
+
+  <% if attachment.persisted? %>
+    Attached file: <%= link_to attachment.blob.filename, rails_blob_path(attachment), class: "font-weight-bold" %>
+  <% elsif attachment.attached? %>
+    <%= form_builder.hidden_field attachment_name, value: attachment.signed_id %>
+  <% end %>
+
+  <div class="col-md-12"
+       data-controller="file-input-label"
+       data-file-input-label-default-text-value="<%= attachment.attached? ? attachment.blob.filename : 'Choose file...' %>">
+    <%= form_builder.file_field attachment_name,
+                        direct_upload: true,
+                        class: "custom-file-input",
+                        data: {
+                          action: "change->file-input-label#fileSelected",
+                          file_input_label_target: "input"
+                        } %>
+    <label class="custom-file-label"
+      for="<%= label_for %>"
+      data-file-input-label-target="label">Choose file...</label>
+  </div>
+</div>

config/importmap.rb

@@ -33,3 +33,4 @@
 pin "filterrific", to: "filterrific.js"
 pin "bootstrap-select", to: "https://ga.jspm.io/npm:[email protected]/dist/js/bootstrap-select.js"
 pin "jquery-ui", to: "https://ga.jspm.io/npm:[email protected]/ui/widget.js"
+pin "@rails/activestorage", to: "@rails--activestorage.js" # @8.0.100

spec/fixtures/files/irs_determination_letter.md

@@ -0,0 +1,13 @@
+# 501(c)(3) IRS Determination Letter
+
+This document serves as proof of Helping Hands Foundation's status as a 501(c)(3) organization under the Internal Revenue Code.
+
+## Details:
+- **Agency Name**: Helping Hands Foundation
+- **EIN**: 45-6789123
+- **Determination Date**: February 15, 2010
+
+For further verification, please contact the IRS at 1-877-123-4567.
+
+---
+This document is for testing purposes only.

spec/system/partners/profile_edit_system_spec.rb

@@ -98,5 +98,53 @@
       expect(page).to have_css("#pick_up_person.accordion-collapse.collapse.show", visible: true)
       expect(page).to have_css("#partner_settings.accordion-collapse.collapse.show", visible: true)
     end
+
+    it "persists file upload when there are validation errors" do
+      # Open up Agency Information section and upload proof-of-status letter
+      find("button[data-bs-target='#agency_information']").click
+      within "#agency_information" do
+        expect(find("label[for='partner_profile_proof_of_partner_status']")).to have_content("Choose file...")
+        attach_file("partner_profile_proof_of_partner_status", Rails.root.join("spec/fixtures/files/irs_determination_letter.md"), make_visible: true)
+        expect(find("label[for='partner_profile_proof_of_partner_status']")).to have_content("irs_determination_letter.md")
+      end
+
+      # Open Pick up person section and fill in 4 email addresses which will generate a validation error
+      find("button[data-bs-target='#pick_up_person']").click
+      within "#pick_up_person" do
+        fill_in "Pick Up Person's Email", with: "[email protected], [email protected], [email protected], [email protected]"
+      end
+
+      # Save Progress
+      all("input[type='submit'][value='Save Progress']").last.click
+
+      # Expect an alert-danger message containing validation errors
+      expect(page).to have_css(".alert-danger", text: /There is a problem/)
+
+      # Open up Agency Information section and expect the file field to remember users selection
+      # but NOT be persisted because there hasn't yet been a successful form submission.
+      find("button[data-bs-target='#agency_information']").click
+      within "#agency_information" do
+        expect(find("label[for='partner_profile_proof_of_partner_status']")).to have_content("irs_determination_letter.md")
+        expect(page).not_to have_content("Attached file:")
+        expect(page).not_to have_link("irs_determination_letter.md")
+      end
+
+      # Fix validation error in Pick up person section: It's already open due to having a validation error
+      within "#pick_up_person" do
+        fill_in "Pick Up Person's Email", with: "[email protected], [email protected], [email protected]"
+      end
+
+      # Save Progress
+      all("input[type='submit'][value='Save Progress']").last.click
+      expect(page).to have_css(".alert-success", text: "Details were successfully updated.")
+
+      # Open up Agency Information section and expect file is persisted
+      find("button[data-bs-target='#agency_information']").click
+      within "#agency_information" do
+        expect(page).to have_content("Attached file:")
+        expect(page).to have_link("irs_determination_letter.md", href: /\/rails\/active_storage\/blobs\/redirect\/.+\/irs_determination_letter\.md/)
+        expect(find("label[for='partner_profile_proof_of_partner_status']")).to have_content("irs_determination_letter.md")
+      end
+    end
   end
 end