[javascript] 바이너리 데이터를 이용하여 파일 업로드시 진행 상태 표시하기

12 Dec 2023

javascript

파일을 업로드하는 웹애플리케이션에서 진행 상태를 실시간으로 표시하기 위해 바이너리 데이터와 함께 진행 상태를 업데이트할 수 있는 JavaScript를 사용할 수 있습니다. 이를 통해 사용자는 파일 업로드의 진행 상황을 실시간으로 확인할 수 있고, 더 나은 사용자 경험을 제공할 수 있습니다.

1. HTML 파일 업로드 입력 필드 추가

우선 HTML 파일 업로드 입력 필드를 추가해야 합니다. 아래와 같이 <input type="file"> 엘리먼트를 사용하여 파일을 선택할 수 있는 입력 필드를 생성합니다.

<input type="file" id="fileInput">
<button onclick="uploadFile()">Upload</button>

2. JavaScript로 파일 업로드 구현

다음으로 JavaScript를 사용하여 파일 업로드 기능을 구현합니다. 아래 코드는 fetch API를 사용하여 파일을 업로드하는 예제입니다.

async function uploadFile() {
  const fileInput = document.getElementById('fileInput');
  const file = fileInput.files[0];
  const url = 'https://example.com/upload';
  const formData = new FormData();
  formData.append('file', file);

  const response = await fetch(url, {
    method: 'POST',
    body: formData,
  });

  if (response.ok) {
    alert('File uploaded successfully');
  } else {
    alert('Error uploading file');
  }
}

3. 진행 상태 표시

파일 업로드 중인 진행 상태를 실시간으로 표시하기 위해 fetch API에 progress 이벤트 핸들러를 추가할 수 있습니다. 아래와 같이 코드를 수정하여 진행 상태를 표시할 수 있습니다.

async function uploadFile() {
  // ... 위와 같은 코드

  const response = await fetch(url, {
    method: 'POST',
    body: formData,
  });

  if (response.ok) {
    alert('File uploaded successfully');
  } else {
    alert('Error uploading file');
  }
}

function trackUploadProgress(event) {
  if (event.lengthComputable) {
    const percentComplete = (event.loaded / event.total) * 100;
    console.log('Upload progress: ' + percentComplete + '%');
  }
}

// 파일 업로드 진행 상태를 추적
fetch(url, {
  method: 'POST',
  body: formData,
}).then(response => {
  return response.body.getReader().read();
}).then(reader => {
  return reader;
}).then(trackUploadProgress);

4. 완성

이렇게 하면 파일 업로드 동안의 진행 상태를 실시간으로 표시할 수 있습니다. 사용자는 파일 업로드가 얼마나 진행되었는지를 확인할 수 있으며, 보다 나은 사용자 경험을 얻을 수 있습니다.