File Upload trong Laravel - [Phần 10] Upload file tự động với Livewire 3

Chào mừng bạn đến với phần cuối cùng của series “Laravel File Upload”. Phần 10 này ra mắt chậm trễ hơn dự kiến, vì mình phải dành thêm thời gian nghiên cứu về Livewire 3 trước khi áp dụng vào series này.

Trong các phần trước, chúng ta đã từng bước xây dựng tính năng upload file trong Laravel – từ cơ bản, qua xử lý ảnh, tích hợp thư viện Spatie Media Library và cải thiện giao diện bằng FilePond. Tuy nhiên, ở phần cuối cùng này, chúng ta sẽ thử một hướng tiếp cận khác: sử dụng Livewire 3 để xây dựng tính năng upload file realtime – đơn giản, hiện đại và không cần JavaScript phức tạp.

Ưu điểm khi dùng Livewire 3:

Upload realtime không cần reload trang.
Tự động cập nhật danh sách file vừa upload.
Giao diện đơn giản, dễ tuỳ biến.
Tích hợp tốt với Spatie Media Library để lưu trữ và quản lý file.

Yêu cầu phải có kiến thức căn bản về Livewire 3, nếu không sẽ rất khó để theo dõi nội dung chia sẻ trong phần này.

I. Cài đặt Livewire

Mình cài đặt Livewire bằng Composer

1
composer require livewire/livewire

Tạo file app.blade.php trong thư mục resources\views\components\layouts với nội dung sau

1
<!DOCTYPE html>
2
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
3
  <head>
4
    <meta charset="utf-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1" />
6
    <title>Livewire Component</title>
7
    <!-- Styles / Scripts -->
8
    <script src="https://cdn.tailwindcss.com"></script>
9
    @livewireStyles
10
  </head>
11
  <body>
12
    {{ $slot }} @livewireScripts
13
  </body>
14
</html>

II. Tạo Livewire Component

Tạo Livewire component UploadFile

1
php artisan livewire:component UploadFile

Hệ thống sẽ tạo ra 2 file mới:

1
COMPONENT CREATED  🤙
2

3
CLASS: app/Livewire/FileUpload.php
4
VIEW:  resources/views/livewire/file-upload.blade.php

III. Chỉnh sửa Class FileUpload.php

Cách sử dụng Livewire 3 để Upload File được hướng dẫn đầy đủ trong documentation của Livewire 3 ở đây: https://livewire.laravel.com/docs/uploads

Class FileUpload.php tạm thời sẽ được cập nhật như sau

1
<?php
2

3
namespace App\Livewire;
4

5
use App\Models\Upload;
6
use Livewire\Attributes\Validate;
7
use Livewire\Component;
8
use Livewire\WithFileUploads;
9

10
class FileUpload extends Component
11
{
12
     use WithFileUploads;  // Sử dụng trait WithFileUploads để xử lý upload file trong Livewire.
13

14
    #[Validate(['files.*' => 'image|max:2048'])] // Thuộc tính Validate dùng để kiểm tra các file upload phải là hình ảnh và dung lượng tối đa 2MB cho mỗi file.
15
    public $files = [];  // Khai báo array cho danh sách các file được chọn upload.
16

17
    public $persistedUploads = []; // Khai báo array cho danh sách các file đã được upload thành công (được lưu trongatabase).
18

19
    /**
20
     * Lưu các file đã chọn vào thư mục lưu trữ và cập nhật cơ sở dữ liệu.
21
     *
22
     * @return void
23
     */
24
    public function save()
25
    {
26
        $this->validate();
27
        $uploadedFiles = $this->files;
28
        $numberOfFiles = count($uploadedFiles); // Đếm số lượng file đã upload
29

30
        foreach ($uploadedFiles as $file) {
31
            // Lấy tên file gốc từ client
32
            $originalFilename = $file->getClientOriginalName();
33
            $originalFilenames[] = $originalFilename; // Thêm tên gốc vào array
34

35
            // 3. Tạo bản ghi trong database cho model Upload:
36
            //    Lưu ý: Chúng ta chỉ cần lưu 'original_filename'.
37
            //    Các thông tin về đường dẫn file gốc và thumbnail sẽ do media-library quản lý.
38
            $uploadEntry = Upload::create([
39
                'original_filename' => $originalFilename,
40
            ]);
41

42
            // 4. Đây là phần quan trọng nhất - Thêm file vào Media Library:
43
            $uploadEntry->addMedia($file) // Thêm file vào Media Library
44
                ->toMediaCollection('images'); // Thêm file vào collection 'images'
45
        }
46

47
        $this->persistedUploads = Upload::latest()->get();
48
        $this->reset('files');
49
        session()->flash('success',  'You have successfully uploaded ' . $numberOfFiles . ' files');
50
    }
51

52
    /**
53
     * Xóa file đã upload khỏi thư mục lưu trữ và cơ sở dữ liệu.
54
     *
55
     * @param  \App\Models\Upload  $upload Model Upload cần xóa.
56
     * @return void
57
     */
58
    public function destroy(Upload $upload) {
59
        $upload->delete();
60
        $this->persistedUploads = Upload::latest()->get();
61
        session()->flash('success', 'You have successfully deleted ' . $upload->original_filename);
62
    }
63

64
    /**
65
     * Hàm được gọi khi component được khởi tạo.
66
     * Lấy danh sách các file đã upload từ cơ sở dữ liệu.
67
     *
68
     * @return void
69
     */
70
    public function mount()
71
    {
72
        $this->persistedUploads = Upload::latest()->get();
73
    }
74

75
    /**
76
     * Render view cho component.
77
     *
78
     * @return \Illuminate\Contracts\View\View
79
     */
80
    public function render()
81
    {
82
        return view('livewire.file-upload', [
83
            'uploads' => $this->persistedUploads
84
        ]);
85
    }
86
}

