[javascript] Ember.js로 파일 업로드를 어떻게 구현하나요?

04 Dec 2023

javascript

Ember.js로 파일 업로드를 구현하는 것은 상대적으로 간단합니다. Ember.js는 파일 업로드를 처리하기 위한 강력한 기능을 제공합니다.

먼저, Ember.js 애플리케이션에 파일을 업로드하는 데 사용할 수 있는 파일 선택(input type=”file”) 폼 요소를 생성해야 합니다. 예를 들어, 다음과 같이 HTML 파일에서 폼 요소를 생성할 수 있습니다.

<form >
  <input type="file" id="file-input" onchange=>
  <button type="submit">Upload</button>
</form>

그런 다음, Ember.js 컨트롤러에서 “handleFileSelection” 액션을 정의하여 파일 선택 이벤트를 처리할 수 있습니다. 이 액션에서는 파일을 선택하면 선택한 파일을 읽고 필요한 작업을 수행해야 합니다. 예를 들어, 다음은 파일을 읽고 파일의 내용을 콘솔에 로그하는 “handleFileSelection” 액션의 예입니다.

import Controller from '@ember/controller';
import { action } from '@ember/object';

export default class MyController extends Controller {
  @action
  handleFileSelection(event) {
    const file = event.target.files[0];

    const reader = new FileReader();
    reader.onload = event => {
      const fileContent = event.target.result;
      console.log(fileContent);
    };

    reader.readAsText(file);
  }
}

마지막으로, 파일을 서버로 업로드해야 하는 경우 “uploadFile” 액션을 정의하여 파일을 서버로 전송할 수 있습니다. 이 액션에서는 파일 전송을 위해 AJAX 요청을 보내고 응답을 처리해야 합니다.

import Controller from '@ember/controller';
import { action } from '@ember/object';

export default class MyController extends Controller {
  @action
  uploadFile(event) {
    event.preventDefault();

    const file = event.target.files[0];
    const formData = new FormData();
    formData.append('file', file);

    Ember.$.ajax({
      url: '/upload',
      method: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      success: function(response) {
        console.log('File uploaded successfully');
      },
      error: function(error) {
        console.log('Error uploading file');
      }
    });
  }
}

이제 Ember.js 애플리케이션에서 파일 업로드를 구현하는 데 필요한 기본 사항을 알고 있습니다. 이를 기반으로 파일 업로드를 확장하거나 사용자에게 더 나은 경험을 제공할 수 있습니다. Ember.js 공식 문서를 참조하여 더 많은 정보를 얻을 수 있습니다.

참고 자료: