인프런 커뮤니티 질문&답변

작성한 질문수

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

이미지 업로드시 플러스 아이콘 없애기

작성

·

188

0

안녕하세요, 혹시 이미지 업로드 시 플러스 아이콘을 없애려면 어떤 기능을 이용하면 될까요?

해당 영역에 미리보기 까지는 id와 preview를 이용해서 만들었는데,

플러스 아이콘을 없애는 방법을 잘 모르겠어요. 이미지 업로드시 style을 display:'none'으로 하는 방향으로 해보고 있는데 구현이 잘 되질 않아 질문드립니다.

mongodb redux react 웹앱 nodejs

답변 1

0

지식공유자

안녕하세요 서열음님 !

혹시

<Dropzone onDrop={dropHandler}>
{({ getRootProps, getInputProps }) => (
<div
style={{
width: 300, height: 240, border: '1px solid lightgray',
display: 'flex', alignItems: 'center', justifyContent: 'center'
}}
{...getRootProps()}>
<input {...getInputProps()} />
<Icon type="plus" style={{ fontSize: '3rem' }} />
</div>
)}
</Dropzone>

여기에 Icon 부분을 얘기하시는 건가요?

만약 그렇다면 이 Icon을 지워주시면 됩니다 ~ !

질문자

아 이미지 업로드 전에는 플러스 아이콘을 그대로 있게 하고 이미지를 업로드하면 플러스 icon 대신 미리보기 이미지를 보이게 하려구요!

미리보기 이미지를 그 자리에 보이게 하는 것 까지는 되는데

이런 형태에서 멈춘 상태입니당..

애니메이션을 쓴 게 최선인데 그러면 뭔가 새로운 이벤트(입력 등)가 있을 때마다 플러스가 계속 다시 나타나서 아예 미리보기가 보이면, 플러스 아이콘을 없애는 방법을 쓰고 싶어서요

질문자

애니메이션이랑 투명도 이용해서 해결했습니당

작성한 질문수