datatables editor 파일 업로드 사용하기

datatables editor에서 파일 업로드를 사용하고 싶으면,

아래의 예제링크를 참고하면 된다.

https://editor.datatables.net/examples/advanced/upload.html

문제가 있다면 본 예제에서 서버사이드는 php 언어만 보여주고 있기에,

node.js를 쓰는 경우 ajax 함수 발생에 따른 반환 데이터를 직접 짜주어야 한다.

그렇기에 datatables 팀에서는  php 이외의 서버언어를 사용하는 개발자들을 위해서

클라이언트에서 서버로 저달하는 데이터와 서버에서 클라이언트로 전달하는 데이터를 아래의 링크에 잘 정리해두었다.

https://editor.datatables.net/manual/server

이러한 형식을 맞춰서 클라이언트와 서버가 소통해야 datatables editor는 오류없이 잘 동작하게 된다.

그리고 난 최근 datatables editor에서 파일 업로드 UI도 지원해주는것을 발견하게 되었고,

그것을 사용해 보았다. (지금 개방중인 프로그램에 그 기능이 들어가야 했다.)

하지만 여러가지 문제에 봉착해서 4시간동안 고생을 하였다.

(내가 php를 안 씀으로 인해서 발생하는 문제들이었다.ㅅ.)

첫번째로 파일을 업로드할시에 datatables에서 자동적으로 해당 주소로 ajax의 post가 발생하는데,

왜 파일을 선택하는 것만으로 ajax 이벤트가 발생하는지 이해할 수 없었으며,

뭐 이러한 경우도 있을수 있구나라고 해도 내가 본 통신에서 어떠한 데이터를 받을수 있으며,

클라이언트에게는 어떠한 형식의 데이터로 보내주어야 하는지는 의문이었다.

결론은 아래의 링크에서 나온것 처럼 클라이언트에서 서버쪽으로 발생한 post 통신에서는 action, uploadField, upload라는 변수의 데이터를 받을수 있고,

이후 클라이언트 쪽으로 오른쪽에 나와있는 객체형식을 맞추어 전달해야 한다.

https://editor.datatables.net/manual/server#Upload

그런데 action, uploadField, upload 데이터는 req.body에 존재하지 않았다.

그래서 계속 여러가지로 찾아보니 결론은 upload file 데이터를 받아오는 방법을 써야 받을수 있었다.

(간단하게 말하면 datatables에서는 파일을 선택하는것만으로 해당 파일을 서버로 보내는 이벤트까지 동시에 일어나는 셈이다.)

node.js에서 upload file 데이터를 받는 방법은 아래의 링크를 참조하면 된다.

https://www.w3schools.com/nodejs/nodejs_uploadfiles.asp

그리고 나서 나는 데이터 형식을 맞춰주고

서버에서 클라이언트 쪽으로 데이터를 보내주니까 오류가 사라졌다.

이후에는 클라이언트쪽에서 오류가 발생했는데,

editor.file( 'files', file_id ).web_path 함수에서 자꾸만 오류가 났다.

(예제에 나와 있으며, 파일의 경로를 가져오는 함수다.)

실제 datatables editor의 js 파일을 분석해보니,

특정변수가 존재하지 않아서 계속해서 오류가 나는 거였다.

서버에서 클라이언트로 보내는 데이터의 형식도 맞추었는데,

자꾸 오류가 나서 나는 다른 방법으로 코드를 짜서 오류를 우회하여 가기로 결정하였다.

결론적으로 내가 생각해낸 방법은 file이라는 함수를 쓰지 않고,

file_id라는 변수에 업로드한 파일의 대부분의 정보를 담아서 보내주는 것이었다.

그후에 create이벤트가 발생하면,

받은 데이터에서 파일의 경로 및 이름값을 바탕으로 fs 모듈을 이용하여 서버내 특정폴더에 파일을 저장해두고,

그 파일의 경로를 클라이언트쪽으로 보내주어 링크를 걸어주었다.

그럼으로 사용자는 해당 파일을 다운받을 수 있게된다.