Ask how to resolve persistent high memory usage when reading files from ArrayBuffer in web application

You’ve written logic to convert a file to an ArrayBuffer and process it when the user selects it via a file picker. Initially, you tried to do this using the FileReader API, but you ran into an issue where the memory usage kept increasing and didn’t decrease over time. You changed your code to use Blob.prototype.arrayBuffer() as an alternative, but this still didn’t solve the memory usage issue.

I implemented it using the code below.

async function pickAndReadFileAsArrayBuffer() {
  try {
    // openFilePicker를 호출하여 파일 선택기를 엽니다.
    const [fileHandle] = await window.showOpenFilePicker();
 
    // 선택된 파일을 가져옵니다.
    const file = await fileHandle.getFile();
 
    // FileReader를 사용하여 파일을 ArrayBuffer로 읽습니다.
    const reader = new FileReader();
 
    reader.onload = (e) => {
      const arrayBuffer = e.target.result;
      // ArrayBuffer 처리 로직, 예를 들어 콘솔에 출력
      console.log(arrayBuffer);
 
      // 처리가 완료되면, 이벤트 핸들러를 해제하여 FileReader 객체에 대한 참조를 제거합니다.
      reader.onload = null;
      reader.onerror = null;
    };
 
    reader.onerror = (e) => {
      console.error('File reading failed', e);
 
      // 오류가 발생한 경우에도 이벤트 핸들러를 해제합니다.
      reader.onload = null;
      reader.onerror = null;
    };
 
    reader.readAsArrayBuffer(file);
  } catch (err) {
    // 사용자가 파일 선택을 취소하거나 오류가 발생한 경우
    console.error(err.name, err.message);
  }
}
 
// 함수 호출하여 파일 선택과 ArrayBuffer로의 읽기 과정을 실행
pickAndReadFileAsArrayBuffer();

async function pickAndReadFileInChunks() {
  try {
    // 파일 선택기를 엽니다.
    const [fileHandle] = await window.showOpenFilePicker();
    const file = await fileHandle.getFile();

    const chunkSize = 1024 * 1024; // 1MB
    let startPosition = 0;

    while (startPosition < file.size) {
      const endPosition = startPosition + chunkSize;
      const chunk = file.slice(startPosition, endPosition);
      const arrayBuffer = await chunk.arrayBuffer();
      // 여기서 각 chunk의 ArrayBuffer를 처리합니다.
      console.log(arrayBuffer);
    clearInterval(arrayBuffer)

      startPosition += chunkSize;
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
}

// 함수 호출하여 파일 선택과 분할 읽기 과정을 실행
pickAndReadFileInChunks();