Giải thích

Hàm save được dùng để lưu thông tin file được chọn vào database và upload load file lên disk.
Hàm destroy được dùng để xóa thông tin file trong database và xóa file trên disk.
Hàm updatePersistedUploads dùng để cập nhật array $persistedUploads - lưu thông tin các file đã upload thành công.

IV. Chỉnh sửa layout file-upload.blade.php

Phần hiển thị giao diện của Livewire component được lưu trong file resources/views/livewire/file-upload.blade.php. Mình sử dụng layout của file layout.blade.php đã sử dụng trong các phần trước, chỉnh sửa lại cho phù hợp với yêu cầu của Livewire.

1
<div>
2
    {{-- Upload File Form --}}
3
    <div class="container mx-auto mt-10 p-6 bg-white rounded-lg shadow-md max-w-md">
4
        <h1 class="text-2xl font-bold mb-6 text-center text-gray-700">Upload File</h1>
5
        <form wire:submit.prevent="save">
6
            <div class="mb-4">
7
                <input type="file" wire:model="files" multiple>
8
            </div>
9

10
            <div class="mb-4">
11
            @error("files.*")
12
                <p class="text-red-500 text-xs mt-2">{{ $message }}</p>
13
            @enderror
14
            </div>
15

16
            <button type="submit"
17
                class="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
18
                Upload
19
            </button>
20
        </form>
21
    </div>
22

23
    {{-- Display Success Message --}}
24
    @if (session("success"))
25
        <div
26
            class="container mx-auto mt-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg shadow-md max-w-md">
27
            <p class="font-bold">Success!</p>
28
            <p>{{ session("success") }}</p>
29
        </div>
30
    @endif
31

32
    {{-- Display Uploaded File Info --}}
33
    @if (count($uploads) > 0)
34
        <div class="container mx-auto mt-10 p-10 bg-white rounded-lg shadow-md max-w-md">
35
            <h2 class="text-xl font-semibold mb-4 text-gray-700">Previously Uploaded Files:</h2>
36
            @foreach ($uploads as $upload)
37
                <ul>
38
                    <li class="flex items-center justify-between mb-4">
39
                        <a class="flex items-center gap-4 py-2" href="{{ $upload->url }}" target="_blank">
40
                            <img src="{{ $upload->thumbnail_url }}" alt="{{ $upload->original_filename }}"
41
                                width="50" height="50">
42
                            <span
43
                                class="text-sm text-gray-700 hover:text-blue-600">{{ $upload->original_filename }}</span>
44
                        </a>
45
                        <button
46
                            type="button"
47
                            onclick="if (confirm('Are you sure you want to delete this file?')) { @this.destroy({{ $upload->id }}) }"
48
                            wire:loading.attr="disabled"
49
                            class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
50
                            Delete
51
                        </button>
52

53
                    </li>
54
                </ul>
55
            @endforeach
56
        </div>
57
    @endif
58
</div>

Phần upload form giờ đã được đơn giản hóa gọn gàng như bên dưới:

1
<form wire:submit.prevent="save">
2
  <input type="file" wire:model="files" multiple />
3
  @error('files.*') <span class="error">{{ $message }}</span> @enderror
4
  <button type="submit">Upload</button>
5
</form>

Khi người dùng bấm nút Upload, form sẽ thực hiện function save được khai báo trong Class FileUpload.php.

Phần nút nhấn để xóa file không còn cần dùng tag <form>, mà có thể thao tác trực tiếp trên tag <button>

1
<button
2
  type="button"
