앞서 input type=file 태그에 대해 알아봤다.
html input 태그가 궁금하다면 링크 를 참고하자.
이제는 이때 업로드 된 파일을 자바스크립트로 다루는 방법에 대해 알아보자.

1. JavaScript Input

1) e.target.files[0]

: 해당 인풋에서 발생한 이벤트를 통해 업로드 된 파일을 찾을 수 있다.

<input type='file' onChange={(e) => {onFileUpload(e)} />

• input이 발생하는 태그에서 onChange로 그 이벤트를 통해 다룰 수 있다.

  function onFileUpload(event) {
    event.preventDefault();
    let file = event.target.files[0];
  }

• e.target.files에 해당 파일이 담겨있는 것을 볼 수 있다.
• 만약 multipl 속성이 있는 태그라면 [0] 번 이외에 인덱스 값을 추가로 가지는 것을 알 수 있다.
  (multipl 속성을 가질 경우 한번에 여러개 파일을 드레그 해서 첨부할 수 있음)
• 만약 1개씩 여러개의 파일을 받고 싶다면. (이건 다음 화에서...)

2) formData

: 파일은 아무 형태로나 서버로 전달할 수 없다. 위에서 받아온 file도 그 형태 그대로 전달 할 수 없다.
때문에 formData 라는 것을 사용하게 된다.

let formData = new FormData();

(1) FormData.append()

: 가장 많이 쓰게 될 formdata의 내장 함수로 form 데이터 안에 키,값의 형태로 담을때 사용된다.

  const upload = () => {
    let formData = new FormData();
    formData.append('files', files);
  }

• 서버에서 files 라는 키에 파일을 담아주기를 원한다면 다음과 같은 방법으로 해당 값을 append를 이용해서 담도록 한다.
  (Tip:

(2) Json과 file

: file과 text 동시에 보내기

  const upload = () => {
    const temp = JSON.stringify({
      name: selectedClassName,
      price: selectedPrice,
      sale: selectedDiscount / 100,});
    let formData = new FormData();
    formData.append('body', temp);
    formData.append('files', files);
  }

• 파일과 그 해당 파일과 관련된 text를 모두 보내는 경우 동일한 딕셔너리(객체)에 담아 보낼 수 없다.
• 따라서 각각의 append를 이용해서 서버로 전송하도록 한다.
• 위의 경우 formData의 body 라는 키에 stringify를 이용해서 json 데이터를 분리해서 담았다.

(3) file 여러개 담기

: file은 리스트(배열)의 형태로 만들어 formData에 바로 담을 수 없다.
(이 경우 빈 객체만 나오는 것을 알 수 있다)

  const upload = () => {
    let formData = new FormData();
    for (let i = 0; i < files.length; i++) {
        formData.append('files', files[i]);
    }
  }

• 따라서 배열에 담아온 파일들을 한번 더 반복문을 사용해서 append에 하나 하나 담아야 한다.