input file 다루기

오늘은 이 친구를 커스텀해서 원하는 디자인으로 만들어보겠습니다

파일 선택 버튼 디자인 바꾸기

//imageInput.jsx
<label 
  className="label"
  htmlFor="input-file" //htmlFor과 input의 id가 같아야 함
>
  //label 안에 들어가는 코드가 파일 선택하는 버튼이 됨
  <img src={addImg} alt="" /> 
</label>
<input
  type="file"
  id="input-file"
  style={{ display: "none" }} //display: none을 해야 기존의 버튼이 보이지 않음
/>

이 버튼을 누르면 파일을 선택할 수 있는 창이 뜹니다

선택한 파일의 미리보기 띄우기

//imageInput.jsx
const [fileUrl, setFileUrl] = useState(null);

const inputImage = useCallback((event) => {
  const imageFile = event.target.files[0];
  const imageUrl = URL.createObjectURL(imageFile);
  setFileUrl(imageUrl);
}, []);

이렇게 함수를 짠 후 적용해줍니다

//imageInput.jsx
<img
  //처음에는 fileUrl이 null이라 사진이 뜨지 않으니 기본 사진을 넣어두는 걸 추천!
  src={!fileUrl ? defaultProfile : fileUrl} 
  alt="profile"
/>
...
<input
  type="file"
  id="input-file"
  style={{ display: "none" }}
  onChange={inputImage}
/>

이런 식으로 선택을 하지 않았을 때는 기본 사진이 뜨지만

파일 선택 시 미리보기가 뜹니다

끝