javascript 파일



이미지를 올리는 프론트 엔드를 구현 중입니다.

클릭해서 올리는 고전적인 input 기능이랑

drag and drop 을 이용해 올리는 기능 두가지를 구현했습니다.


1. 두개를 따로따로 실행하면 작동합니다. input으로만 하면 정상 작동함. 반대로 drag--로만 해도 정상 작동


2. input 이후 drag-- 도 정상 작동함.


3. drag--이후 input을 쓰려고 하면 파일 선택 창이 열리지 않음.

 3-1. drop뿐만 아니라 파일을 들고 위에서 호버링만 하고 input을 누르려고 해도 파일 선택창이 안열림


이 3번이 문제입니다... 왜 안열리는지 모르겠습니다. 처음엔 e.preventDefault() 문제인가 싶었는데 그것도 아니고요.


한가지 의심가는 거라면 .addEventListener('click', () => input.click()); 라는 기능을 이용해 input 버튼 자체를 클릭하는 것이 아니라 input을 참조하는 다른 <span> 글자를 클릭함으로써 input을 클릭하는 것이라고 작동을 시키는 건데... 이게 작동이 안될 이유가 있나 싶기도 하고요...


그리고 코드는 

https://www.webcodehindi.cf/2021/12/simple-drag-and-drop-multiple-images-preview-before-uploading-using-pure-javascript-and-css.html


이 출처를 참고하였습니다. 거의 같다고 보면 됩니다.


혹시 이런 상황 경험해보신 분 계시다면 조언 부탁드립니다!