From 580f3c7f9b2f4efcb41bdb095b3fb2bd33c34983 Mon Sep 17 00:00:00 2001
From: "allen.yan" <hungyi0816@gmail.com>
Date: Fri, 9 May 2025 15:25:26 +0800
Subject: [PATCH] =?UTF-8?q?song=20,=20artist=20=E8=AA=BF=E6=95=B4=E6=AA=94?=
 =?UTF-8?q?=E6=A1=88=E5=82=B3=E6=AA=94=E5=8A=9F=E8=83=BD=2020250509?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../admin/artist-import-data.blade.php        | 35 ++++++++++++-------
 .../livewire/admin/song-import-data.blade.php | 35 ++++++++++++-------
 2 files changed, 46 insertions(+), 24 deletions(-)

diff --git a/resources/views/livewire/admin/artist-import-data.blade.php b/resources/views/livewire/admin/artist-import-data.blade.php
index 3b0707c..be06163 100644
--- a/resources/views/livewire/admin/artist-import-data.blade.php
+++ b/resources/views/livewire/admin/artist-import-data.blade.php
@@ -47,18 +47,29 @@
     
 
     {{-- 檔案上傳 --}}
-    <input type="file" wire:model="file" accept=".csv, .xls, .xlsx" class="mb-4 w-full" />
-    <p class="text-xs text-gray-500 mb-2">
-        系統限制：最大上傳 {{ $maxUploadSize }}
-    </p>
-    <!-- 上傳中提示 -->
-    <div wire:loading wire:target="file" class="text-sm text-blue-500">
-        檔案上傳中，請稍候...
-    </div>
-
-    <!-- 上傳完成提示 -->
-    <div wire:loading.remove wire:target="file" class="text-sm text-green-600">
-        <x-wireui:icon name="check-circle" class="w-5 h-5 text-green-500" />
+    <div x-data="{
+            fileName: '', 
+            updateFileInfo(event) {
+                const file = event.target.files[0];
+                if (file) this.fileName = file.name+ '('+(file.size / 1024 / 1024).toFixed(2) + ' MB'+')';
+            }
+        }"
+    >
+        <div x-show="$wire.file === null" >
+            <input type="file" wire:model="file" accept=".csv, .xls, .xlsx" class="mb-2 w-full" @change="updateFileInfo"  />
+            <p class="text-xs text-gray-500 mb-2" >
+                系統限制：最大上傳 {{ $maxUploadSize }}
+            </p>
+        </div>
+        <!-- 檔案資訊顯示 -->
+        <div wire:loading.remove wire:target="file" class="text-sm text-green-600 flex items-center space-x-1" x-show="$wire.file != null">
+            <x-wireui:icon name="check-circle" class="w-5 h-5 text-green-500"  />
+            <strong x-text="fileName"></strong>
+        </div>
+        <!-- 上傳中提示 -->
+        <div wire:loading wire:target="file" class="text-sm text-blue-500">
+            檔案上傳中，請稍候...
+        </div>
     </div>
     
     
diff --git a/resources/views/livewire/admin/song-import-data.blade.php b/resources/views/livewire/admin/song-import-data.blade.php
index af399c8..e7d0b91 100644
--- a/resources/views/livewire/admin/song-import-data.blade.php
+++ b/resources/views/livewire/admin/song-import-data.blade.php
@@ -143,18 +143,29 @@
         </p>
     </div>
     {{-- 檔案上傳 --}}
-    <input type="file" wire:model="file" accept=".csv, .xls, .xlsx" class="mb-4 w-full" />
-    <p class="text-xs text-gray-500 mb-2">
-        系統限制：最大上傳 {{ $maxUploadSize }}
-    </p>
-    <!-- 上傳中提示 -->
-    <div wire:loading wire:target="file" class="text-sm text-blue-500">
-        檔案上傳中，請稍候...
-    </div>
-
-    <!-- 上傳完成提示 -->
-    <div wire:loading.remove wire:target="file" class="text-sm text-green-600">
-        <x-wireui:icon name="check-circle" class="w-5 h-5 text-green-500" />
+    <div x-data="{
+            fileName: '', 
+            updateFileInfo(event) {
+                const file = event.target.files[0];
+                if (file) this.fileName = file.name+ '('+(file.size / 1024 / 1024).toFixed(2) + ' MB'+')';
+            }
+        }"
+    >
+        <div x-show="$wire.file === null" >
+            <input type="file" wire:model="file" accept=".csv, .xls, .xlsx" class="mb-2 w-full" @change="updateFileInfo"  />
+            <p class="text-xs text-gray-500 mb-2" >
+                系統限制：最大上傳 {{ $maxUploadSize }}
+            </p>
+        </div>
+        <!-- 檔案資訊顯示 -->
+        <div wire:loading.remove wire:target="file" class="text-sm text-green-600 flex items-center space-x-1" x-show="$wire.file != null">
+            <x-wireui:icon name="check-circle" class="w-5 h-5 text-green-500"  />
+            <strong x-text="fileName"></strong>
+        </div>
+        <!-- 上傳中提示 -->
+        <div wire:loading wire:target="file" class="text-sm text-blue-500">
+            檔案上傳中，請稍候...
+        </div>
     </div>
     <x-slot name="footer">
         <div class="flex justify-between w-full">