서머노트 라이브러리 IMG 업로드 시 공백 제거

summernote 에서 img 를 첨부하려고 하는데 업로드가 안된다고 하셨다...

 

서머노트란?
웹 에디터로써, 게시판과 같은 곳에서 용이하게 사용할 수 있음

에러 이유는 나도 모르니 일단 개발자도구 부터 켜보았다

%20%20%20%20%20%20%20%20event_sn_20240829160457_1724915097.png:1 
       GET /img/event/tmp/%20%20%20%20%20%20%20%20event_sn_20240829.png 404 (Not Found)

 

흐으음... 해당 주소를 불러오지 못한다는 건데... 이유가 무엇일까 싶어서 코드를 파보기로 했다

success : function(data) {
    console.log('summernote upfile : ',data, file);
if(data) {
    $(editor).summernote('insertImage', '/img/'+path+'/tmp/' +data);
} else { alert('파일크기 초과!! ' , data); } },

이 부분에서 이상한 점을 발견하였다..!

path는 event가 잘 나왔고 data에도 file명이 잘 나왔는데..! 그렇다면 저 8번의 %20은 뭐냔 말이다

구글링결과 %20은 공백이라고한다.... 즉 파일명 앞에 8번의 띄어쓰기가 있다는 말...

파일명을 고쳐보고 다시 업로드했지만 그래도 에러는 같았다..

 

그래서 한번 파일명 앞에 ABC를 입력해서 테스트 해보기로했다

$(editor).summernote('insertImage', '/img/'+path+'/tmp/' +'ABC' + data);
그 결과!
GET 
/img/event/tmp/ABC%20%20%20%20%20%20%20%20event_sn_20240829.png
 404 (Not Found)

파일명도 잘못이 없지만 저렇게 나오고 있다면.. 파일명 앞에 공백이 생기고 있다는 것이니,

공백을 없애기로 했다

 

.trim() 함수를 이용하여 파일명 앞뒤로 있는 공백을 제거하였음!

$(editor).summernote('insertImage', '/img/'+path+'/tmp/' + data.trim());

 

해결완료 ^_^