자바스크립트로 이미지 업로드 하고 불러오기.

import close from './assets/close_icon.svg';
import media from './assets/media_icon.svg';
import arrow from './assets/arrow_back_icon.svg';

const modal = `
                <div class="modal__close">
                  <img
                  width="22px"
                  height="22px"
                  src=${close}
                  alt="close_icon_logo"
                  />
                </div>
                <div class="modal__card">
                  <div class="modal__header">
                    <div class="modal__back">
                      <img width="32px" height="24px" src=${arrow} alt="arrow_back_icon" />
                    </div>
                    <h2>새 게시물 만들기</h2>
                    <p>공유하기</p>
                  </div>
                  <div class="modal__main">
                    <img src=${media} alt="media_icon" />
                    <h3>사진과 동영상을 업로드 해보세요.</h3>
                    <label for="file">
                      <p>컴퓨터에서 선택</p>
                    </label>
                    <input type="file" name="file" id="file" />
                  </div>
                </div>
              `;

function createPost(img) {
  return `
          <div class="modal__post">
            <img width="478px" height="478px" src=${img} alt="image" />
            <div class="modal__write">
              <textarea placeholder="문구 입력..." autofocus></textarea>
            </div>
          </div>
        `;
}

document.querySelector('#add-post').addEventListener('click', createModal);

function createModal() {
  const modalEl = document.createElement('div');
  modalEl.setAttribute('class', 'modal__layout');
  modalEl.innerHTML = modal;

  document.querySelector('body').prepend(modalEl);

  document.querySelector('.modal__close').addEventListener('click',function () {
      document.querySelector('body').removeChild(modalEl);
    });
    
  // 지시사항에 맞춰 코드를 작성해주세요.
 
  //파일 읽기위한 함수
  const fileEl = document.querySelector('#file')
  const fileAdd = () =>{
      //파일을 읽기 위해 FileReader 객체를 생성합니다. 다음과 같이 객체를 만들 수 있습니다.
      let reader = new FileReader();
      
      //FileReader 객체에서 제공하는 readAsDataURL 메서드를 이용해 input 태그를 이용해 업로드된 파일을 넘겨줄 수 있습니다.
      reader.readAsDataURL(fileEl.files[0]);
      //input 태그가 type="file"이면, input 요소에 files로 접근하면 사용자가 선택해서 읽은 파일에 대한 정보를 얻어낼 수 있습니다.

//FileReader에 readAsDataURL 메서드를 실행한 후 정상적으로 파일을 읽었을 때는 다음과 같이 onload 메서드에 함수를 넣어 코드 흐름을 제어할 수 있습니다.
      reader.onload = function() {
          const imageBase64 = reader.result; // 이미지를 함수에 담기.공부필요.
          document.querySelector(".modal__card").setAttribute("class","modal__card write--post");
          document.querySelector(".modal__main").setAttribute("class","modal__main write--post");

          const backBtn = document.querySelector(".modal__back > img")
          const shareBtn = document.querySelector(".modal__header > p")
            //공유버튼 및 뒤로가기 버튼 활성화
            backBtn.style.visibility = "visible";
            shareBtn.style.visibility = "visible";

            document.querySelector(".modal__main").innerHTML = createPost(imageBase64)

            backBtn.addEventListener('click',function(){
                document.body.removeChild(modalEl);
                createModal();
            })
        }
    reader.error = function (){
        alert("Error",error)
        document.body.removeChild(modalEl);
    }
  }

  fileEl.addEventListener("input",fileAdd)
}