From 005490b5a0e3c6b50ac8ab9ab790fa5186fcfd4b Mon Sep 17 00:00:00 2001
From: Betsy Castro <5490820+betsyecastro@users.noreply.github.com>
Date: Fri, 15 May 2026 14:50:51 -0500
Subject: [PATCH 1/3] Add filename length validation rule for image uploads

---
 .../Requests/Concerns/HasImageUploads.php     | 11 ++++++--
 app/Rules/FilenameLengthRule.php              | 25 +++++++++++++++++++
 2 files changed, 34 insertions(+), 2 deletions(-)
 create mode 100644 app/Rules/FilenameLengthRule.php

diff --git a/app/Http/Requests/Concerns/HasImageUploads.php b/app/Http/Requests/Concerns/HasImageUploads.php
index 305dc321..082a2c9b 100644
--- a/app/Http/Requests/Concerns/HasImageUploads.php
+++ b/app/Http/Requests/Concerns/HasImageUploads.php
@@ -2,14 +2,21 @@
 
 namespace App\Http\Requests\Concerns;
 
+use App\Rules\FilenameLengthRule;
+
 trait HasImageUploads
 {
-    public function uploadedImageRules(): string
+    public function uploadedImageRules(): array
     {
         $max_filesize = $this->maxFilesize() * 1000;
         $allowed_mimes = implode(',', $this->supportedMimes());
 
-        return "mimes:$allowed_mimes|min:1|max:$max_filesize";
+        return [
+            "mimes:{$allowed_mimes}",
+            "min:1",
+            "max:{$max_filesize}",
+            new FilenameLengthRule(maxLength: 200),
+        ];
     }
 
     public function uploadedImageMessages(string $rule): string
diff --git a/app/Rules/FilenameLengthRule.php b/app/Rules/FilenameLengthRule.php
new file mode 100644
index 00000000..574f309f
--- /dev/null
+++ b/app/Rules/FilenameLengthRule.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Rules;
+
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+use Illuminate\Http\UploadedFile;
+
+class FilenameLengthRule implements ValidationRule
+{
+    public function __construct(private int $maxLength = 100) {}
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if (! $value instanceof UploadedFile) {
+            return;
+        }
+
+        $name = $value->getClientOriginalName();
+
+        if (strlen($name) > $this->maxLength) {
+            $fail("The :attribute filename must not exceed {$this->maxLength} characters.");
+        }
+    }
+}
\ No newline at end of file

From 59082978f2d1e10067fbeb5e1eb31732321c0e76 Mon Sep 17 00:00:00 2001
From: Betsy Castro <5490820+betsyecastro@users.noreply.github.com>
Date: Fri, 15 May 2026 14:51:41 -0500
Subject: [PATCH 2/3] Add image requirements tooltip for profile and banner
 images

---
 resources/views/profiles/edit/information.blade.php | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/resources/views/profiles/edit/information.blade.php b/resources/views/profiles/edit/information.blade.php
index ba3c214a..6e75afdb 100644
--- a/resources/views/profiles/edit/information.blade.php
+++ b/resources/views/profiles/edit/information.blade.php
@@ -6,6 +6,12 @@
 			<label for="file">Icon</label>
 			<img id="file-img" class="profile_photo" src="{{ $profile->imageUrl }}" />
 			<br />
+			<small class="form-text text-muted"> Image requirements <a role="button" tabindex="0" aria-label="image requirements information" data-toggle="popover" data-trigger="focus" data-popover-content="#img-rules"><i class="fas fa-question-circle"></i></a></small>
+			<div id="img-rules" style="display:none">
+				<p class="m-1"><small>Supported file types: JPEG, PNG, GIF, BMP, SVG, and WebP.</small></p>
+				<p class="m-1"><small>Maximum file size: 10 MB.</small></p>
+				<p class="m-1"><small>Maximum file name lentgh: 200 characters.</small></p>
+			</div>
 			<br />
 			<div class="control-group">
 				<div class="controls">
@@ -24,6 +30,7 @@
 			<label for="banner">Banner</label>
 			<img id="banner-img" class="profile_photo" src="{{ $profile->banner_url }}" />
 			<br />
+				<small class="form-text text-muted"> Image requirements <a role="button" tabindex="0" aria-label="image requirements information" data-toggle="popover" data-trigger="focus" data-popover-content="#img-rules"><i class="fas fa-question-circle"></i></a></small>
 			<br />
 			<div class="control-group">
 				<div class="controls">

From ada23650940c1f63c5144bc4127b52db2e4980eb Mon Sep 17 00:00:00 2001
From: Betsy Castro <5490820+betsyecastro@users.noreply.github.com>
Date: Fri, 15 May 2026 15:41:16 -0500
Subject: [PATCH 3/3] Add image uploads requirements to the News section

---
 resources/views/profiles/edit/news.blade.php | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/resources/views/profiles/edit/news.blade.php b/resources/views/profiles/edit/news.blade.php
index 89595643..5de24f1d 100644
--- a/resources/views/profiles/edit/news.blade.php
+++ b/resources/views/profiles/edit/news.blade.php
@@ -37,7 +37,7 @@
                 <label for="data[{{ $news->id }}][image]-img">Image</label>
                 <img class="uploaded-image w-100 d-flex" id="data[{{ $news->id }}][image]-img"
                     src="@if ($news->imageUrl != asset('/img/default.png')) {{ $news->imageUrl }} @endif">
-                <div class="custom-file form-control">
+                <div class="custom-file form-control" style="margin-bottom: 0px!important;">
                     <input type="file" id="data[{{ $news->id }}][image]" name="data[{{ $news->id }}][image]"
                         accept="image/*" class="custom-file-input clickable">
                     <label id="label-{{ $news->id }}" for="data[{{ $news->id }}][image]"
@@ -45,6 +45,12 @@ class="custom-file-label">
                         {{ $news->image->file_name ?? 'Select an image' }}
                     </label>
                 </div>
+                <small class="form-text text-muted"> Image requirements <a role="button" tabindex="0" aria-label="image requirements information" data-toggle="popover" data-trigger="focus" data-popover-content="#img-rules"><i class="fas fa-question-circle"></i></a></small>
+                <div id="img-rules" style="display:none">
+                    <p class="m-1"><small>Supported file types: JPEG, PNG, GIF, BMP, SVG, and WebP.</small></p>
+                    <p class="m-1"><small>Maximum file size: 10 MB.</small></p>
+                    <p class="m-1"><small>Maximum file name lentgh: 200 characters.</small></p>
+	    		</div>
                 @foreach ($errors->get("data.{$news->id}.image") as $image_error)
                     @include('alert', ['message' => $image_error, 'type' => 'danger'])
                     <p class="d-block invalid-feedback"><i class="fas fa-asterisk"></i> {!! $image_error !!}</p>