브라우저에서 로컬파일 여는 방법

이 주제를 공부한 이유

개발자 커뮤니티 슬랙에서, 브라우저에서 txt나 zip와 같은 파일을 open할 수 있는 지에 대한 질문이 올라왔다. 이 질문을 읽었을 때 브라우저에서는 로컬에 파일이 접근이 안되지 않나..? 근데 어떤 웹들을 보면 또 접근이 가능하게 구현한 것 같은데? 재밌어 보여서 시작했다..

접근 방법

1. 파일을 어떻게 열까?

가장 먼저 생각나는 방법으로 window.open을 사용하였다!

Not allowed to load local resource:

역시 브라우저에서는, load local resource에 대해 접근을 막고 있었다..

한 번에 성공했으면 질문도 안올라왔겠지..

 

2. Mdn에서 정의하는 window.open을 보자

MDN의 window.load를 보면 첫 번째 파라미터가 URL or path라는 것을 볼 수 있다. URL or path면 충분히 열릴만도한데.. 로컬이라 파일이 열리지 않는다. 백준 애드온에서 많이 사용하던 상황인 것같다.(링크를 걸려구 했는데, blob과 createURLObject에 대한 글을 안남겼었다니.. 충격이다.. 작성해야지..)

1. 파일의 주소가 필요한 경우
2. 파일의 주소를 직접 사용할 수 없는경우

이 질문은 input으로 파일을 불러들였을 때, 그 파일을 open하는 방법을 질문하였으니 굳이 Blob을 이용해서 파일 인 것 같은 것을 만들 필요는 없으니 createURLObject만 이용하여 해결하였다.

 

해결 코드

let input = document.querySelector("#input");

input.addEventListener("change", (e) => {
  let file = input.files[0];
  let url = URL.createObjectURL(file); // A valid URL that you can use on the page
});

 

마무리

이 질문 말고도 슬랙에 다양한 답변을 달았엇는데, 항상 그냥 답변을 남기고 끝냈었던 것 같다. 앞으로는 좀 흥미롭거나 검색해서 찾아본 주제 같은 경우는 답변에대한 글을 남겨야곘다.