File Upload trong Laravel - [Phần 3] Upload cùng lúc nhiều file

1
<form action="{{ route("upload.store") }}" method="POST" enctype="multipart/form-data" class="space-y-4">
2
            @csrf
3
            <div>
4
                <label for="files" class="block text-sm font-medium text-gray-700 mb-1">Choose file</label>
5
                <input type="file" name="files[]" id="files" multiple
6
                    class="block w-full text-sm text-gray-500
7
                              file:mr-4 file:py-2 file:px-4
8
                              file:rounded-full file:border-0
9
                              file:text-sm file:font-semibold
10
                              file:bg-blue-50 file:text-blue-700
11
                              hover:file:bg-blue-100" />
12
            </div>
13
            <button type="submit"
14
                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">
15
                Upload
16
            </button>
17
        </form>

1
        // Tạo biến mới để lưu đường dẫn và tên file gốc
2
        $storedFilePaths = []; // Array lưu đường dẫn các file đã lưu thành công
3
        $originalFilenames = []; // Array lưu tên gốc của các file
4
        $uploadedFiles = $request->file('files'); // Lấy array các đối tượng file đã upload
5
        $numberOfFiles = count($uploadedFiles); // Đếm số lượng file đã upload
6

7
        // Lặp qua từng file trong array $uploadedFiles
8
        foreach ($uploadedFiles as $file) {
9

10
            // Lấy tên file gốc từ client
11
            $originalFilename = $file->getClientOriginalName();
12
            $originalFilenames[] = $originalFilename; // Thêm tên gốc vào array
13

14
            // Chuẩn bị các phần của tên file
15
            $filenameWithoutExtension = pathinfo($originalFilename, PATHINFO_FILENAME); // Lấy tên file không có phần mở rộng
16
            $extension = $file->getClientOriginalExtension(); // Lấy phần mở rộng
17
            $directory = 'uploads'; // Thư mục lưu file trên disk
18
            $disk = 'public'; // Disk public sẽ sử dụng (được định nghĩa trong config/filesystems.php)
19

20
            // Xác định tên file duy nhất
21
            $finalFilename = $originalFilename; // Bắt đầu với tên gốc
22
            $counter = 1;
23

24
            // Kiểm tra xem file đã tồn tại chưa
25
            while (Storage::disk($disk)->exists($directory . '/' . $finalFilename)) {
26
                // Nếu tồn tại, tạo tên mới với hậu tố 1,2,3,...
27
                $finalFilename = $filenameWithoutExtension . '-' . $counter . '.' . $extension;
28
                $counter++;
29
            }
30

31
            // Lưu file bằng storeAs với tên file mới
32
            $storedFilePath = $file->storeAs($directory, $finalFilename, $disk); // Trả về đường dẫn tương đối: 'uploads/ten_file_cuoi_cung.jpg'
33
            $storedFilePaths[] = $storedFilePath; // Thêm đường dẫn file đã lưu vào array $storedFilePaths
34
        }
35

36
        // Chuyển hướng về trang trước đó
37
        return back()->with('success', 'You have successfully uploaded ' . $numberOfFiles . ' files')
38
            // Gửi kèm array các đường dẫn file đã lưu vào session flash data với key 'stored_paths'
39
            ->with('stored_paths', $storedFilePaths)
40
            // Gửi kèm array các tên file gốc vào session flash data với key 'original_filenames'
41
            ->with('original_filenames', $originalFilenames);

1
            @if (session("stored_paths") && is_array(session("stored_paths")))
2
                <div class="mt-4">
3
                    <p>Uploaded Files:</p>
4
                     {{-- Lặp qua array các đường dẫn file đã lưu. $index là chỉ số, $path là đường dẫn --}}
5
                    @foreach (session("stored_paths") as $index => $path)
6
                        <div class="border p-4 mt-2">
7
                            <p class="text-sm text-gray-600">Original Filename:
8
                                {{ session("original_filenames")[$index] }}
9
                            </p>
10
                            <p class="text-sm text-gray-600">Stored Path: {{ $path }}</p>
11
                            <img src="{{ $path }}" alt="Uploaded Image {{ $index + 1 }}"
12
                                class="mt-2 rounded max-w-full h-auto border">
13
                        </div>
14
                    @endforeach
15
                </div>
16
            @endif