input[file] 관련해서 계속 작업중.
저번에는 1개만 넣는 거였고, 이번에는 여러개를 넣어야 해서 multiple 옵션을 사용해서 작업중이다.
지금 작업하는 건 사진의 순서가 중요한 작업이라서 사용자가 파일을 선택하는 것에 따라서 미리보기가 업로드 되어야 한다고 기획상으로 전달받았는데 솔직히 되는지 안 되는지 정보 없으니까 일단 해 보고서는 알려주겠다고 했었다.
근데 뭐, 다른 데서 하니까 찾다보면 나도 하겠지, 싶었다.
그러나...! 아무리 찾아도 안 되는 것이었다...!
왜...! WHY GOD WHY...! (조이 트리비아니 짤)
그리고 해답을 발견
- Stack Overflow
why does "HTML file select" changes the order of selected files and sort them alphabetically?
FileList does not indicate any specific order of indexes corresponding to user selected files즉, 파일리스트는 순서를 보장하지 않게 만들어져 있다는 것이었다.
순서를 보장하고 싶으면 사용자가 동작을 할 때마다(클릭, 터치 등) 즉각적으로 API call을 해서 백엔드 쪽에서 정보를 가지고 있다가 그걸 다시 한꺼번에 순서를 맞춰서 셋팅을 해 주어야 하는 것이었다.
근데 그것도 이미 파일 선택을 하는 창에서는 먹히지 않기 때문에 웹상에서는 이 순서를 보장하는 것이 불가능한 것 같았다.
그래서 가만히... 생각을 해보니까, 네이버 블로그에서 포스트 쓸 때 사진을 넣어야 할 때 웹으로 하면 사진이 뒤죽박죽 순서로 들어가서 에잇! 열받아! 하고는 사진은 폰으로 첨부하고 글은 웹으로 쓰는 일을 맨날맨날 하고 있었다.
나는 이 부분이 구현을 해 놓지 않았던 부분이라고 생각했더니 그게 아니고... 기본적으로 되지 않는 부분이었던 것이었다!!!
어쩐지!!! 그래도 나름 IT강국 코리아인데 여기 1,2등 테크 기업 중에 하나인 네이버가 못 했을리가!!!
너무나 큰 깨달음을 얻어서 감명깊어하고 나의 반나절은 날아갔으며 기획자 친구한테 "네이버도 못 하는데 제가 할 수 있을까요?"라는 말과 함께 주의 문구를 넣어달라고 했다^^!
앱 파트 분들한테 앱 쪽에서는 이게 어떻게 보장되나 여쭤봤더니 여기도 당연히 처리를 따로 안 하면 뒤죽박죽으로 들어가는 게 기본이고 카카오톡에서 사진 보내거나 인스타그램에서 사진 여러장 첨부하는 것처럼 사진 순서를 지정하고 싶으면 따로 자기들이 로직을 구현해서 넣은 것이라고 했다.