3
  onclick="if (confirm('Are you sure you want to delete this file?')) { @this.destroy({{ $upload->id }}) }"
4
  wire:loading.attr="disabled"
5
  class="rounded bg-red-500 px-4 py-2 font-bold text-white hover:bg-red-700"
6
>
7
  Delete
8
</button>

Khi người dùng bấm nút Delete, một hộp thoại yêu cầu xác nhận sẽ hiện ra. Nếu bấm đồng ý, hàm destroy trong Class FileUpload.php sẽ được thực thi để xóa thông tin file khỏi database và xóa file trên disk.

Kiểm tra thực tế, mọi thứ hoạt động đúng như mong muốn. Các thao tác upload file, hay xóa file đều diễn ra ngay lập tức trong trang hiện tại, không phải tải lại trang như thao tác ở các phần trước.

V. Cải thiện UX

Giao diện hiện tại vẫn chưa thật sự thân thiện: khi bấm upload hay delete, phải đợi 1-2 giây mới nhận lại được phản hồi từ trình duyệt, dễ khiến người dùng bối rối không biết hệ thống có đang xử lý đúng không.

Để khắc phục, chúng ta sử dụng tính năng Loading Indicator của Livewire 3. Cần bổ sung 2 phần khai báo wire:loading vào vị trí tương ứng của form upload và button delete

1
<div wire:loading wire:target="save">Uploading...</div>

1
<div
2
  wire:loading
3
  wire:target="destroy({{ $upload->id }})"
4
  class="text-sm text-gray-500"
5
>
6
  Deleting...
7
</div>

Ngoài ra, cần bổ sung thêm attribute wire:loading.attr="disabled" vào tag input và button để ngăn người dùng chọn file / xóa file trong khi hệ thống đang xử lý yêu cầu trước đó.

Tương tự như FilePond, Livewire 3 cũng hỗ trợ tính năng hiển thị ảnh thumbnail sau khi chọn file bằng cách sử dụng Temporary URL.

1
                 @if ($files)
2
                    @foreach ($files as $file)
3
                        <img src="{{ $file->temporaryUrl() }}">
4
                    @endforeach
5
                @endif

Toàn bộ file file-upload.blade.php giờ sẽ như sau

1
<div>
2
    {{-- Upload File Form --}}
3
    <div class="container mx-auto mt-10 p-6 bg-white rounded-lg shadow-md max-w-md">
4
        <h1 class="text-2xl font-bold mb-6 text-center text-gray-700">Upload File</h1>
5
        <form wire:submit.prevent="save">
6
            <div class="mb-4">
7
                 @if ($files)
8
                    @foreach ($files as $file)
9
                        <img src="{{ $file->temporaryUrl() }}">
10
                    @endforeach
11
                @endif
12
            </div>
13

14
            <div class="mb-4">
15
                <input type="file" wire:model="files" wire:loading.attr="disabled" multiple>
16
            </div>
17

18
            <div wire:loading wire:target="save">Uploading...</div>
19

20
            <div class="mb-4">
21
                @error("files.*")
22
                    <p class="text-red-500 text-xs mt-2">{{ $message }}</p>
23
                @enderror
24
            </div>
25

26
            <button type="submit"
27
                class="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
28
                Upload
29
            </button>
30

31
        </form>
32
    </div>
33

34
    {{-- Display Success Message --}}
35
    @if (session("success"))
36
        <div
37
            class="container mx-auto mt-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg shadow-md max-w-md">
38
            <p class="font-bold">Success!</p>
39
            <p>{{ session("success") }}</p>
40
        </div>
41
    @endif
42

43
    {{-- Display Uploaded File Info --}}
44
    @if (count($uploads) > 0)
45
        <div class="container mx-auto mt-10 p-10 bg-white rounded-lg shadow-md max-w-md">
46
            <h2 class="text-xl font-semibold mb-4 text-gray-700">Previously Uploaded Files:</h2>
47
            @foreach ($uploads as $upload)
48
                <ul>
49
                    <li class="flex items-center justify-between mb-4">
50
                        <a class="flex items-center gap-4 py-2" href="{{ $upload->url }}" target="_blank">
51
                            <img src="{{ $upload->thumbnail_url }}" alt="{{ $upload->original_filename }}"
52
                                width="50" height="50">
53
                            <span
54
                                class="text-sm text-gray-700 hover:text-blue-600">{{ $upload->original_filename }}</span>
55
                        </a>
56
                        <button type="button"
57
                            onclick="if (confirm('Are you sure you want to delete this file?')) { @this.destroy({{ $upload->id }}) }"
58
                            wire:loading.attr="disabled"
59
                            class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
60
                            Delete
61
                        </button>
62

