From 4ffd39494eda2aa4d3695b1d34e72fb7bcf3bec1 Mon Sep 17 00:00:00 2001
From: Arifia Kasastra R <arka.progammer@gmail.com>
Date: Sun, 17 Aug 2025 00:25:52 +0700
Subject: [PATCH 1/7] feat: Add modern file input field with drag-and-drop and
 clipboard support

---
 src/FormField.php | 242 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 242 insertions(+)

diff --git a/src/FormField.php b/src/FormField.php
index 8b22235..f5734b9 100644
--- a/src/FormField.php
+++ b/src/FormField.php
@@ -397,6 +397,248 @@ public function file($name, $options = [])
         return $this->text($name, $options);
     }
 
+    /**
+     * Modern file input field with drag-and-drop and clipboard paste functionality.
+     *
+     * @param  string  $name  The file field name and id attribute.
+     * @param  array  $options  Additional attribute for the file input.
+     * @return string Generated modern file input form field.
+     */
+    public function fileModern($name, $options = [])
+    {
+        $requiredClass = (isset($options['required']) && $options['required'] == true) ? 'required ' : '';
+        $hasError = $this->errorBag->has($this->formatArrayName($name));
+        $hasErrorClass = $hasError ? 'has-error' : '';
+        $htmlForm = '<div class="form-group mb-3 '.$requiredClass.$hasErrorClass.'">';
+
+        $htmlForm .= $this->setFormFieldLabel($name, $options);
+
+        $fieldId = isset($options['id']) ? $options['id'] : $name;
+        $accept = isset($options['accept']) ? $options['accept'] : '*/*';
+        $multiple = isset($options['multiple']) && $options['multiple'] ? 'multiple' : '';
+        $maxSize = isset($options['max_size']) ? $options['max_size'] : '10MB';
+        $allowedTypes = isset($options['allowed_types']) ? implode(', ', $options['allowed_types']) : 'All files';
+        
+        // Sanitize field ID for use in HTML IDs (remove square brackets and other invalid characters)
+        $sanitizedFieldId = preg_replace('/[^a-zA-Z0-9_-]/', '', $fieldId);
+        
+        $dropzoneId = 'dropzone-' . $sanitizedFieldId;
+        $fileInputId = 'file-input-' . $sanitizedFieldId;
+        $previewId = 'preview-' . $sanitizedFieldId;
+
+        // Container with dropzone styling
+        $htmlForm .= '<div id="'.$dropzoneId.'" class="file-dropzone border border-2 border-dashed rounded p-4 text-center position-relative" style="min-height: 150px; cursor: pointer; transition: all 0.3s ease;">';
+        
+        // Hidden file input
+        $htmlForm .= '<input type="file" id="'.$fileInputId.'" name="'.$name.'" class="d-none" accept="'.$accept.'" '.$multiple;
+        if (isset($options['required']) && $options['required'] == true) {
+            $htmlForm .= ' required';
+        }
+        $htmlForm .= '>';
+
+        // Dropzone content
+        $htmlForm .= '<div class="dropzone-content">';
+        $htmlForm .= '<div class="mb-3">';
+        $htmlForm .= '<svg width="48" height="48" fill="currentColor" class="text-muted" viewBox="0 0 16 16">';
+        $htmlForm .= '<path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>';
+        $htmlForm .= '<path d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708l3-3z"/>';
+        $htmlForm .= '</svg>';
+        $htmlForm .= '</div>';
+        $htmlForm .= '<h5 class="mb-2">Drop files here or click to browse</h5>';
+        $htmlForm .= '<p class="text-muted mb-2">Or paste images from clipboard (Ctrl+V)</p>';
+        $htmlForm .= '<small class="text-muted">Accepted: '.$allowedTypes.' | Max size: '.$maxSize.'</small>';
+        $htmlForm .= '</div>';
+
+        // Preview area
+        $htmlForm .= '<div id="'.$previewId.'" class="file-preview mt-3" style="display: none;"></div>';
+
+        $htmlForm .= '</div>';
+
+        // Add the JavaScript for drag-and-drop and clipboard functionality
+        $htmlForm .= $this->getFileModernScript($dropzoneId, $fileInputId, $previewId, $accept, $multiple);
+
+        $htmlForm .= $this->getInfoTextLine($options);
+
+        $htmlForm .= $this->errorBag->first($this->formatArrayName($name), '<span class="invalid-feedback" role="alert">:message</span>');
+
+        $htmlForm .= '</div>';
+
+        return $htmlForm;
+    }
+
+    /**
+     * Generate JavaScript for modern file input functionality.
+     *
+     * @param  string  $dropzoneId  The dropzone element ID.
+     * @param  string  $fileInputId  The file input element ID.
+     * @param  string  $previewId  The preview element ID.
+     * @param  string  $accept  File accept types.
+     * @param  string  $multiple  Multiple files flag.
+     * @return string JavaScript code.
+     */
+    private function getFileModernScript($dropzoneId, $fileInputId, $previewId, $accept, $multiple)
+    {
+        $script = '<script>';
+        $script .= '(function() {';
+        $script .= 'const dropzone = document.getElementById("'.$dropzoneId.'");';
+        $script .= 'const fileInput = document.getElementById("'.$fileInputId.'");';
+        $script .= 'const preview = document.getElementById("'.$previewId.'");';
+        $script .= 'let selectedFiles = [];';
+        
+        // Click handler
+        $script .= 'dropzone.addEventListener("click", function(e) {';
+        $script .= 'if (e.target === dropzone || e.target.closest(".dropzone-content")) {';
+        $script .= 'fileInput.click();';
+        $script .= '}';
+        $script .= '});';
+
+        // Drag and drop handlers
+        $script .= 'dropzone.addEventListener("dragover", function(e) {';
+        $script .= 'e.preventDefault();';
+        $script .= 'dropzone.style.borderColor = "#007bff";';
+        $script .= 'dropzone.style.backgroundColor = "#f8f9fa";';
+        $script .= '});';
+
+        $script .= 'dropzone.addEventListener("dragleave", function(e) {';
+        $script .= 'e.preventDefault();';
+        $script .= 'dropzone.style.borderColor = "";';
+        $script .= 'dropzone.style.backgroundColor = "";';
+        $script .= '});';
+
+        $script .= 'dropzone.addEventListener("drop", function(e) {';
+        $script .= 'e.preventDefault();';
+        $script .= 'dropzone.style.borderColor = "";';
+        $script .= 'dropzone.style.backgroundColor = "";';
+        $script .= 'const files = Array.from(e.dataTransfer.files);';
+        $script .= 'if (files.length > 0) {';
+        $script .= 'addFiles(files);';
+        $script .= '}';
+        $script .= '});';
+
+        // File input change handler
+        $script .= 'fileInput.addEventListener("change", function(e) {';
+        $script .= 'const files = Array.from(e.target.files);';
+        $script .= 'addFiles(files);';
+        $script .= '});';
+
+        // Clipboard paste handler
+        $script .= 'document.addEventListener("paste", function(e) {';
+        $script .= 'if (document.activeElement.closest("#'.$dropzoneId.'") || dropzone.contains(document.activeElement)) {';
+        $script .= 'const items = e.clipboardData.items;';
+        $script .= 'const files = [];';
+        $script .= 'for (let i = 0; i < items.length; i++) {';
+        $script .= 'if (items[i].type.indexOf("image") !== -1) {';
+        $script .= 'const file = items[i].getAsFile();';
+        $script .= 'files.push(file);';
+        $script .= '}';
+        $script .= '}';
+        $script .= 'if (files.length > 0) {';
+        $script .= 'addFiles(files);';
+        $script .= 'e.preventDefault();';
+        $script .= '}';
+        $script .= '}';
+        $script .= '});';
+
+        // File handling functions
+        $script .= 'function addFiles(newFiles) {';
+        $script .= 'if ("'.$multiple.'" === "multiple") {';
+        $script .= 'selectedFiles = selectedFiles.concat(newFiles);';
+        $script .= '} else {';
+        $script .= 'selectedFiles = [newFiles[0]];';
+        $script .= '}';
+        $script .= 'updateFileInput();';
+        $script .= 'renderFiles();';
+        $script .= '}';
+
+        $script .= 'function removeFile(index) {';
+        $script .= 'selectedFiles.splice(index, 1);';
+        $script .= 'updateFileInput();';
+        $script .= 'renderFiles();';
+        $script .= '}';
+
+        $script .= 'function updateFileInput() {';
+        $script .= 'const dt = new DataTransfer();';
+        $script .= 'selectedFiles.forEach(file => dt.items.add(file));';
+        $script .= 'fileInput.files = dt.files;';
+        $script .= '}';
+
+        $script .= 'function renderFiles() {';
+        $script .= 'preview.innerHTML = "";';
+        $script .= 'if (selectedFiles.length > 0) {';
+        $script .= 'preview.style.display = "block";';
+        $script .= 'const fileList = document.createElement("div");';
+        $script .= 'fileList.className = "list-group";';
+        
+        $script .= 'for (let i = 0; i < selectedFiles.length; i++) {';
+        $script .= 'const file = selectedFiles[i];';
+        $script .= 'const fileItem = document.createElement("div");';
+        $script .= 'fileItem.className = "list-group-item d-flex justify-content-between align-items-center";';
+        $script .= 'fileItem.setAttribute("data-file-index", i);';
+        
+        $script .= 'const fileInfo = document.createElement("div");';
+        $script .= 'fileInfo.innerHTML = "<strong>" + file.name + "</strong><br><small class=\"text-muted\">" + formatFileSize(file.size) + "</small>";';
+        
+        $script .= 'const fileActions = document.createElement("div");';
+        $script .= 'fileActions.className = "d-flex align-items-center gap-2";';
+        
+        $script .= 'const fileIcon = document.createElement("span");';
+        $script .= 'if (file.type.startsWith("image/")) {';
+        $script .= 'fileIcon.innerHTML = "🖼️";';
+        $script .= '} else if (file.type.includes("pdf")) {';
+        $script .= 'fileIcon.innerHTML = "📄";';
+        $script .= '} else {';
+        $script .= 'fileIcon.innerHTML = "📎";';
+        $script .= '}';
+        
+        $script .= 'const deleteBtn = document.createElement("button");';
+        $script .= 'deleteBtn.type = "button";';
+        $script .= 'deleteBtn.className = "btn btn-sm btn-outline-danger";';
+        $script .= 'deleteBtn.innerHTML = "×";';
+        $script .= 'deleteBtn.title = "Remove file";';
+        $script .= 'deleteBtn.setAttribute("data-file-index", i);';
+        $script .= 'deleteBtn.addEventListener("click", function(e) {';
+        $script .= 'e.preventDefault();';
+        $script .= 'removeFile(parseInt(this.getAttribute("data-file-index")));';
+        $script .= '});';
+        
+        $script .= 'fileActions.appendChild(fileIcon);';
+        $script .= 'fileActions.appendChild(deleteBtn);';
+        
+        $script .= 'fileItem.appendChild(fileInfo);';
+        $script .= 'fileItem.appendChild(fileActions);';
+        $script .= 'fileList.appendChild(fileItem);';
+        $script .= '}';
+        
+        $script .= 'preview.appendChild(fileList);';
+        $script .= '} else {';
+        $script .= 'preview.style.display = "none";';
+        $script .= '}';
+        $script .= '}';
+
+        // File size formatter
+        $script .= 'function formatFileSize(bytes) {';
+        $script .= 'if (bytes === 0) return "0 Bytes";';
+        $script .= 'const k = 1024;';
+        $script .= 'const sizes = ["Bytes", "KB", "MB", "GB"];';
+        $script .= 'const i = Math.floor(Math.log(bytes) / Math.log(k));';
+        $script .= 'return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];';
+        $script .= '}';
+
+        // Make dropzone focusable for accessibility
+        $script .= 'dropzone.setAttribute("tabindex", "0");';
+        $script .= 'dropzone.addEventListener("keydown", function(e) {';
+        $script .= 'if (e.key === "Enter" || e.key === " ") {';
+        $script .= 'e.preventDefault();';
+        $script .= 'fileInput.click();';
+        $script .= '}';
+        $script .= '});';
+
+        $script .= '})();';
+        $script .= '</script>';
+
+        return $script;
+    }
+
     /**
      * One form which only have "one button" and "hidden fields".
      * This is suitable for, e.g. set status, delete button,

From 0eccec94d77bf17536116e09ba6d50d261f0b427 Mon Sep 17 00:00:00 2001
From: Arifia Kasastra R <arka.progammer@gmail.com>
Date: Sun, 17 Aug 2025 00:26:38 +0700
Subject: [PATCH 2/7] test: Add unit tests for modern file upload field
 functionality

---
 tests/Fields/FileModernTest.php | 134 ++++++++++++++++++++++++++++++++
 1 file changed, 134 insertions(+)
 create mode 100644 tests/Fields/FileModernTest.php

diff --git a/tests/Fields/FileModernTest.php b/tests/Fields/FileModernTest.php
new file mode 100644
index 0000000..c7bcc65
--- /dev/null
+++ b/tests/Fields/FileModernTest.php
@@ -0,0 +1,134 @@
+<?php
+
+namespace Tests\Fields;
+
+use PHPUnit\Framework\Attributes\Test;
+use Tests\TestCase;
+
+class FileModernTest extends TestCase
+{
+    #[Test]
+    public function it_returns_modern_file_upload_field()
+    {
+        $result = $this->formField->fileModern('document');
+
+        $this->assertTrue(str_contains($result, 'file-dropzone'));
+        $this->assertTrue(str_contains($result, 'Drop files here or click to browse'));
+        $this->assertTrue(str_contains($result, 'Or paste images from clipboard'));
+        $this->assertTrue(str_contains($result, 'type="file"'));
+        $this->assertTrue(str_contains($result, 'name="document"'));
+        $this->assertTrue(str_contains($result, 'id="file-input-document"'));
+        $this->assertTrue(str_contains($result, '<script>'));
+    }
+
+    #[Test]
+    public function it_returns_modern_file_upload_field_with_accept_option()
+    {
+        $result = $this->formField->fileModern('images', ['accept' => 'image/*']);
+
+        $this->assertTrue(str_contains($result, 'accept="image/*"'));
+    }
+
+    #[Test]
+    public function it_returns_modern_file_upload_field_with_multiple_option()
+    {
+        $result = $this->formField->fileModern('files', ['multiple' => true]);
+
+        $this->assertTrue(str_contains($result, 'multiple'));
+    }
+
+    #[Test]
+    public function it_returns_modern_file_upload_field_with_required_attribute()
+    {
+        $generatedString = $this->formField->fileModern('required_file', ['required' => true]);
+
+        $this->assertTrue(str_contains($generatedString, 'required '));
+        $this->assertTrue(str_contains($generatedString, ' required'));
+    }
+
+    #[Test]
+    public function it_returns_modern_file_upload_field_with_custom_options()
+    {
+        $result = $this->formField->fileModern('custom_file', [
+            'id' => 'custom_id',
+            'max_size' => '5MB',
+            'allowed_types' => ['JPG', 'PNG', 'PDF'],
+            'label' => 'Custom File Upload'
+        ]);
+
+        $this->assertTrue(str_contains($result, 'id="file-input-custom_id"'));
+        $this->assertTrue(str_contains($result, 'Max size: 5MB'));
+        $this->assertTrue(str_contains($result, 'Accepted: JPG, PNG, PDF'));
+        $this->assertTrue(str_contains($result, 'Custom File Upload'));
+    }
+
+    #[Test]
+    public function it_returns_modern_file_upload_field_with_info_text()
+    {
+        $result = $this->formField->fileModern('info_file', [
+            'info' => ['text' => 'This is help text', 'class' => 'warning']
+        ]);
+
+        $this->assertTrue(str_contains($result, 'This is help text'));
+        $this->assertTrue(str_contains($result, 'text-warning'));
+    }
+
+    #[Test]
+    public function it_generates_unique_ids_for_multiple_instances()
+    {
+        $result1 = $this->formField->fileModern('file1');
+        $result2 = $this->formField->fileModern('file2');
+
+        $this->assertTrue(str_contains($result1, 'dropzone-file1'));
+        $this->assertTrue(str_contains($result2, 'dropzone-file2'));
+        $this->assertTrue(str_contains($result1, 'file-input-file1'));
+        $this->assertTrue(str_contains($result2, 'file-input-file2'));
+    }
+
+    #[Test]
+    public function it_includes_javascript_for_drag_and_drop_functionality()
+    {
+        $result = $this->formField->fileModern('js_test');
+
+        $this->assertTrue(str_contains($result, 'addEventListener("dragover"'));
+        $this->assertTrue(str_contains($result, 'addEventListener("drop"'));
+        $this->assertTrue(str_contains($result, 'addEventListener("paste"'));
+        $this->assertTrue(str_contains($result, 'addEventListener("click"'));
+        $this->assertTrue(str_contains($result, 'addFiles'));
+        $this->assertTrue(str_contains($result, 'formatFileSize'));
+    }
+
+    #[Test]
+    public function it_includes_accessibility_features()
+    {
+        $result = $this->formField->fileModern('accessible_file');
+
+        $this->assertTrue(str_contains($result, 'tabindex'));
+        $this->assertTrue(str_contains($result, 'addEventListener("keydown"'));
+        $this->assertTrue(str_contains($result, 'e.key === "Enter"'));
+        $this->assertTrue(str_contains($result, 'e.key === " "'));
+    }
+
+    #[Test]
+    public function it_includes_delete_file_functionality()
+    {
+        $result = $this->formField->fileModern('deletable_files');
+
+        $this->assertTrue(str_contains($result, 'removeFile'));
+        $this->assertTrue(str_contains($result, 'btn-outline-danger'));
+        $this->assertTrue(str_contains($result, 'Remove file'));
+        $this->assertTrue(str_contains($result, 'selectedFiles'));
+    }
+
+    #[Test]
+    public function it_handles_array_field_names_correctly()
+    {
+        $result = $this->formField->fileModern('files[]');
+
+        $this->assertTrue(str_contains($result, 'id="dropzone-files"'));
+        $this->assertTrue(str_contains($result, 'id="file-input-files"'));
+        $this->assertTrue(str_contains($result, 'id="preview-files"'));
+        $this->assertTrue(str_contains($result, 'name="files[]"'));
+        $this->assertTrue(str_contains($result, 'getElementById("dropzone-files")'));
+    }
+}

From 5f9c91e378c9a3e7169aebf0c9318c1d8e4e7cc9 Mon Sep 17 00:00:00 2001
From: Arifia Kasastra R <arka.progammer@gmail.com>
Date: Sun, 17 Aug 2025 00:35:35 +0700
Subject: [PATCH 3/7] feat: Fix dropzone interaction handling for clipboard
 paste

---
 src/FormField.php | 41 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 40 insertions(+), 1 deletion(-)

diff --git a/src/FormField.php b/src/FormField.php
index f5734b9..3a36165 100644
--- a/src/FormField.php
+++ b/src/FormField.php
@@ -522,8 +522,47 @@ private function getFileModernScript($dropzoneId, $fileInputId, $previewId, $acc
         $script .= '});';
 
         // Clipboard paste handler
+        $script .= 'let lastDropzoneInteraction = null;';
+        $script .= 'let dropzoneInteractionTimeout = null;';
+        
+        // Track interactions with the dropzone
+        $script .= 'dropzone.addEventListener("click", function() {';
+        $script .= 'lastDropzoneInteraction = Date.now();';
+        $script .= 'clearTimeout(dropzoneInteractionTimeout);';
+        $script .= 'dropzoneInteractionTimeout = setTimeout(() => { lastDropzoneInteraction = null; }, 10000);';
+        $script .= '});';
+        
+        $script .= 'dropzone.addEventListener("focus", function() {';
+        $script .= 'lastDropzoneInteraction = Date.now();';
+        $script .= 'clearTimeout(dropzoneInteractionTimeout);';
+        $script .= 'dropzoneInteractionTimeout = setTimeout(() => { lastDropzoneInteraction = null; }, 10000);';
+        $script .= '}, true);';
+        
         $script .= 'document.addEventListener("paste", function(e) {';
-        $script .= 'if (document.activeElement.closest("#'.$dropzoneId.'") || dropzone.contains(document.activeElement)) {';
+        $script .= 'let shouldHandle = false;';
+        
+        // Check if activeElement is inside dropzone
+        $script .= 'if (document.activeElement && (dropzone.contains(document.activeElement) || document.activeElement.closest("#'.$dropzoneId.'"))) {';
+        $script .= 'shouldHandle = true;';
+        $script .= '}';
+        
+        // Check if dropzone was recently interacted with
+        $script .= 'if (!shouldHandle && lastDropzoneInteraction && (Date.now() - lastDropzoneInteraction < 5000)) {';
+        $script .= 'shouldHandle = true;';
+        $script .= '}';
+        
+        // Check if dropzone is visible and cursor is over it
+        $script .= 'if (!shouldHandle) {';
+        $script .= 'const rect = dropzone.getBoundingClientRect();';
+        $script .= 'const centerX = rect.left + rect.width / 2;';
+        $script .= 'const centerY = rect.top + rect.height / 2;';
+        $script .= 'const elementAtCenter = document.elementFromPoint(centerX, centerY);';
+        $script .= 'if (elementAtCenter && (dropzone.contains(elementAtCenter) || elementAtCenter === dropzone)) {';
+        $script .= 'shouldHandle = true;';
+        $script .= '}';
+        $script .= '}';
+        
+        $script .= 'if (shouldHandle) {';
         $script .= 'const items = e.clipboardData.items;';
         $script .= 'const files = [];';
         $script .= 'for (let i = 0; i < items.length; i++) {';

From 3161b522022ea83411f9e38644581b20c9c8689d Mon Sep 17 00:00:00 2001
From: Arifia Kasastra R <arka.progammer@gmail.com>
Date: Sun, 17 Aug 2025 00:35:53 +0700
Subject: [PATCH 4/7] test: Add clipboard paste to modern file upload field
 tests

---
 tests/Fields/FileModernTest.php | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/tests/Fields/FileModernTest.php b/tests/Fields/FileModernTest.php
index c7bcc65..ac3a4d0 100644
--- a/tests/Fields/FileModernTest.php
+++ b/tests/Fields/FileModernTest.php
@@ -131,4 +131,22 @@ public function it_handles_array_field_names_correctly()
         $this->assertTrue(str_contains($result, 'name="files[]"'));
         $this->assertTrue(str_contains($result, 'getElementById("dropzone-files")'));
     }
+
+    #[Test]
+    public function it_includes_clipboard_paste_detection()
+    {
+        $result = $this->formField->fileModern('paste_test');
+
+        $this->assertTrue(str_contains($result, 'lastDropzoneInteraction'));
+        $this->assertTrue(str_contains($result, 'dropzoneInteractionTimeout'));
+        
+        $this->assertTrue(str_contains($result, 'shouldHandle = false'));
+        $this->assertTrue(str_contains($result, 'dropzone.contains(document.activeElement)'));
+        $this->assertTrue(str_contains($result, 'Date.now() - lastDropzoneInteraction'));
+        $this->assertTrue(str_contains($result, 'getBoundingClientRect()'));
+        $this->assertTrue(str_contains($result, 'elementFromPoint'));
+        
+        $this->assertTrue(str_contains($result, 'dropzone.addEventListener("click"'));
+        $this->assertTrue(str_contains($result, 'dropzone.addEventListener("focus"'));
+    }
 }

From 29952e792e19984ff7156e1ce99a825d76e63591 Mon Sep 17 00:00:00 2001
From: Arifia Kasastra R <arka.progammer@gmail.com>
Date: Sun, 17 Aug 2025 01:27:55 +0700
Subject: [PATCH 5/7] fix: Add file validation logic for file type support

---
 src/FormField.php               | 41 ++++++++++++++++++++++++++++++---
 tests/Fields/FileModernTest.php | 29 +++++++++++++++++++++++
 2 files changed, 67 insertions(+), 3 deletions(-)

diff --git a/src/FormField.php b/src/FormField.php
index 3a36165..c7058ee 100644
--- a/src/FormField.php
+++ b/src/FormField.php
@@ -568,9 +568,11 @@ private function getFileModernScript($dropzoneId, $fileInputId, $previewId, $acc
         $script .= 'for (let i = 0; i < items.length; i++) {';
         $script .= 'if (items[i].type.indexOf("image") !== -1) {';
         $script .= 'const file = items[i].getAsFile();';
+        $script .= 'if (isFileAccepted(file, "'.$accept.'")) {';
         $script .= 'files.push(file);';
         $script .= '}';
         $script .= '}';
+        $script .= '}';
         $script .= 'if (files.length > 0) {';
         $script .= 'addFiles(files);';
         $script .= 'e.preventDefault();';
@@ -578,16 +580,49 @@ private function getFileModernScript($dropzoneId, $fileInputId, $previewId, $acc
         $script .= '}';
         $script .= '});';
 
-        // File handling functions
+        // File handling functions with validation
+        $script .= 'function isFileAccepted(file, acceptString) {';
+        $script .= 'if (!acceptString || acceptString === "*/*") return true;';
+        $script .= 'const accepts = acceptString.split(",").map(s => s.trim());';
+        $script .= 'for (let accept of accepts) {';
+        $script .= 'if (accept.startsWith(".")) {';
+        $script .= 'if (file.name.toLowerCase().endsWith(accept.toLowerCase())) return true;';
+        $script .= '} else if (accept.includes("/*")) {';
+        $script .= 'const baseType = accept.split("/")[0];';
+        $script .= 'if (file.type.startsWith(baseType + "/")) return true;';
+        $script .= '} else if (file.type === accept) {';
+        $script .= 'return true;';
+        $script .= '}';
+        $script .= '}';
+        $script .= 'return false;';
+        $script .= '}';
+
         $script .= 'function addFiles(newFiles) {';
