이미지 업로드시 미리보여주기 기능

유저가 프로필 사진을 바꾸거나 사진을 올릴 때 미리볼 수 있도록 하는 기능이 필요했다.

생각해본 로직은 바꿀 사진을 선택해서 input에 집어넣었을 때 바로 서버로 보낸 후 temp폴더 내에 저장한 다음, 이 저장된 이미지를 다시 가져와서 화면에 보여준다. 그리곤서 유저가 submit을 하면 temp폴더에 있던 이미지파일이 정식 img폴더로 이동하고, submit이 안되면 temp에서 삭제하려고 했다.

 

그런데 찾아보니 업로드 전에 이미지를 미리 보여줄 수 있게 HTML5에서 지원하는 기능이 있었다.

 

굿굿 그래서 아주 간편하게 submit 버튼을 누르기 전에 이미지를 확인할 수 있도록 작성할 수 있었다.

 

1. addPhoto요소가 클릭되면 photoInput요소의 클릭이벤트를 트리거시킨다.

2. 파일 선택창이 뜨면 파일을 선택한다.

3. photoInput요소의 onChange이벤트가 발생해서 선택한 파일을 FileReader객체를 생성하여 읽은 후, addPhoto요소의backgroundImage url로 제공한다.

 

아래의 코드는 미리보기 기능에 필요한 코드만 간추려보였다.

코드보기

(...)

const NewPhoto = () => {
    const addPhoto = useRef(null);
    const photoInput = useRef(null);
	
    //input요소에서 파일 선택시 addPhoto요소에서 이미지 보여주기
    const onChange = useCallback(() => {
        const file = photoInput.current.files[0];
        if(file){
            const reader = new FileReader();
            reader.readAsDataURL(file);

            reader.onload = () => {
                addPhoto.current.style.backgroundImage = `url(${reader.result})`;
            }
        }
    },[])
	
    //addPhoto 요소가 클릭되면 input 클릭이벤트 트리거
    const onClick = useCallback(() => { 
        photoInput.current.click();
    }, [])

    return(
        <div className = {cx('NewPhoto')}>
            <div className = {cx('modal-block')}>
                <form>
                    <div 
                        id = 'addPhoto'
                        ref = { addPhoto }
                        onClick = { onClick } 
                    />
                    <input 
                        type = 'file'
                        id = 'photoInput'
                        accept=".png, .jpg, .jpeg"
                        ref = { photoInput }
                        onChange = { onChange } />
                </form>
            </div>
        </div>
    )
}

export default NewPhoto;

 

작동 화면