1. 19:13 09/10/2026
## Xây dựng hệ thống upload file có khả năng mở rộng trong React và React Native
Khi bạn cần xử lý upload file trong các ứng dụng web và di động, việc đảm bảo quy trình này vừa mạnh mẽ vừa thân thiện với người dùng là rất quan trọng. Dưới đây là hướng dẫn thực hành kết hợp các mẫu thiết kế đã được chứng minh, giúp bạn xây dựng một hệ thống upload file có khả năng mở rộng, hoạt động đồng nhất trên React và React Native.
### 1. Xác định các thành phần chính
- **UI Upload Component** – Khu vực drag‑and‑drop, danh sách file và thanh tiến trình.
- **Hook validation** – Logic kiểm tra kích thước, loại file và các quy tắc nghiệp vụ.
- **Progress Service** – Ghi lại và đồng bộ hóa trạng thái upload qua nhiều thành phần.
- **API Layer** – Bao bọc các yêu cầu mạng, xử lý retry và error.
- **State Management (Context)** – Chia sẻ trạng thái upload hiện tại giữa các component mà không cần truyền prop nhiều lần.
### 2. Xây dựng custom hooks cho validation
Tạo một hook duy nhất, ví dụ `useFileValidation`, mà bạn có thể tái sử dụng trên cả web và mobile. Hook này nhận danh sách file và trả về một đối tượng chứa file đã được validate, các lỗi và một hàm helper để clear errors.
```js
function useFileValidation(files, maxSizeMB, acceptedTypes) {
const errors = [];
const validFiles = files.filter(file => {
if (file.size > maxSizeMB * 1024 * 1024) {
errors.push(`${file.name} vượt quá giới hạn kích thước`);
return false;
}
if (!acceptedTypes.includes(file.type)) {
errors.push(`${file.name} không phải là loại file được chấp nhận`);
return false;
}
return true;
});
return { validFiles, errors };
}
```
**Tại sao cách này hiệu quả:** Logic validation được tập trung, giúp bạn dễ dàng bảo trì và đảm bảo cùng một quy tắc được áp dụng trên mọi nền tảng.
### 3. Theo dõi tiến trình và hiển thị UI phản hồi
Sử dụng một Context đơn giản (ví dụ: `UploadContext`) để lưu trữ trạng thái tổng thể của các tác vụ upload. Các component con có thể subscribe để biết khi nào trạng thái thay đổi, giúp bạn hiển thị thanh tiến trình, thông báo thành công hoặc error một cách dễ dàng.
```js
const UploadContext = React.createContext();
function UploadProvider({ children }) {
const [uploads, setUploads] = React.useState({});
const addUpload = (id, file) => {
setUploads(prev => ({ ...prev, [id]: { file, progress: 0, status: 'pending' } }));
};
const updateProgress = (id, progress) => {
setUploads(prev => ({ ...prev, [id]: { ...prev[id], progress, status: progress === 100 ? 'completed' : 'uploading' } }));
};
return <UploadContext.Provider value={{ uploads, addUpload, updateProgress }}>{children}</UploadContext.Provider>;
}
```
**Mẹo:** Sử dụng `requestAnimationFrame` hoặc các thư viện như `react-progressbar` để đảm bảo thanh tiến trình hiển thị mượt mà trên cả hai nền tảng.
### 4. Tích hợp server một cách nhất quán
Bọc các yêu cầu HTTP trong một service nhỏ, ví dụ `uploadAPI.upload(file, onProgress)`. Service này có thể sử dụng `axios` với `FormData` trên web và `fetch` với `multipart/form-data` trên React Native. Xử lý retry với exponential backoff và các error cụ thể (ví dụ: 413, 415) để cung cấp cho người dùng phản hồi ý nghĩa.
### 5. Tối ưu hóa quy trình upload cho từng nền tảng
- **Web**: Sử dụng HTML `<input type="file">` để truy cập nhanh, hỗ trợ drag‑and‑drop và hiển thị các API `ProgressEvent` tích hợp sẵn.
- **React Native**: Sử dụng các thư viện như `react-native-document-picker` hoặc `react-native-image-picker` để chọn file, sau đó truyền đối tượng file đã chọn vào cùng một hook validation và progress service.
### 6. Các bước tiếp theo và mở rộng
- **Xử lý nhiều file song song**: Sử dụng `Promise.all` cùng với giới hạn concurrency thông qua `semaphore` để tránh quá tải.
- **Xử lý phía server**: Lưu trữ file trong bộ nhớ đệm tạm thời, sử dụng CDN và cung cấp các endpoint để quản lý file.
- **Kiểm tra lỗi**: Viết các unit test cho hook validation và integration test cho flow upload hoàn chỉnh.
### 7. Kết luận
Bằng cách tập trung validation, progress tracking và logic upload server vào các module có thể tái sử dụng, bạn sẽ có được một nền tảng vững chắc giúp dễ dàng mở rộng trong tương lai. Quy trình này giữ cho mã nguồn đồng nhất giữa React web và React Native, đồng thời cung cấp cho người dùng trải nghiệm upload file mượt mà và đáng tin cậy.
---
**Danh sách kiểm tra nhanh**
- [ ] Xác định một hook validation duy nhất
- [ ] Tạo một Context để quản lý trạng thái upload
- [ ] Xây dựng một service API có khả năng retry
- [ ] Thiết kế một component UI phản hồi tốt cho cả web và mobile
- [ ] Viết các test unit và integration cho các thành phần chính