+        $script .= 'const acceptedFiles = [];';
+        $script .= 'const rejectedFiles = [];';
+        $script .= 'for (let file of newFiles) {';
+        $script .= 'if (isFileAccepted(file, "'.$accept.'")) {';
+        $script .= 'acceptedFiles.push(file);';
+        $script .= '} else {';
+        $script .= 'rejectedFiles.push(file);';
+        $script .= '}';
+        $script .= '}';
+        
+        $script .= 'if (rejectedFiles.length > 0) {';
+        $script .= 'const rejectedNames = rejectedFiles.map(f => f.name).join(", ");';
+        $script .= 'alert("The following files are not accepted based on the file type restrictions: " + rejectedNames);';
+        $script .= '}';
+        
+        $script .= 'if (acceptedFiles.length > 0) {';
         $script .= 'if ("'.$multiple.'" === "multiple") {';
-        $script .= 'selectedFiles = selectedFiles.concat(newFiles);';
+        $script .= 'selectedFiles = selectedFiles.concat(acceptedFiles);';
         $script .= '} else {';
-        $script .= 'selectedFiles = [newFiles[0]];';
+        $script .= 'selectedFiles = [acceptedFiles[0]];';
         $script .= '}';
         $script .= 'updateFileInput();';
         $script .= 'renderFiles();';
         $script .= '}';
