자바스크립트 Observers를 활용한 비동기 파일 업로드 처리

08 Nov 2023

javascript

개요

많은 웹 애플리케이션에서 파일 업로드는 중요한 기능 중 하나입니다. 사용자는 웹 페이지에서 파일을 선택하고 서버로 전송해야 합니다. 이러한 파일 업로드 과정은 일반적으로 비동기로 처리되어 사용자 경험을 향상시킵니다. 이번 기술 블로그에서는 자바스크립트 Observers를 활용하여 비동기 파일 업로드 처리를 구현하는 방법을 알아보겠습니다.

Observers란?

Observers는 자바스크립트에서 제공하는 기능으로, 무언가가 변경되거나 이벤트가 발생했을 때 알림을 받을 수 있는 객체입니다. DOM 요소의 변경, 속성의 변화 등 다양한 이벤트를 감지하여 적절한 처리를 수행할 수 있습니다.

비동기 파일 업로드 처리 구현 방법

HTML에서 파일 업로드 input 요소 생성하기

<input type="file" id="fileInput">
<button onclick="uploadFile()">업로드</button>

JavaScript에서 Observers 생성하기 ```javascript // 파일 업로드 input 요소 const fileInput = document.getElementById(‘fileInput’);

// 파일 선택 시 처리할 함수 function handleFileSelection() { // 파일 선택 이벤트에 대한 처리 로직 }

// 파일 선택 이벤트 Observer 등록 const fileObserver = new MutationObserver(handleFileSelection); fileObserver.observe(fileInput, { attributes: true });

3. 파일 선택 시 처리할 함수 구현하기
```javascript
function handleFileSelection() {
  const selectedFiles = fileInput.files;
  
  // 파일 업로드 로직
  uploadFiles(selectedFiles);
}

function uploadFiles(files) {
  // 파일 업로드 로직
}

파일 업로드 함수 구현하기

function uploadFiles(files) {
  for (let file of files) {
 const formData = new FormData();
 formData.append('file', file);
    
 fetch('/upload', {
   method: 'POST',
   body: formData
 })
 .then(response => response.json())
 .then(data => {
   // 업로드 완료 후 처리 로직
 })
 .catch(error => {
   // 업로드 실패 처리 로직
 });
  }
}

결론

이번 포스트에서는 자바스크립트 Observers를 활용하여 비동기 파일 업로드 처리를 구현하는 방법에 대해 알아보았습니다. Observers를 사용하면 파일 선택 이벤트를 캡처하고, 선택된 파일을 서버로 업로드하는 로직을 쉽게 작성할 수 있습니다. 이를 통해 사용자는 보다 원활하게 파일 업로드를 진행할 수 있으며, 웹 애플리케이션의 사용성을 향상시킬 수 있습니다.

#javascript #fileupload