Cách upload folder lên server

Chào bạn, để có thể upload được một folder lên server thì chúng ta cần xác định bài toán trước. Bài toán này ta có thể chia ra 2 vấn đề nhỏ: Upload 1 folder và upload từng file trong folder đó. Mình có thể gợi ý giải pháp như thế này: 🗃️ Upload từng file nhỏ Chúng ta sẽ tìm cách để browser gửi file trực tiếp lên S3, chứ không nên gửi qua Backend, rồi Backend lại gửi qua S3 như vậy rất nặng và tốn băng thông. Các bước thực hiện như sau: 1. Frontend gửi request tới Backend để lấy presigned URL từ S3 (kèm theo các thông tin như muốn upload vào folder nào) 2. Backend tạo 1 record trong Database với trạng thái là INITIAL 3. Backend gửi request tới AWS bằng AWS SDK để lấy presigned URLs và phản hồi. 4. Frontend lấy thông tin từ presigned URL và bắt đầu gửi upload request tới S3. 5. Khi upload thành công, Frontend commit trạng thái là UPLOADED tới 1 endpoint của Backend, backend update record đã tạo lúc nãy. Xong 1 file. 6. Nếu upload lỗi, gửi 1 request tới Backend để “dọn dẹp” record đã tạo lúc nãy. Nếu file upload quá lớn, hãy áp dụng các kĩ thuật như transfer acceleration (tham khảo bên dưới). 🎶 Upload cả folder Khi upload cả folder thì chúng ta thường để ý tới hiệu suất của API, nên có thể áp dụng xử lý bất đồng bộ để giảm bớt blocking time. 1. Frontend chọn cả folder sau đó lấy các thông tin như folder name, targer folder, danh sách file trong folder… và gửi về Backend 2. Backend gửi request tới AWS để lấy presigned URLs. Nếu số lượng file nhiều thì có thể tách thành từng chunk và thực hiện 1 cách bất đồng bộ (trong JS có Promise.all()). Sau đó gửi thông tin về cho FE (ở đây có thể áp dụng cấu trúc dữ liệu Map<string, FileUploadInfo>) 3. Frontend upload từng file 1 lên S3. 4. Frontend upload xong thì gửi 1 request (có thể chunk lại) tới Backend để commit trạng thái cho các file đã upload. 5. Upload xong folder thì commit trạng thái cho folder, file nào bị lỗi thì có thể yêu cầu upload lại. Chúc bạn thành công! 👾 Tài nguyên tham khảo: - https://docs.aws.amazon.com/AmazonS3/latest/userguide/example_s3_Scenario_PresignedUrl_section.html - https://aws.amazon.com/blogs/compute/uploading-large-objects-to-amazon-s3-using-multipart-upload-and-transfer-acceleration/ - https://stackoverflow.com/questions/55608472/how-can-we-simply-upload-folder-in-reactjs