+        $script .= '}';
 
         $script .= 'function removeFile(index) {';
         $script .= 'selectedFiles.splice(index, 1);';
diff --git a/tests/Fields/FileModernTest.php b/tests/Fields/FileModernTest.php
index ac3a4d0..a477855 100644
--- a/tests/Fields/FileModernTest.php
+++ b/tests/Fields/FileModernTest.php
@@ -149,4 +149,33 @@ public function it_includes_clipboard_paste_detection()
         $this->assertTrue(str_contains($result, 'dropzone.addEventListener("click"'));
         $this->assertTrue(str_contains($result, 'dropzone.addEventListener("focus"'));
     }
+
+    #[Test]
+    public function it_includes_file_validation_logic()
+    {
+        $result = $this->formField->fileModern('images', ['accept' => 'image/*']);
+
+        // Should include file validation function
+        $this->assertTrue(str_contains($result, 'function isFileAccepted'));
+        $this->assertTrue(str_contains($result, 'acceptString.split'));
+        $this->assertTrue(str_contains($result, 'file.name.toLowerCase().endsWith'));
+        $this->assertTrue(str_contains($result, 'file.type.startsWith'));
+        
+        // Should validate files in addFiles function
+        $this->assertTrue(str_contains($result, 'const acceptedFiles = []'));
+        $this->assertTrue(str_contains($result, 'const rejectedFiles = []'));
+        $this->assertTrue(str_contains($result, 'isFileAccepted(file, "image/*")'));
+        
+        // Should show rejection message
+        $this->assertTrue(str_contains($result, 'files are not accepted based on the file type restrictions'));
+    }
+
+    #[Test]
+    public function it_validates_clipboard_paste_files()
+    {
+        $result = $this->formField->fileModern('docs', ['accept' => '.pdf,.doc']);
+
+        // Should validate pasted files
+        $this->assertTrue(str_contains($result, 'isFileAccepted(file, ".pdf,.doc")'));
+    }
 }

