File upload

File upload

이 문서에서는 Toast UI Editor에 hook을 설정하여 파일 업로드를 처리하는 방법에 대해서 다룬다.

hooks 설정

Toast UI Editor를 생성할 때 다음과 같은 옵션을 추가한다.

hooks: {
    'addImageBlobHook' : function(blob, callback) {
        //이미지 추가시 수행할 작업 코드를 작성
    }
}

별도의 서버를 운영한다면 해당 서버의 백엔드 코드에 업로드, 다운로드가 구현되어 있어야 한다.

코드의 흐름은 다음과 같다.

hooks: {
    //blob - 사용자가 선택한 파일
    //callback - 파일이 업로드 된 후 에디터에 표시할 이미지 주소를 전달할 콜백함수
    'addImageBlobHook' : function(blob, callback){
        //1. ajax file upload를 위한 FormData 객체 생성
        var data = new FormData();
        
        //2. data에 업로드할 파일을 이름을 부여하여 추가
        // - 이름은 서버에서 읽을 이름으로 설정
        data.append("attachment", blob);
        
        //3. ajax 요청을 통해 파일 업로드
        axios.post("서버 업로드 주소", data, {
            //multipart 설정
            headers: {
                "Content-Type" : "multipart/form-data"
            }
        })
        .then(res=>{
            //4-1. 업로드 성공한 경우 
            // - 서버에서 반드시 다운로드 주소를 반환해야한다
            // - 서버에서 반환된 데이터가 다음과 같다고 가정한다
            // - {url : "다운로드주소"}
            // - callback 함수를 실행하며 주소를 전달하면 img 태그가 생성된다
            callback(result.data.url);
        })
        .catch(err=>{
            //4-2. 업로드 실패한 경우
            // - 사용자에게 알림 등을 출력한다.
            window.alert("업로드 실패");
        });
    }
}