업로드 상황에 따른 Progress 구현

 

기존에 expo-file-System의 uploadAsync를 사용해 대용량 데이터를  스트리밍 방식으로 진행해서 업로드를 했었음.

여기에 프로그레스를 적용해 진행률 확인 구현해야함

---

 

프로그레스를 구현하려면 uploadAsync 가 아닌  createUploadTask API를 활용해 파일 업로드를 스트리밍 방식으로 진행, 업로드 도중 진행률(progress)을 콜백을 통해 계산하여 UI 상태를 업데이트한다. 업로드가 완료된 후에는 응답 상태를 확인해 성공 여부를 판단.

 

1. 업로드 작업 생성

const uploadTask = FileSystem.createUploadTask(
  uploadUrl,
  fileUri,
  {
    httpMethod: "PUT",
    uploadType: FileSystem.FileSystemUploadType.BINARY_CONTENT,
    headers: {
      "Content-Type": fileType,
    },
  },
  // 진행률 콜백: 각 파일의 전송 바이트 정보를 받아서 진행률 계산
  ({ totalBytesSent, totalBytesExpectedToSend }) => {
    // 현재 파일에 대한 진행률 (0 ~ 1)
    const fileProgress = totalBytesSent / (totalBytesExpectedToSend || 1);
    const overallProgress = Math.round(
      ((index + fileProgress) / videoUrl.length) * 100
    );
    setProgress(overallProgress);
  }
);

매개변수 

1. uploadUrl
   • 업로드할 대상 URL. 지금은 서버에서 발급받은 presigned URL이 사용
2. fileUri
   • 로컬 파일 시스템 내 업로드할 파일의 경로
3. 옵션 객체 (세 번째 인자)
   • httpMethod:
     • 파일 업로드에 사용할 HTTP 메서드를 지정. 여기서는 "PUT"을 사용.
   • uploadType:
     • 업로드 타입을 지정. FileSystem.FileSystemUploadType.BINARY_CONTENT는 파일 데이터를 바이너리 형태로 스트리밍 방식 업로드할 때 사용.
   • headers:
     • 업로드 요청 시 전송할 HTTP 헤더를 설정. Content-Type 헤더를 통해 파일의 MIME 타입(fileType)을 지정.
4. 진행률 콜백 (네 번째 인자)
   • 이 콜백 함수는 업로드 작업이 진행되는 동안 주기적으로 호출
   • 매개변수로 totalBytesSent와 totalBytesExpectedToSend를 받으며, 이를 통해 현재 파일의 전송 진행 상황을 계산

2. 진행률 계산 로직

 

({ totalBytesSent, totalBytesExpectedToSend }) => {
  // 현재 파일에 대한 진행률 (0 ~ 1)
  const fileProgress = totalBytesSent / (totalBytesExpectedToSend || 1);
  const overallProgress = Math.round(
    ((index + fileProgress) / videoUrl.length) * 100
  );
  setProgress(overallProgress);
}

 

1. 파일 단위 진행률 계산 (fileProgress)
   • totalBytesSent를 totalBytesExpectedToSend로 나누어 현재 파일에 대해 전송된 바이트의 비율을 구함.
   • totalBytesExpectedToSend || 1는 분모가 0이 되는 상황을 방지하기 위한 안전장치
   • 결과 값은 0에서 1 사이의 소수점 값입니다. 예를 들어, 50% 진행되었다면 0.5가 된다.
2. 전체 진행률 계산 (overallProgress)
   • 여러 파일을 업로드하는 경우, 현재 파일의 순서(index)와 파일 단위 진행률(fileProgress)을 사용하여 전체 업로드의 진행률을 계산.
   • ((index + fileProgress) / videoUrl.length) * 100
     • index는 현재 업로드 중인 파일의 순번(0부터 시작)이고, videoUrl.length는 총 파일 개수.
   • Math.round(...)를 사용하여 소수점 없이 정수로 반올림한 값을 최종 진행률(%)로 만든다..
3. 상태 업데이트
   • 계산된 overallProgress 값을 setProgress를 호출하여 상태 업데이트. 이 값은 UI의 진행률 바에 반영되어 사용자가 현재 업로드 상태를 확인할 수 있도록 처리.

콘솔값을 보면 fileProgress는 파일당 전송된 비율, 파일 하나가1이 되면 다른 파일이 0.~~ 부터 시작된다 

overallProgress 에는 전체 진행률을 볼 수 있다. 

3. 업로드 실행 및 결과 처리

const uploadResult = await uploadTask.uploadAsync();
if (uploadResult?.status !== 200 && uploadResult?.status !== 204) {
  throw new Error(
    `Upload failed for ${file.filename}: ${uploadResult?.status}`
  );
}

 

 

1. 업로드 실행
   • uploadTask.uploadAsync()를 호출하여 업로드를 비동기로 실행.
   • await 키워드를 사용해 업로드 작업이 완료될 때까지 기다리는중.
   • uploadResult에는 서버로부터의 응답 결과가 저장.
2. 상태 코드 확인
   • 업로드 결과의 HTTP 상태 코드가 200(성공) 또는 204(No Content, 성공을 의미함)가 아니면 업로드에 실패한 것으로 간주.
   • 만약 실패 상태라면 throw new Error(...)를 통해 예외를 발생시켜 이후의 처리를 중단하고 오류를 전달.

결론

expo-file-system에 도움을 많이 받는 중, 캐시파일 삭제, 스트리밍 업로드 부터 프로그레스까지  라이브러리 찾아보면서 구현하는게 어렵긴 하다. gpt의 도움을 받고있긴 하지만 좀 제대로 분석하고 이해하려고 노력해야할듯 싶다. 

 

---

** 도움및 출처 **

https://stackoverflow.com/questions/77787306/how-to-show-upload-progress-using-expo-filesystem-uploadasync

How to show upload progress using Expo FileSystem.uploadAsync

https://docs.expo.dev/versions/latest/sdk/filesystem/#filesystemnetworktaskprogresscallback

FileSystem