input[type="file"]의 스타일링하기 + DOM 조작으로 자동 제출
너무 못생겼습니다...
input[type="file']을 디자인하기 위해는 input을 아예 숨기고, 붙어 있는 label을 이용해야 합니다.
여기서, 숨긴다고 input에 display:none을 주게 되면 연결된 label까지 없어지게 됩니다.
visibility를 hidden으로 준 다음, label을 스타일링하면 되겠습니다.
위치로는 form에 position을 relative로 주고, label을 form 내부에서 position:absolute로 주는 것이 좋겠죠?
<form
encType="multipart/form-data"
onSubmit={photoChange}
style={{ position: "relative" }}
>
<Label htmlFor="file">이미지 변경</Label>
<input
type="file"
name="file"
id="file"
accept="image/*"
style={{ visibility: "hidden" }}
/>
<input type="submit" />
</form>const Label = styled.label`
display: inline-block;
padding: 0.5em 0.75em;
color: #999;
font-size: inherit;
line-height: normal;
vertical-align: middle;
background-color: #fdfdfd;
cursor: pointer;
border: 1px solid #ebebeb;
border-bottom-color: #e2e2e2;
border-radius: 0.25em;
position: absolute;
left: 5.6em;
margin-top: 1.5em;
`;
이제 버튼을 눌러서 이미지 업로드를 할 수 있습니다.
자, 그런데 문제는 유저의 입장에서는 해당 버튼을 눌러 이미지를 선택하면 자동으로 업로드가 되어야 하는데, 이 당연한 듯한 동작이 위와 기본 적인 코드 상에서는 안된다는 것입니다.
따라서 JS를 통한 DOM 조작을 이용해 강제로 이미지를 제출하도록 만들어야 합니다.
시도 1) parentNode를 통한 제출
e.target.parentNode.submit();preventDefault()가 안 된다는 사실을 알고선 우회
시도 2) 제출 버튼을 작성한 후 nextSibling으로 해당 버튼을 click
이 방법은 되더군요. 제출 버튼을 누른 것과 동일하므로 form을 제출했을 때의 로직을 그대로 작성해주시면 됩니다.
여기서 팁이 있다면, visibility: "hidden"이 아니라 display: "none"을 쓰라는 것입니다.
visibility를 쓰게 되면 버튼이 사라지긴 하지만 공간은 그대로 차지하고 있기 때문에 작성한 Label의 위치를 css로 재수정해야 합니다. 그러나 display: none을 설정하면 공간까지 깔끔하게 사라집니다.
<input type="submit" style={{ display: "none" }}></input>const photoChange = (e) => {
e.target.nextSibling.click();
};
React에서는 useRef를 통해서 입력하고자 하는 input 태그를 ref로 지정해서 가상 클릭을 만들어내면 쉽습니다.
const imageInput = useRef();
const onClickImageUpload = () => {
imageInput.current.click();
}
<input type="file" multiple hidden ref={imageInput} onChange={onChangeImages} />
<Button onClick={onClickImageUpload}>이미지 업로드</Button>
시도 3) 아! 이런 현명한 방법이...
상당히 시간이 지난 후지만, 그냥 input과 label을 이용할 필요도 없이 예쁘게 button을 만들고, 해당 버튼을 누르면
input 자체를 가상으로만든 후 클릭하게 만들면 되겠다는 생각이 들었습니다.
뭘 숨기고 자시고 할 필요도 없이 말이죠. 이게 제일 현명한 방법 같습니다.
아래와 같은 방식 말이죠. 이 방법은 다른 프로젝트에서 사용해봐야겠습니다. ㅎ
const input = document.createElement("input");
input.setAttribute("type", "file");
input.setAttribute("accept", "image/*");
input.click();
참고한 글)