1. 11:52 10/10/2026
Bài viết này sẽ giới thiệu một kiến trúc chung cho việc upload file trong cả React Web và React Native, giúp các dự án chia sẻ logic while vẫn giữ được tính năng riêng của mỗi nền tảng.
Đầu tiên, chúng ta cần một state management trung tâm, Context API là lựa chọn nhẹ và có thể mở rộng. Tạo một Context provider gọi là FileUploadContext, chứa các trạng thái như fileQueue, progress, error, và các hàm uploadFile, cancelUpload.
Sau đó, sử dụng React Query để quản lý vòng đời request, cache kết quả và tự động refresh token nếu cần. Với React Query, mỗi lần upload sẽ được ghi lại trong cache, cho phép truy cập nhanh chóng từ bất kỳ component nào trên web hoặc mobile.
Trong React Native, vì giao tiếp với hệ thống file native, chúng ta có thể tạo một custom hook useFileUploader. Hook này sẽ thực hiện việc chuẩn bị multipart/form-data, thiết lập headers, và trả về promise. Khi gọi uploadFile từ context, hook sẽ được truyền vào, nên logic chung được tách rời.
Đối với việc xử lý lỗi, chúng ta nên chuẩn hoá mã lỗi HTTP và thông báo lỗi tùy ngữ cảnh, đồng thời hiển thị UI toast hoặc dialog trên cả hai nền tảng.
Ví dụ thực tế: trên web, một component FileUploader nhận input[type=file], khi người dùng chọn file, nó dispatch một action vào context, context sẽ cập nhật fileQueue và bắt đầu upload qua React Query. Trong React Native, cùng component (được viết bằng Expo) sẽ gọi useFileUploader, nhận kết quả và cập nhật UI. Cả hai đều sử dụng cùng một API backend, vì vậy không cần viết hai đoạn code khác nhau.
Lưu ý quan trọng: luôn đặt timeout cho request, và khi upload thành công, xóa file tạm trong cache để tránh lãng phí bộ nhớ.
Cuối cùng, việc tách biệt logic upload khỏi UI giúp dự án dễ bảo trì và mở rộng, đặc biệt khi cần hỗ trợ thêm các framework như Flutter hoặc Svelte.