63
                        <div wire:loading wire:target="destroy({{ $upload->id }})" class="text-gray-500 text-sm">
64
                            Deleting...
65
                        </div>
66
                    </li>
67
                </ul>
68
            @endforeach
69
        </div>
70
    @endif
71
</div>

Form upload bằng Livewire 3 giờ đã trực quan và thân thiện hơn hẳn so với trước đó.

VI. Upload ngay sau khi chọn file

Chúng ta có thể upload file ngay sau khi chọn file mà không cần phải bấm nút Upload bằng cách sửa lại file file-upload.blade.php

Bỏ phần khai báo <form></form>
Bỏ luôn phần hiển thị thumbnai vì ảnh được upload ngay sau khi chọn, không còn cần phải xem thumbnail
Bỏ <button></button> vì không cần phải nhấn nút nữa.

1
{{-- Upload File Form --}}
2
<div class="container mx-auto mt-10 max-w-md rounded-lg bg-white p-6 shadow-md">
3
  <h1 class="mb-6 text-center text-2xl font-bold text-gray-700">Upload File</h1>
4

5
  <div class="mb-4">
6
    <input
7
      type="file"
8
      wire:model="files"
9
      wire:loading.attr="disabled"
10
      multiple
11
    />
12
  </div>
13

14
  <div wire:loading wire:target="files">Uploading...</div>
15

16
  <div class="mb-4">
17
    @error("files.*")
18
    <p class="mt-2 text-xs text-red-500">{{ $message }}</p>
19
    @enderror
20
  </div>
21
</div>

Bên file class FileUpload.php đổi tên hàm save thành updatedFiles, nội dung giữ như cũ

1
    public function updatedFiles()
2
    {
3
        $this->validate();
4
        $uploadedFiles = $this->files;
5
        $numberOfFiles = count($uploadedFiles); // Đếm số lượng file đã upload
6

7
        foreach ($uploadedFiles as $file) {
8
            // Lấy tên file gốc từ client
9
            $originalFilename = $file->getClientOriginalName();
10
            $originalFilenames[] = $originalFilename; // Thêm tên gốc vào array
11

12
            // 3. Tạo bản ghi trong database cho model Upload:
13
            //    Lưu ý: Chúng ta chỉ cần lưu 'original_filename'.
14
            //    Các thông tin về đường dẫn file gốc và thumbnail sẽ do media-library quản lý.
15
            $uploadEntry = Upload::create([
16
                'original_filename' => $originalFilename,
17
            ]);
18

19
            // 4. Đây là phần quan trọng nhất - Thêm file vào Media Library:
20
            $uploadEntry->addMedia($file) // Thêm file vào Media Library
21
                ->toMediaCollection('images'); // Thêm file vào collection 'images'
22
        }
23

24
        $this->updatePersistedUploads();
25
        $this->reset('files');
26
        session()->flash('success',  'You have successfully uploaded ' . $numberOfFiles . ' files');
27
    }

Hàm updatedFiles sẽ tự động được thực thi mỗi khi thuộc tính files được cập nhật - updated (khi người dùng chọn file).

VI. Lời kết

Sau gần 3 tuần chinh chiến, mình đã hoàn thành 10 phần khám phá cách xử lý file upload trong Laravel – bắt đầu từ các khái niệm cơ bản cho đến các kỹ thuật nâng cao như sử dụng Amazon S3, tạo thumbnail, tích hợp Spatie Media Library, FilePond và Livewire 3.

Trong phần cuối này, nhờ sự góp mặt của Livewire 3, tính năng upload đã được nâng cấp thân thiện hơn:

Upload file ngay sau khi chọn, không cần nhấn nút “Submit”
Hiển thị thông báo trong khi upload và xác nhận khi xóa file
Cập nhật danh sách file theo thời gian thực
Không cần phải reload lại trang mỗi khi upload hay xóa file

🔗 Mã nguồn

Tham khảo mã nguồn sử dụng trong [Phần 10] ở đây: https://github.com/10h30/laravel-file-upload-series/tree/part-10-livewire-upload

Mục đích của series này là để mình ôn lại kiến thức Laravel và học thêm những công cụ mới như Spatie Media Library, Livewire,.. Việc viết blog hướng dẫn vừa giúp mình hiểu sâu hơn, vừa có thể chia sẻ lại cho những bạn mới đang tìm hiểu về Laravel giống mình.

Trong tương lai, mình dự định sẽ thực hiện thêm nhiều series khác về Laravel và các công nghệ liên quan như Livewire, Alpine.js, Inertia, … Nếu bạn thấy hứng thú, hãy theo dõi blog thuanbui.me để không bỏ lỡ các bài viết tiếp theo nhé!

Cảm ơn bạn đã đồng hành đến cuối series!