Livewire ทำให้การอัปโหลดไฟล์ใน Laravel ง่ายขึ้น โดยไม่ต้องเขียน JavaScript เพิ่มเติม คุณสามารถจัดการการอัปโหลดไฟล์ได้ในฝั่งเซิร์ฟเวอร์โดยตรงผ่าน Component นอกจากนี้ Livewire ยังมีระบบตรวจสอบขนาดไฟล์ ประเภทไฟล์ และการจัดการ Validation ที่ง่ายและปลอดภัย

ขั้นตอนการใช้งานการอัปโหลดไฟล์ด้วย Livewire

ติดตั้งแพ็กเกจที่จำเป็น Laravel Livewire รองรับการอัปโหลดไฟล์โดยใช้ livewire/livewire ซึ่งมีการรองรับในตัว คุณต้องมั่นใจว่าได้ติดตั้ง Livewire แล้ว:

composer require livewire/livewire

สร้าง Component สำหรับการอัปโหลดไฟล์ ใช้คำสั่งนี้เพื่อสร้าง Component ชื่อ FileUploader:

php artisan make:livewire FileUploader

จัดการไฟล์ใน Component (FileUploader.php) เปิดไฟล์ FileUploader.php และเพิ่มโค้ดเพื่อจัดการการอัปโหลดไฟล์:

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Livewire\WithFileUploads;

class FileUploader extends Component
{
    use WithFileUploads;

    public $file;

    protected $rules = [
        'file' => 'required|file|max:1024', // ขนาดไฟล์สูงสุด 1MB
    ];

    public function uploadFile()
    {
        $this->validate();

        $filePath = $this->file->store('uploads', 'public'); // บันทึกไฟล์ใน storage/app/public/uploads

        session()->flash('message', 'File uploaded successfully: ' . $filePath);

        $this->reset('file'); // รีเซ็ตค่าไฟล์หลังการอัปโหลด
    }

    public function render()
    {
        return view('livewire.file-uploader');
    }
}

• WithFileUploads: Trait ที่จำเป็นสำหรับการจัดการไฟล์ใน Livewire
• $file: ตัวแปรที่ใช้เก็บไฟล์ที่อัปโหลด
• validate(): ตรวจสอบไฟล์ตามกฎที่กำหนดใน $rules
• store(): บันทึกไฟล์ลงในโฟลเดอร์ storage/app/public/uploads

สร้าง View สำหรับอัปโหลดไฟล์ (file-uploader.blade.php) สร้างไฟล์ UI เพื่ออัปโหลดไฟล์:

<div>
    <h2>File Uploader</h2>

    <!-- แสดงข้อความยืนยัน -->
    @if (session()->has('message'))
        <p>{{ session('message') }}</p>
    @endif

    <!-- ฟอร์มอัปโหลดไฟล์ -->
    <form wire:submit.prevent="uploadFile">
        <input type="file" wire:model="file">
        @error('file') <span class="error">{{ $message }}</span> @enderror

        <button type="submit">Upload</button>
    </form>

    <!-- แสดงไฟล์ที่เลือก -->
    @if ($file)
        <p>Selected File: {{ $file->getClientOriginalName() }}</p>
    @endif
</div>

• wire:model="file": เชื่อมข้อมูลไฟล์ที่เลือกกับตัวแปร $file
• @error('file'): แสดงข้อความผิดพลาดหากไฟล์ไม่ผ่าน Validation
• wire:submit.prevent="uploadFile": ป้องกันการรีเฟรชหน้าและเรียกฟังก์ชัน uploadFile

การแสดง Component ใน Blade Template เพิ่ม Component ในหน้า Blade Template เช่น home.blade.php:

@livewire('file-uploader')

ตั้งค่าการเข้าถึงไฟล์ที่อัปโหลด ตรวจสอบว่าได้ตั้งค่าการเชื่อมโยงโฟลเดอร์ storage กับ public แล้ว:

php artisan storage:link

ผลลัพธ์ที่ได้

• เมื่อผู้ใช้เลือกไฟล์และกดปุ่ม “Upload” ระบบจะตรวจสอบขนาดและประเภทของไฟล์ก่อนบันทึก
• ไฟล์ที่อัปโหลดจะถูกเก็บใน storage/app/public/uploads
• ระบบจะแสดงข้อความยืนยันว่าไฟล์อัปโหลดสำเร็จพร้อมเส้นทางไฟล์

การนำไปใช้งาน

• อัปโหลดไฟล์ส่วนบุคคล เช่น โปรไฟล์รูปภาพหรือไฟล์แนบ
• จัดเก็บเอกสาร เช่น ใบเสร็จรับเงินหรือไฟล์สำคัญ
• ระบบจัดการไฟล์ เช่น อัปโหลดไฟล์หลายไฟล์ในระบบ CMS

คำแนะนำเพิ่มเติม

ใช้ Validation เพื่อความปลอดภัย เช่น กำหนดประเภทไฟล์ (mimes) หรือขนาดไฟล์ (max):

protected $rules = [
    'file' => 'required|mimes:jpg,png,pdf|max:2048', // ไฟล์ JPG, PNG, PDF และไม่เกิน 2MB
];

ใช้ ไฟล์ชั่วคราว (Temporary File) ของ Livewire สำหรับจัดการไฟล์ขนาดใหญ่