From 1bc715111512fb72ee15cad4469a10851b98bf27 Mon Sep 17 00:00:00 2001
From: Arifia Kasastra R <arka.progammer@gmail.com>
Date: Sun, 17 Aug 2025 11:41:27 +0700
Subject: [PATCH 6/7] refactor: Rename Modern methods and tests to Drop

---
 src/FormField.php                             | 56 +++++++++----------
 .../{FileModernTest.php => FileDropTest.php}  | 44 +++++++--------
 2 files changed, 50 insertions(+), 50 deletions(-)
 rename tests/Fields/{FileModernTest.php => FileDropTest.php} (79%)

diff --git a/src/FormField.php b/src/FormField.php
index c7058ee..0c0aa25 100644
--- a/src/FormField.php
+++ b/src/FormField.php
@@ -398,13 +398,13 @@ public function file($name, $options = [])
     }
 
     /**
-     * Modern file input field with drag-and-drop and clipboard paste functionality.
+     * Drop file input field with drag-and-drop and clipboard paste functionality.
      *
      * @param  string  $name  The file field name and id attribute.
      * @param  array  $options  Additional attribute for the file input.
-     * @return string Generated modern file input form field.
+     * @return string Generated drop file input form field.
      */
-    public function fileModern($name, $options = [])
+    public function fileDrop($name, $options = [])
     {
         $requiredClass = (isset($options['required']) && $options['required'] == true) ? 'required ' : '';
         $hasError = $this->errorBag->has($this->formatArrayName($name));
@@ -422,13 +422,13 @@ public function fileModern($name, $options = [])
         // Sanitize field ID for use in HTML IDs (remove square brackets and other invalid characters)
         $sanitizedFieldId = preg_replace('/[^a-zA-Z0-9_-]/', '', $fieldId);
         
-        $dropzoneId = 'dropzone-' . $sanitizedFieldId;
-        $fileInputId = 'file-input-' . $sanitizedFieldId;
-        $previewId = 'preview-' . $sanitizedFieldId;
+        $dropzoneId = 'dropzone-'.$sanitizedFieldId;
+        $fileInputId = 'file-input-'.$sanitizedFieldId;
+        $previewId = 'preview-'.$sanitizedFieldId;
 
         // Container with dropzone styling
         $htmlForm .= '<div id="'.$dropzoneId.'" class="file-dropzone border border-2 border-dashed rounded p-4 text-center position-relative" style="min-height: 150px; cursor: pointer; transition: all 0.3s ease;">';
-        
+
         // Hidden file input
         $htmlForm .= '<input type="file" id="'.$fileInputId.'" name="'.$name.'" class="d-none" accept="'.$accept.'" '.$multiple;
         if (isset($options['required']) && $options['required'] == true) {
@@ -455,7 +455,7 @@ public function fileModern($name, $options = [])
         $htmlForm .= '</div>';
 
         // Add the JavaScript for drag-and-drop and clipboard functionality
-        $htmlForm .= $this->getFileModernScript($dropzoneId, $fileInputId, $previewId, $accept, $multiple);
+        $htmlForm .= $this->getFileDropScript($dropzoneId, $fileInputId, $previewId, $accept, $multiple);
 
         $htmlForm .= $this->getInfoTextLine($options);
 
@@ -467,7 +467,7 @@ public function fileModern($name, $options = [])
     }
 
     /**
-     * Generate JavaScript for modern file input functionality.
+     * Generate JavaScript for drop file input functionality.
      *
      * @param  string  $dropzoneId  The dropzone element ID.
      * @param  string  $fileInputId  The file input element ID.
@@ -476,7 +476,7 @@ public function fileModern($name, $options = [])
      * @param  string  $multiple  Multiple files flag.
      * @return string JavaScript code.
      */
-    private function getFileModernScript($dropzoneId, $fileInputId, $previewId, $accept, $multiple)
+    private function getFileDropScript($dropzoneId, $fileInputId, $previewId, $accept, $multiple)
     {
         $script = '<script>';
         $script .= '(function() {';
@@ -484,7 +484,7 @@ private function getFileModernScript($dropzoneId, $fileInputId, $previewId, $acc
         $script .= 'const fileInput = document.getElementById("'.$fileInputId.'");';
         $script .= 'const preview = document.getElementById("'.$previewId.'");';
         $script .= 'let selectedFiles = [];';
-        
+
         // Click handler
         $script .= 'dropzone.addEventListener("click", function(e) {';
         $script .= 'if (e.target === dropzone || e.target.closest(".dropzone-content")) {';
@@ -524,33 +524,33 @@ private function getFileModernScript($dropzoneId, $fileInputId, $previewId, $acc
         // Clipboard paste handler
         $script .= 'let lastDropzoneInteraction = null;';
         $script .= 'let dropzoneInteractionTimeout = null;';
-        
+
         // Track interactions with the dropzone
         $script .= 'dropzone.addEventListener("click", function() {';
         $script .= 'lastDropzoneInteraction = Date.now();';
         $script .= 'clearTimeout(dropzoneInteractionTimeout);';
         $script .= 'dropzoneInteractionTimeout = setTimeout(() => { lastDropzoneInteraction = null; }, 10000);';
         $script .= '});';
-        
+
         $script .= 'dropzone.addEventListener("focus", function() {';
         $script .= 'lastDropzoneInteraction = Date.now();';
         $script .= 'clearTimeout(dropzoneInteractionTimeout);';
         $script .= 'dropzoneInteractionTimeout = setTimeout(() => { lastDropzoneInteraction = null; }, 10000);';
         $script .= '}, true);';
-        
+
         $script .= 'document.addEventListener("paste", function(e) {';
         $script .= 'let shouldHandle = false;';
-        
+
         // Check if activeElement is inside dropzone
         $script .= 'if (document.activeElement && (dropzone.contains(document.activeElement) || document.activeElement.closest("#'.$dropzoneId.'"))) {';
         $script .= 'shouldHandle = true;';
         $script .= '}';
-        
+
         // Check if dropzone was recently interacted with
         $script .= 'if (!shouldHandle && lastDropzoneInteraction && (Date.now() - lastDropzoneInteraction < 5000)) {';
         $script .= 'shouldHandle = true;';
         $script .= '}';
-        
+
         // Check if dropzone is visible and cursor is over it
         $script .= 'if (!shouldHandle) {';
         $script .= 'const rect = dropzone.getBoundingClientRect();';
@@ -561,7 +561,7 @@ private function getFileModernScript($dropzoneId, $fileInputId, $previewId, $acc
         $script .= 'shouldHandle = true;';
         $script .= '}';
         $script .= '}';
-        
+
         $script .= 'if (shouldHandle) {';
         $script .= 'const items = e.clipboardData.items;';
         $script .= 'const files = [];';
@@ -607,12 +607,12 @@ private function getFileModernScript($dropzoneId, $fileInputId, $previewId, $acc
         $script .= 'rejectedFiles.push(file);';
         $script .= '}';
         $script .= '}';
-        
+
         $script .= 'if (rejectedFiles.length > 0) {';
         $script .= 'const rejectedNames = rejectedFiles.map(f => f.name).join(", ");';
         $script .= 'alert("The following files are not accepted based on the file type restrictions: " + rejectedNames);';
         $script .= '}';
-        
+
         $script .= 'if (acceptedFiles.length > 0) {';
         $script .= 'if ("'.$multiple.'" === "multiple") {';
         $script .= 'selectedFiles = selectedFiles.concat(acceptedFiles);';
@@ -642,19 +642,19 @@ private function getFileModernScript($dropzoneId, $fileInputId, $previewId, $acc
         $script .= 'preview.style.display = "block";';
         $script .= 'const fileList = document.createElement("div");';
         $script .= 'fileList.className = "list-group";';
-        
+
         $script .= 'for (let i = 0; i < selectedFiles.length; i++) {';
         $script .= 'const file = selectedFiles[i];';
         $script .= 'const fileItem = document.createElement("div");';
         $script .= 'fileItem.className = "list-group-item d-flex justify-content-between align-items-center";';
         $script .= 'fileItem.setAttribute("data-file-index", i);';
-        
+
         $script .= 'const fileInfo = document.createElement("div");';
         $script .= 'fileInfo.innerHTML = "<strong>" + file.name + "</strong><br><small class=\"text-muted\">" + formatFileSize(file.size) + "</small>";';
-        
+
         $script .= 'const fileActions = document.createElement("div");';
         $script .= 'fileActions.className = "d-flex align-items-center gap-2";';
-        
+
         $script .= 'const fileIcon = document.createElement("span");';
         $script .= 'if (file.type.startsWith("image/")) {';
         $script .= 'fileIcon.innerHTML = "🖼️";';
@@ -663,7 +663,7 @@ private function getFileModernScript($dropzoneId, $fileInputId, $previewId, $acc
         $script .= '} else {';
         $script .= 'fileIcon.innerHTML = "📎";';
         $script .= '}';
-        
+
         $script .= 'const deleteBtn = document.createElement("button");';
         $script .= 'deleteBtn.type = "button";';
         $script .= 'deleteBtn.className = "btn btn-sm btn-outline-danger";';
@@ -674,15 +674,15 @@ private function getFileModernScript($dropzoneId, $fileInputId, $previewId, $acc
         $script .= 'e.preventDefault();';
         $script .= 'removeFile(parseInt(this.getAttribute("data-file-index")));';
         $script .= '});';
-        
+
         $script .= 'fileActions.appendChild(fileIcon);';
         $script .= 'fileActions.appendChild(deleteBtn);';
-        
+
         $script .= 'fileItem.appendChild(fileInfo);';
         $script .= 'fileItem.appendChild(fileActions);';
         $script .= 'fileList.appendChild(fileItem);';
         $script .= '}';
-        
+
         $script .= 'preview.appendChild(fileList);';
         $script .= '} else {';
         $script .= 'preview.style.display = "none";';
diff --git a/tests/Fields/FileModernTest.php b/tests/Fields/FileDropTest.php
similarity index 79%
rename from tests/Fields/FileModernTest.php
rename to tests/Fields/FileDropTest.php
index a477855..5f2e007 100644
--- a/tests/Fields/FileModernTest.php
+++ b/tests/Fields/FileDropTest.php
@@ -5,12 +5,12 @@
 use PHPUnit\Framework\Attributes\Test;
 use Tests\TestCase;
 
-class FileModernTest extends TestCase
+class FileDropTest extends TestCase
 {
     #[Test]
-    public function it_returns_modern_file_upload_field()
+    public function it_returns_drop_file_upload_field()
     {
-        $result = $this->formField->fileModern('document');
+        $result = $this->formField->fileDrop('document');
 
         $this->assertTrue(str_contains($result, 'file-dropzone'));
         $this->assertTrue(str_contains($result, 'Drop files here or click to browse'));
@@ -22,34 +22,34 @@ public function it_returns_modern_file_upload_field()
     }
 
     #[Test]
-    public function it_returns_modern_file_upload_field_with_accept_option()
+    public function it_returns_drop_file_upload_field_with_accept_option()
     {
-        $result = $this->formField->fileModern('images', ['accept' => 'image/*']);
+        $result = $this->formField->fileDrop('images', ['accept' => 'image/*']);
 
         $this->assertTrue(str_contains($result, 'accept="image/*"'));
     }
 
     #[Test]
-    public function it_returns_modern_file_upload_field_with_multiple_option()
+    public function it_returns_drop_file_upload_field_with_multiple_option()
     {
-        $result = $this->formField->fileModern('files', ['multiple' => true]);
+        $result = $this->formField->fileDrop('files', ['multiple' => true]);
 
         $this->assertTrue(str_contains($result, 'multiple'));
     }
 
     #[Test]
-    public function it_returns_modern_file_upload_field_with_required_attribute()
+    public function it_returns_drop_file_upload_field_with_required_attribute()
     {
-        $generatedString = $this->formField->fileModern('required_file', ['required' => true]);
+        $generatedString = $this->formField->fileDrop('required_file', ['required' => true]);
 
         $this->assertTrue(str_contains($generatedString, 'required '));
         $this->assertTrue(str_contains($generatedString, ' required'));
     }
 
     #[Test]
-    public function it_returns_modern_file_upload_field_with_custom_options()
+    public function it_returns_drop_file_upload_field_with_custom_options()
     {
-        $result = $this->formField->fileModern('custom_file', [
+        $result = $this->formField->fileDrop('custom_file', [
             'id' => 'custom_id',
             'max_size' => '5MB',
             'allowed_types' => ['JPG', 'PNG', 'PDF'],
@@ -63,9 +63,9 @@ public function it_returns_modern_file_upload_field_with_custom_options()
     }
 
     #[Test]
-    public function it_returns_modern_file_upload_field_with_info_text()
+    public function it_returns_drop_file_upload_field_with_info_text()
     {
-        $result = $this->formField->fileModern('info_file', [
+        $result = $this->formField->fileDrop('info_file', [
             'info' => ['text' => 'This is help text', 'class' => 'warning']
         ]);
 
@@ -76,8 +76,8 @@ public function it_returns_modern_file_upload_field_with_info_text()
     #[Test]
     public function it_generates_unique_ids_for_multiple_instances()
     {
-        $result1 = $this->formField->fileModern('file1');
-        $result2 = $this->formField->fileModern('file2');
+        $result1 = $this->formField->fileDrop('file1');
+        $result2 = $this->formField->fileDrop('file2');
 
         $this->assertTrue(str_contains($result1, 'dropzone-file1'));
         $this->assertTrue(str_contains($result2, 'dropzone-file2'));
@@ -88,7 +88,7 @@ public function it_generates_unique_ids_for_multiple_instances()
     #[Test]
     public function it_includes_javascript_for_drag_and_drop_functionality()
     {
-        $result = $this->formField->fileModern('js_test');
+        $result = $this->formField->fileDrop('js_test');
 
         $this->assertTrue(str_contains($result, 'addEventListener("dragover"'));
         $this->assertTrue(str_contains($result, 'addEventListener("drop"'));
@@ -101,7 +101,7 @@ public function it_includes_javascript_for_drag_and_drop_functionality()
     #[Test]
     public function it_includes_accessibility_features()
     {
-        $result = $this->formField->fileModern('accessible_file');
+        $result = $this->formField->fileDrop('accessible_file');
 
         $this->assertTrue(str_contains($result, 'tabindex'));
         $this->assertTrue(str_contains($result, 'addEventListener("keydown"'));
@@ -112,7 +112,7 @@ public function it_includes_accessibility_features()
     #[Test]
     public function it_includes_delete_file_functionality()
     {
-        $result = $this->formField->fileModern('deletable_files');
+        $result = $this->formField->fileDrop('deletable_files');
 
         $this->assertTrue(str_contains($result, 'removeFile'));
         $this->assertTrue(str_contains($result, 'btn-outline-danger'));
@@ -123,7 +123,7 @@ public function it_includes_delete_file_functionality()
     #[Test]
     public function it_handles_array_field_names_correctly()
     {
-        $result = $this->formField->fileModern('files[]');
+        $result = $this->formField->fileDrop('files[]');
 
         $this->assertTrue(str_contains($result, 'id="dropzone-files"'));
         $this->assertTrue(str_contains($result, 'id="file-input-files"'));
@@ -135,7 +135,7 @@ public function it_handles_array_field_names_correctly()
     #[Test]
     public function it_includes_clipboard_paste_detection()
     {
-        $result = $this->formField->fileModern('paste_test');
+        $result = $this->formField->fileDrop('paste_test');
 
         $this->assertTrue(str_contains($result, 'lastDropzoneInteraction'));
         $this->assertTrue(str_contains($result, 'dropzoneInteractionTimeout'));
@@ -153,7 +153,7 @@ public function it_includes_clipboard_paste_detection()
     #[Test]
     public function it_includes_file_validation_logic()
     {
-        $result = $this->formField->fileModern('images', ['accept' => 'image/*']);
+        $result = $this->formField->fileDrop('images', ['accept' => 'image/*']);
 
         // Should include file validation function
         $this->assertTrue(str_contains($result, 'function isFileAccepted'));
@@ -173,7 +173,7 @@ public function it_includes_file_validation_logic()
     #[Test]
     public function it_validates_clipboard_paste_files()
     {
-        $result = $this->formField->fileModern('docs', ['accept' => '.pdf,.doc']);
+        $result = $this->formField->fileDrop('docs', ['accept' => '.pdf,.doc']);
 
         // Should validate pasted files
         $this->assertTrue(str_contains($result, 'isFileAccepted(file, ".pdf,.doc")'));

From 08e12059f8e96da1e02ffce0feba27c6cb6a6b7d Mon Sep 17 00:00:00 2001
From: Arifia Kasastra R <arka.progammer@gmail.com>
Date: Sun, 17 Aug 2025 11:43:10 +0700
Subject: [PATCH 7/7] fix: Remove unnecessary whitespace in FormField and
 FileDropTest

---
 src/FormField.php             |  4 ++--
 tests/Fields/FileDropTest.php | 12 ++++++------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/FormField.php b/src/FormField.php
index 0c0aa25..31309f2 100644
--- a/src/FormField.php
+++ b/src/FormField.php
@@ -418,10 +418,10 @@ public function fileDrop($name, $options = [])
         $multiple = isset($options['multiple']) && $options['multiple'] ? 'multiple' : '';
         $maxSize = isset($options['max_size']) ? $options['max_size'] : '10MB';
         $allowedTypes = isset($options['allowed_types']) ? implode(', ', $options['allowed_types']) : 'All files';
-        
+
         // Sanitize field ID for use in HTML IDs (remove square brackets and other invalid characters)
         $sanitizedFieldId = preg_replace('/[^a-zA-Z0-9_-]/', '', $fieldId);
-        
+
         $dropzoneId = 'dropzone-'.$sanitizedFieldId;
         $fileInputId = 'file-input-'.$sanitizedFieldId;
         $previewId = 'preview-'.$sanitizedFieldId;
diff --git a/tests/Fields/FileDropTest.php b/tests/Fields/FileDropTest.php
index 5f2e007..59ab7d5 100644
--- a/tests/Fields/FileDropTest.php
+++ b/tests/Fields/FileDropTest.php
@@ -53,7 +53,7 @@ public function it_returns_drop_file_upload_field_with_custom_options()
             'id' => 'custom_id',
             'max_size' => '5MB',
             'allowed_types' => ['JPG', 'PNG', 'PDF'],
-            'label' => 'Custom File Upload'
+            'label' => 'Custom File Upload',
         ]);
 
         $this->assertTrue(str_contains($result, 'id="file-input-custom_id"'));
@@ -66,7 +66,7 @@ public function it_returns_drop_file_upload_field_with_custom_options()
     public function it_returns_drop_file_upload_field_with_info_text()
     {
         $result = $this->formField->fileDrop('info_file', [
-            'info' => ['text' => 'This is help text', 'class' => 'warning']
+            'info' => ['text' => 'This is help text', 'class' => 'warning'],
         ]);
 
         $this->assertTrue(str_contains($result, 'This is help text'));
@@ -139,13 +139,13 @@ public function it_includes_clipboard_paste_detection()
 
         $this->assertTrue(str_contains($result, 'lastDropzoneInteraction'));
         $this->assertTrue(str_contains($result, 'dropzoneInteractionTimeout'));
-        
+
         $this->assertTrue(str_contains($result, 'shouldHandle = false'));
         $this->assertTrue(str_contains($result, 'dropzone.contains(document.activeElement)'));
         $this->assertTrue(str_contains($result, 'Date.now() - lastDropzoneInteraction'));
         $this->assertTrue(str_contains($result, 'getBoundingClientRect()'));
         $this->assertTrue(str_contains($result, 'elementFromPoint'));
-        
+
         $this->assertTrue(str_contains($result, 'dropzone.addEventListener("click"'));
         $this->assertTrue(str_contains($result, 'dropzone.addEventListener("focus"'));
     }
@@ -160,12 +160,12 @@ public function it_includes_file_validation_logic()
         $this->assertTrue(str_contains($result, 'acceptString.split'));
         $this->assertTrue(str_contains($result, 'file.name.toLowerCase().endsWith'));
         $this->assertTrue(str_contains($result, 'file.type.startsWith'));
-        
+
         // Should validate files in addFiles function
         $this->assertTrue(str_contains($result, 'const acceptedFiles = []'));
         $this->assertTrue(str_contains($result, 'const rejectedFiles = []'));
         $this->assertTrue(str_contains($result, 'isFileAccepted(file, "image/*")'));
-        
+
         // Should show rejection message
         $this->assertTrue(str_contains($result, 'files are not accepted based on the file type restrictions'));
     }