← Quay lại mục lục

Bài 23 — Multi-file Upload

Upload nhiều file với count limit (5), per-file size (3MB), total size (10MB), file types.

Khó #file-upload #multiple #boundary #cumulative-size #validation

📎 Bài 23: Multi-file Upload

Form upload nhiều file (CV, hồ sơ) với validate per-file size + total size + count. Bài tập về file array validation + cumulative size.

📋 Quy tắc

Thuộc tínhGiới hạn
Số file tối đa5 file
Tổng dung lượng tối đa10 MB
Dung lượng / file3 MB
Loại file.pdf, .doc, .docx, .jpg, .png

🎯 Quy tắc tương tác

  1. Click "Add files" → mở file picker (multiple).
  2. Drag & drop file vào dropzone.
  3. Mỗi file hiển thị: tên, size, X button để xóa.
  4. Counter: "X / 5 files · Y MB / 10 MB".
  5. Validate ngay khi add file:
    • File > 3 MB → reject + message.
    • Tổng > 10 MB sau khi add → reject file đó + message.
    • Số file vượt 5 → reject phần dư + message.
    • Loại không hợp lệ → reject + message.
  6. Submit chỉ khi có ít nhất 1 file hợp lệ.

📝 Message expected

Trường hợpMessage
File quá lớnFile "X" exceeds 3 MB limit
Tổng quá lớnTotal size exceeds 10 MB
Quá 5 fileMaximum 5 files allowed
Loại không hợp lệFile type not allowed
Submit trốngPlease add at least one file
Submit thành côngX files uploaded successfully

🎯 Yêu cầu

  1. Test boundary count: 5/6 files.
  2. Test boundary size per-file: 3MB ± 1 byte.
  3. Test total size: 10MB ± nhỏ.
  4. Test mix: vài file hợp lệ + 1 file quá lớn.
  5. Test xóa file: counter, total size update đúng?
  6. Test loại file: .exe, .zip → phải reject.
⚠️ Bug được cài cắm: total size check không cộng dồn đúng, count limit off-by-one, file type check (extension only), counter update khi remove.
🔐

Vui lòng đăng nhập để nộp bài.

Đăng nhập
🔐

Tab dành cho giảng viên

Tab này chứa danh sách các lỗi đã cài cắm trong form. Vui lòng nhập mã giảng viên để mở khóa. Mã sẽ ghi nhớ trong phiên làm việc — chỉ cần nhập 1 lần cho cả 3 bài.