[JavaScript] File Tag에 File List 할당해주기.

Base64로 되어있는 파일 데이터를 File List로 변환하여 File Tag에 넣는것을 기록해볼까 한다.

검색을 해봐도 File Tag에 Value값을 컨트롤하는것은 보안상 불가능하다는 글밖에 못봐서 절망하던 도중에 우연히 StackOverflow에서 해결법을 찾았다.

우선 예전 프로젝트를 진행했을때도 보안상 파일 Tag는 컨트롤하기 힘들다는 이야기도 많이 들었고, 그렇게 알고 있었는데 해당 방법이 정말로 Value값에 파일 데이터를 넣어서 컨트롤을 한것인지는 모르겠다.

여튼 해당 방법으로 당장의 비쥬얼상에 문제는 없었고 로직을 수정하지 않아도 되어서 해당 방법을 사용하기로 했고 기록으로 남겨놓기로 하였다.

 

---

[상황]

프로젝트를 진행도중 파일 태그에서 파일을 데이터를 가져와 Base64로 인코딩하여 가지고 있다가

다시 Base64를 File Object로 변환하여 파일 태그에 넣어야하는 상황이 생겼다.

 

<input data-id="quesFile" id="quesFile" type="file" accept="image/*"/>

<script type="text/javascript">

$(document).ready(function() {

	$("#quesFile").on("change", function(){
    	
		fileToBase64( $(this).prop("files")[0], function( base64 ) {
			//Todo Dom Data에 Base64를 잠시 저장하는 로직
			// Ex) $(selector).data("dataItem", base64);
		} );
        
	});

});

function fileToBase64( file, callback ) {
	
	var reader = new FileReader();
            
	reader.readAsDataURL(file);
            
	reader.onload = function () {
		callback(reader.result);
	};
            
	reader.onerror = function (error) {
		console.log('Error: ', error);
	};
}

</script>

 

위의 코드에서 파일을 선택 시 이벤트가 실행되어 파일 데이터를 Base64로 인코딩하여 어떠한 Dom에 Data로 저장을 하게된다.

그 후 파일태그는 팝업창으로 띄운것이라 팝업창이 닫히면 사라지게 된다.

다시 팝업창을 열게되면 파일태그에 기존에 Dom에 Data로 저장한 파일 데이터를 다시 보여줘야 하는데 어떻게 해야할지 고민을 많이했다.

아무리 검색해도 찾기가 힘들었다.

 

---

[해결]

사실 이 방법이 해결법이 맞는지 모르겠다만 내가 보기에는 맞는거 같아서 해당 방법으로 사용해보려고 한다.

 

<input data-id="quesFile" id="quesFile" type="file" accept="image/*"/>

<script type="text/javascript">

$(document).ready(function() {
	displayPageForm( base64, fileName );
});

function displayPageForm( base64, fileName ) {
	
	$( "#quesFile" ).prop("files", getFileListItems( [base64ToFile( base64, fileName )] ));
    
}

function base64ToFile( base64, fileName ) {
	
	var arr = base64.split(','),
	mime = arr[0].match(/:(.*?);/)[1],
	bstr = atob(arr[1]), 
	n = bstr.length, 
	u8arr = new Uint8Array(n);
            
	while(n--){
		u8arr[n] = bstr.charCodeAt(n);
	}
        
	return new File([u8arr], fileName, {type:mime});
}

function getFileListItems( files ) {
	var b = new ClipboardEvent("").clipboardData || new DataTransfer()
	for (var i = 0, len = files.length; i<len; i++) b.items.add(files[i])
	return b.files
}

</script>

 

위의 방법으로 파일태그에 값을 넣으니 들어가더라.

위의 예제에서는 쉽게 설명하기위해 base64 데이터와 파일 이름만 변수값으로 보내줬지만 사실 프로젝트를 진행하는 소스코드에서는 다른 여러 데이터들도 있다.

 

 

실제 프로젝트 코드의 한 부분

 

 

참조 : stackoverflow.com/questions/52078853/is-it-possible-to-update-filelist

Is it possible to update FileList?