input type file 전체경로(base64) 받아오기 (fakepath 부분)

// html
<input id='inputFile' type='file'>

// javascript
const inputElem = document.getElementById('inputFile');
const path = inputElem.value; // output: C:\fakepath\test.csv

 

input[type=file]에서 파일 경로"fakepath"로 가려지게 되는 현상이 있었다. (C:\fakepath\test.csv)

 

이유:

브라우저가 인위적으로 보안의 이유로 막는다. 전체 경로를 공개하면 사용자의 파일 구조에 대한 민감한 정보가 노출될 수 있으므로 사용자의 개인정보 보호 및 보안을 위해 그렇게 처리한다고 한다.

 

해결:

FileReader 객체를 불러오고, readAsDataURL 메서드에 파일정보를 넣어주면 된다.

그리고 onloadend, 로드가 끝나면 오른쪽 함수가 실행되며 함수의 인자에 파일객체와 관련된 정보가 담겨있는걸 볼 수 있다.

 

// html
<div id="html-output">
   <input type="file" id="inputFile">
</div>

// script
const container = document.getElementById('html-output');
const input = document.getElementById('inputFile');

input.addEventListener('change', function() {
    const fReader = new FileReader();
    fReader.readAsDataURL(input.files[0]);

    fReader.onloadend = function(event){
        const imageElement = document.createElement('img');
        const path = event.target.result;
        imageElement.src = path;
        imageElement.style.display = 'block';

        console.log("PATH: ", path);

        container.append(imageElement);
    }
});

 

console.log 로 path 를 보면, 엄청나게 긴~ 텍스트가 나오는데, 이것은 보안상 base64 로 인코딩되어 있다. 이것을 base64 문자열로 decoding 해주는 곳에서 변환해보면, 텍스가 깨진형태의 아주 긴 문자열이 반환되는데...

 

결론적으로는 정확한 파일 경로를 불러올수는 없다고 한다. 보안때문이라면 그 목적을 거스르기 보다는 그 결과에 맞춰 작업을 하는게 맞아보인다.

 

비록 base64 로 encoding 된 데이터이지만 img 태그 src 에 넣어 사용하면 이미지가 보인다. (아래 참고)