data-files

ภาพรวม

data-files ใช้ bind metadata ของไฟล์เดิมลงบน file input เพื่อให้ FileElementFactory แสดง preview ของไฟล์ที่อัปโหลดไว้แล้วได้

นี่คือ directive ที่ถูกต้องเมื่อคุณต้องการแสดงไฟล์จากฝั่งเซิร์ฟเวอร์บน <input type="file"> โดยมันไม่ได้ไปตั้งค่า native file value ของ browser

ทำไมต้องใช้:

• ✅ แสดงไฟล์ที่อัปโหลดไว้แล้วแบบ declarative
• ✅ รับได้ทั้ง file object เดี่ยวหรือ array ของ file objects
• ✅ reactive เมื่อ file metadata ถูก bind ใหม่
• ✅ ล้าง preview เก่าที่ไม่ตรงกับ state อัตโนมัติเมื่อ expression ว่างลง

การใช้งานพื้นฐาน

Avatar ที่มีอยู่แล้ว

<input type="file"
       name="avatar"
       data-preview="true"
       data-files="avatarFiles"
       data-file-reference="url">

{
  avatarFiles: [
    { url: 'uploads/avatar.jpg', name: 'avatar.jpg' }
  ]
}

ใช้ object เดี่ยวก็ได้

<input type="file"
       name="resume"
       data-files="resume">

{
  resume: {
    url: 'uploads/resume.pdf',
    name: 'resume.pdf'
  }
}

รูปแบบข้อมูลไฟล์ที่คาดหวัง

รูปแบบขั้นต่ำที่ใช้ได้คือ:

{
  "url": "uploads/document.pdf",
  "name": "document.pdf"
}

สามารถมีข้อมูลเพิ่มอย่าง size, size_text, id หรือเวลาอัปโหลดได้ด้วย และ UI รอบข้างอาจนำไปใช้ต่อ

พฤติกรรมแบบ Reactive

เมื่อ expression ของ data-files เปลี่ยน:

• expression จะถูกประเมินใหม่
• attribute data-files ที่เป็น JSON จะถูกอัปเดต
• ถ้า FileElementFactory ถูกสร้างแล้ว preview ที่แสดงอยู่จะถูกแทนด้วยชุดใหม่
• ถ้า expression ว่างลง preview เก่าจะถูกลบออก

จึงเหมาะกับ edit form ที่โหลดจาก API และ block ที่ถูก bind ใหม่ด้วย record คนละตัว

ข้อควรระวัง

1. ใช้ data-attr="value:..." กับ file input

<!-- ❌ browser ไม่อนุญาต -->
<input type="file" data-attr="value:filePath">

ควรใช้ data-files แทน

2. ใช้กับ input ที่ไม่ใช่ file

data-files มีความหมายเฉพาะกับ <input type="file">

3. expression คืนค่าผิดประเภท

ถ้า expression คืนค่าเป็นค่าที่ไม่ใช่ object จะไม่แสดงอะไร

Directives ที่เกี่ยวข้อง

• data-attr - one-way attribute binding
• data-model - อ่านไฟล์ใหม่ที่ผู้ใช้เลือกจาก native input
• data-bind - bind row data เชิงโครงสร้างเข้าตารางที่ framework จัดการ