ajax, js) multipart/form-data 전송에 관하여

var myModalEl = document.querySelector('#exampleModal');

var transfer = false;

function stopUpload() {
	transfer = false;
	var modal = bootstrap.Modal.getOrCreateInstance(myModalEl);
	modal.hide();
	alert("업로드가 중지되었습니다.");
}

function offCourseUploadProcess() {
	transfer = true;
	var modal = bootstrap.Modal.getOrCreateInstance(myModalEl);
	modal.show();
	
	var formData = document.getElementById("formData");
	var transformData = new FormData(formData);
	
	var xhr = new XMLHttpRequest();
	
	xhr.addEventListener("load", function() {
		alert("업로드가 완료되었습니다. ");
		if(confirm("마이페이지로 이동하시겠습니까?")){
			location.href = "../member/myPage";
		} else {
			location.href = "../board/mainPage";
		}
	});
	
	xhr.addEventListener("abort", function () {
		alert("업로드가 취소되었습니다.")
	});
	
	xhr.upload.addEventListener('progress', function(e) { 
		if(transfer) {
		let percentage = (e.loaded / e.total * 100);
		var progressBar = document.querySelector(".progressBar");
		progressBar.innerText = Math.floor(percentage) + "%";
		progressBar.style.width = percentage+"%";
		} 
	})

	xhr.onreadystatechange = function() {
		if(xhr.readyState==4 && xhr.status==200){			
		}
	}
	xhr.open("post", "./offCourseUploadProcess");
	xhr.send(transformData);
}

xhr 관련 문서
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

xhr.upload에 있는 progress 이벤트 관련 문서
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/progress_event

전체적으로 업로드를 시작하면 모달 창을 불러와서 진행률을 나타내고 싶은 화면을 구현하고 싶었다.

jquery를 사용하지 않고 최대한 js를 활용해서 나타내고 싶은 욕심에 각종 블로그와 문서를 참고해가며 코드를 완성했다.

모달은 부트스트랩을 사용했다. 모달 사용방법은 생략하겠습니다.

핵심은 xhr.upload.addEventListener('progress', event) 이부분인데 문서에도 나와있듯이 properties로 가지고 있는 loaded와 total을 사용해서 진행률을 추출하고 모달안에 있는 태그에 표시해주고 width 값을 통해 업로드 바를 구현했다.

다음은 중간에 취소를 했을 때 upload를 중단하고 싶었지만, 새로고침을 하지 않으면 중단 되지 않았다. 서버단 작업은 아직 자세히는 모르겠지만, progress 이벤트는 upload시 지속적으로 발생해서 if()를 통해서 취소버튼을 눌러 주면 boolean 값을 바꾸어 상태제공을 중단 할 수 있지만, 확실하게 upload 작업을 막는건 아닌 것 같다...
이부분에 대해서는 더 학습할 예정이다.

그 다음 form에 있는 multipart인 이미지나 영상등을 ajax로 보내는 방법인데
xhr.open("post", "./offCourseUploadProcess");
xhr.send(transformData);
으로 해결했다.
수업에서 잠깐 지난간 말로 기억해보면 xhr.setRequestHeader를 지정하지 않으면 default로 바이너리로 날라가 multipart를 실을 수 있다고 들었던것 같다.

다음은 form 인데 window는 form을 가지고 있는데 이를 새로 생성할수 있다. 그래서 new FormData() 안에 보낼 form을 넣고 이 formdata를 send에 넣어주니 잘 넘어갔다.

아직 이론이 부족한 것 같아 유튜브로 기본을 갖춰야 겠다.