From f21da3f075f68eacabe90b4ca80c0755fee10bf0 Mon Sep 17 00:00:00 2001
From: Ken Johnson <cktricky@gmail.com>
Date: Thu, 11 Dec 2025 12:24:52 +0000
Subject: [PATCH] Improve file upload UX with validation and uploaded files
 display
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Enhanced the benefit forms file upload functionality to provide better
user feedback and visibility of uploaded files.

Changes:
1. Added file type validation in controller:
   - Only accepts PDF, DOC, DOCX, JPG, PNG formats
   - Shows clear error message with the rejected file extension

2. Added file size validation:
   - Maximum 10MB file size limit
   - Shows file size in error message if exceeded

3. Improved success/error messages:
   - Shows specific filename on successful upload
   - Shows detailed error messages for validation failures

4. Added uploaded files display section:
   - Lists all uploaded files with icons based on file type
   - Shows file size and upload timestamp
   - Provides download button for each file
   - Only displays when files exist

Before: Users received generic "Something went wrong" message with no
indication of why uploads failed. No way to see uploaded files.

After: Clear validation feedback tells users exactly what went wrong
(wrong format, too large, etc.) and uploaded files are visible with
download links.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/controllers/benefit_forms_controller.rb | 45 ++++++++++++++++--
 app/views/benefit_forms/index.html.erb      | 52 +++++++++++++++++++++
 2 files changed, 92 insertions(+), 5 deletions(-)

diff --git a/app/controllers/benefit_forms_controller.rb b/app/controllers/benefit_forms_controller.rb
index 97721c9..2017ddc 100644
--- a/app/controllers/benefit_forms_controller.rb
+++ b/app/controllers/benefit_forms_controller.rb
@@ -3,6 +3,15 @@ class BenefitFormsController < ApplicationController
 
   def index
     @benefits = Benefits.new
+    # List uploaded files
+    data_path = Rails.root.join("public", "data")
+    @uploaded_files = Dir.glob("#{data_path}/*").reject { |f| File.directory?(f) || File.basename(f) == '.gitkeep' }.map do |file|
+      {
+        name: File.basename(file),
+        size: File.size(file),
+        modified: File.mtime(file)
+      }
+    end.sort_by { |f| f[:modified] }.reverse
   end
 
   def download
@@ -17,12 +26,38 @@ class BenefitFormsController < ApplicationController
 
   def upload
     file = params[:benefits][:upload]
-    if file
-      flash[:success] = "File Successfully Uploaded!"
-      Benefits.save(file, params[:benefits][:backup])
-    else
-      flash[:error] = "Something went wrong"
+
+    if file.nil?
+      flash[:error] = "Please select a file to upload"
+      redirect_to user_benefit_forms_path(user_id: current_user.id)
+      return
     end
+
+    # Validate file type
+    allowed_extensions = %w[.pdf .doc .docx .jpg .jpeg .png]
+    file_extension = File.extname(file.original_filename).downcase
+
+    unless allowed_extensions.include?(file_extension)
+      flash[:error] = "Invalid file type. Accepted formats: PDF, DOC, DOCX, JPG, PNG. You uploaded: #{file_extension}"
+      redirect_to user_benefit_forms_path(user_id: current_user.id)
+      return
+    end
+
+    # Validate file size (10MB max)
+    max_size = 10.megabytes
+    if file.size > max_size
+      flash[:error] = "File too large. Maximum size: 10MB. Your file: #{(file.size / 1.megabyte.to_f).round(2)}MB"
+      redirect_to user_benefit_forms_path(user_id: current_user.id)
+      return
+    end
+
+    begin
+      Benefits.save(file, params[:benefits][:backup])
+      flash[:success] = "File '#{file.original_filename}' uploaded successfully!"
+    rescue => e
+      flash[:error] = "Failed to upload file: #{e.message}"
+    end
+
     redirect_to user_benefit_forms_path(user_id: current_user.id)
   end
 
diff --git a/app/views/benefit_forms/index.html.erb b/app/views/benefit_forms/index.html.erb
index 14920ad..5ae8a50 100644
--- a/app/views/benefit_forms/index.html.erb
+++ b/app/views/benefit_forms/index.html.erb
@@ -118,6 +118,58 @@
     </div>
   </div>
 
+  <!-- Uploaded Files Section -->
+  <% if @uploaded_files.any? %>
+  <div class="row mt-4">
+    <div class="col-12">
+      <div class="card shadow-sm">
+        <div class="card-header bg-white py-3">
+          <h4 class="mb-0">
+            <i class="bi bi-folder2-open text-success"></i> Uploaded Files
+          </h4>
+        </div>
+        <div class="card-body p-0">
+          <div class="table-responsive">
+            <table class="table table-hover mb-0">
+              <thead class="table-light">
+                <tr>
+                  <th><i class="bi bi-file-earmark"></i> File Name</th>
+                  <th><i class="bi bi-hdd"></i> Size</th>
+                  <th><i class="bi bi-clock"></i> Uploaded</th>
+                  <th>Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                <% @uploaded_files.each do |file| %>
+                  <tr>
+                    <td>
+                      <% icon_class = case File.extname(file[:name]).downcase
+                        when '.pdf' then 'bi-file-earmark-pdf text-danger'
+                        when '.doc', '.docx' then 'bi-file-earmark-word text-primary'
+                        when '.jpg', '.jpeg', '.png' then 'bi-file-earmark-image text-success'
+                        else 'bi-file-earmark'
+                        end %>
+                      <i class="bi <%= icon_class %> me-2"></i>
+                      <strong><%= file[:name] %></strong>
+                    </td>
+                    <td><%= number_to_human_size(file[:size]) %></td>
+                    <td><%= file[:modified].strftime("%b %d, %Y at %I:%M %p") %></td>
+                    <td>
+                      <%= link_to download_path(type: "File", name: "public/data/#{file[:name]}"), class: "btn btn-sm btn-outline-primary" do %>
+                        <i class="bi bi-download"></i> Download
+                      <% end %>
+                    </td>
+                  </tr>
+                <% end %>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <% end %>
+
   <!-- Info Box -->
   <div class="row mt-4">
     <div class="col-12">