드디어 추가되는 파일 불러오기 기능

https://koreanraichu.tistory.com/718

텍스트 에디터에 뭔가 추가해보자

여기서 이어진다. 텍스트 에디터를 만들면서 처음에 얘기했던 '텍스트 파일을 불러오면 제목에 파일명, 이름에 내용을 띄우는'걸 해 보자. 이건 일단 input이랑 FileReader API가 필요하다고 한다.

---

저기 셀렉트박스 오른쪽에 보면 버튼 하나가 있다. 저건 사실 인풋 파일+라벨 붙여놓고 라벨에 CSS 준 거임. 아무튼 그럼.

 

const fileOpen = document.querySelector('#textuploader');

늘 그렇듯이 주무르려면 일단 갖고와야 한다.

 

fileOpen.addEventListener('click',(e)=>{
    const file = e.target.files;
    console.log(file[0])
})

쟤 file만 해서 콘솔 띄워보니까 FileList라고 뜨더라… 이런건 바로바로 불러오려면 인덱싱을 해야 한다. 사실 GPT가 [0] 썼을때부터 아 저놈도 인덱싱 해야 하는구나 싶긴 했음.

 

fileOpen.addEventListener('click',(e)=>{
    const file = e.target.files[0]; //너도 배열이냐?
    if (!file) return; 

    textTitle.value = file.name.replace(/\.txt$/, '');

    const reader = new FileReader();
    reader.onload = function(event) {
        textArea.value = event.target.result;
        count.innerText = textArea.value.length;
    };
    
    reader.readAsText(file, 'utf-8');
})

이게 로직은 문제가 없음. 불러와서 파일명을 제목에 띄우고, 내용을 내용란에 띄워라. 이게 다임. 근데 안되는거임. 그래서 왜 안됨? 했더니 정말 뜻밖의 문제점을 지적해줬다.

 

fileOpen.addEventListener('change',(e)=>{
    const file = e.target.files[0]; //너도 배열이냐?
    if (!file) return; 

    textTitle.value = file.name.replace(/\.txt$/, '');

    const reader = new FileReader();
    reader.onload = function(event) {
        textArea.value = event.target.result;
        count.innerText = textArea.value.length;
    };
    
    reader.readAsText(file, 'utf-8');
})

무슨 차이인지 모르겠다고? 안 되는 코드는 이벤트 리스트너에 click이 들어가 있고, 되는 코드는 이벤트 리스트너에 change가 들어가 있다. 아니 지피티야 이거 왜이럼?

 

클릭은 쟤를 클릭하면 이벤트가 시작된다. 그러니까 파일을 첨부하기 '전에' 이벤트가 발동되는데, 컴퓨터 입장에서는 뭐여 왜 없는 파일 제목을 띄우래? 가 되는거다. 마치 내 남친은 질량이 0인데 남자친구를 데려오라는 것과 같다. 그리고 체인지는 파일이 올라왔을 때 발동되는거라 아 올라왔으니 띄워줌이 되는 것이다. 이해가 어렵다면 change는 '(파일의 업로드) 상태가 바꼈을 때'라고 이해하면 된다.

 

불러온 후

 

참고로 원래 기능(텍스트 내용 복사, 텍스트 저장)역시 파일을 불러온 후로도 제대로 작동한다.