React) 이미지/파일 업로드 버튼

이미지와 파일 업로드는 input태그를 사용한다. 

 

function Home() {

    const [imgUrl, setImageUrl] = useState();

    const onImgChange = (e) => { 
      setImageUrl(e.target.files[0]);
    }

    return(
        <div className="fileContainer">
          <button>+</button>
 
          <input 
            type='file'
            id='image'
            accept='image/*'
            name='image'
            onChange={onImgChange} >
          </input>

        </div>
    )
}

type='file'로 설정하고

accept='image/*'로 하면 jpg, png 등 이미지 형태의 확장자를 가진 파일만 불러올 수 있다. 

원하는 확장자의 파일만 불러오고 싶으면 accept='.pdf' 형태로 원하는 확장자만 적으면 된다. 

또한 여러 개를 가져오고싶으면 multiple="multiple"을 적용!

 

<지정한 확장자 제한 예시>

<input type="file" accept="audio/*">
<input type="file" accept="video/*">
<input type="file" accept="image/*">
<input type="file" accept=".pdf, .hwp">