Quy trình upload file thường là một trong những tính năng phức tạp nhất trong bất kỳ ứng dụng web hoặc di động nào. Dù bạn đang xây dựng một công cụ chia sẻ tài liệu nhanh chóng hay một ứng dụng chỉnh sửa ảnh toàn diện, một quy trình upload được thiết kế tốt có thể tạo nên sự khác biệt giữa trải nghiệm người dùng mượt mà và sự thất vọng do lỗi không rõ ràng hoặc giao diện chậm. **1. Xác định các yêu cầu chính** • Hỗ trợ nhiều định dạng tệp (ví dụ: PNG, JPEG, PDF, DOCX) với xác thực nghiêm ngặt. • Hiển thị tiến trình tải lên thời gian thực cho người dùng. • Xử lý các tình huống ngoại lệ như lỗi mạng, lỗi máy chủ hoặc tệp quá lớn. • Duy trì trạng thái đồng bộ giữa React Web và React Native (ví dụ: chia sẻ danh sách tải lên đang chờ xử lý với một API chung). **2. Tạo các hook tùy chỉnh có thể tái sử dụng** Tạo một bộ hook chính để xử lý logic tải lên: - `useFileUpload`: trả về trạng thái (đang chờ xử lý, đã hoàn thành, lỗi), hàm tải lên và hàm hủy. - `useUploadProgress`: theo dõi sự kiện `progressEvent` và chuyển đổi nó thành phần trăm. - `useAllowedFiles`: xác thực loại tệp, kích thước và tên. Các hook này có thể được nhập vào cả ứng dụng web và ứng dụng di động, đảm bảo mã nguồn được thống nhất. **3. Sử dụng Context API để đồng bộ trạng thái toàn cục** Bao bọc ứng dụng trong một `UploadContext` cung cấp: - Danh sách các tác vụ tải lên đang chờ xử lý. - Một bộ phát sự kiện để thông báo cho các thành phần khi một tác vụ hoàn tất hoặc thất bại. Bằng cách này, một thành phần ở bất kỳ đâu (thanh điều hướng, danh sách tệp hoặc thông báo toast) đều có thể hiển thị trạng thái tải lên hiện tại mà không cần truyền nhiều lần. **4. Tận dụng React Query để đồng bộ dữ liệu phía máy chủ** Định nghĩa một mutation trong React Query xử lý yêu cầu tải lên thực sự (ví dụ: gửi multipart/form-data đến API). - Sử dụng `onMutate` để thêm tác vụ tải lên vào danh sách đang chờ xử lý trong Context. - Sử dụng `onSuccess` để thay thế URL tệp từ phản hồi và thông báo cho UI. - Sử dụng `onError` để ghi lại lỗi và đặt tác vụ tải lên về trạng thái lỗi. React Query tự động xử lý việc làm mới dữ liệu, bộ nhớ đệm và đồng bộ hóa giữa các tab, giúp bạn không cần phải viết mã đồng bộ hóa trạng thái thủ công. **5. Xây dựng giao diện người dùng có khả năng tái sử dụng** Tạo một thành phần `UploadDropzone` hỗ trợ cả chế độ kéo và thả (web) và chế độ tích hợp với hệ thống tệp gốc (di động). - Hiển thị danh sách các tệp đã chọn, thanh tiến trình và thông báo lỗi. - Cung cấp các prop để tùy chỉnh giao diện (ví dụ: màu sắc thương hiệu, văn bản). Vì thành phần này được xây dựng dựa trên các hook tùy chỉnh, nên nó sẽ tự động phản hồi với hành vi giống nhau trên cả hai nền tảng. **6. Xử lý lỗi một cách hiệu quả** - Phân loại lỗi: lỗi mạng (thử lại), lỗi xác thực (hiển thị cho người dùng) và lỗi máy chủ (ghi lại). - Cung cấp một nút “Thử lại” cho các tác vụ tải lên không thành công sau khi đã xác nhận lại. **7. Các mẹo tối ưu hóa** - Giới hạn số lượng tác vụ tải lên đồng thời (ví dụ: chỉ 3 tác vụ) để tránh quá tải API. - Nén hình ảnh trước khi tải lên trên thiết bị di động để giảm thời gian truyền dữ liệu. - Sử dụng `react-native-fs` hoặc `fetch` tùy thuộc vào nền tảng để có hiệu suất tốt nhất. Bằng cách kết hợp các hook tùy chỉnh, Context API và React Query, bạn sẽ có một quy trình upload vừa linh hoạt vừa dễ bảo trì, hoạt động đồng bộ trên cả React Web và React Native. Quy trình này có thể dễ dàng mở rộng khi bạn cần thêm các tính năng như xem trước tệp, chuyển đổi định dạng hoặc chia sẻ tệp cộng tác.