• 카테고리

    질문 & 답변
  • 세부 분야

    풀스택

  • 해결 여부

    미해결

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

21.04.07 21:57 작성 조회수 91

0

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

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

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

답변 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을 지워주시면 됩니다 ~ ! 

열음님의 프로필

열음

질문자

2021.04.08

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


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

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

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

열음님의 프로필

열음

질문자

2021.04.08

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