[WIL] 221225

사진 미리보기 삭제 구현

  const [imageSrc, setImageSrc] = useState('');

  ...

// preview 삭제 <- state 비우기
  const handleImageDelete = () => {
    setImageSrc(null);
  };
  
    ...
    
    <button
      	type="button"
      	className="removePhoto"
      	onClick={handleImageDelete}
    >

 

https://taehoblog.netlify.app/react/previewimg/

[React] Preview Image - 이미지 미리보기

 

사진 미리보기 삭제

- 삭제 버튼 기본 상태값 false 안 보임

-> 이미지 업로드 버튼 누르면 삭제 버튼이 보이고

-> preview 삭제를 누르면 버튼 사라지게 하기

  const [visible, setVisible] = useState(false); // preview 삭제 버튼
  
  ...
  
  const handleImageUpload = (event) => {
    encodeFile(event.target.files[0]);
    setVisible(!false);
  };

  // preview 삭제 <- state 비우기
  const handleImageDelete = () => {
    setImageSrc(null);
    setVisible(false);
  };
  
  ...
  
      {visible && (
      <button
        type="button"
        className="removePhoto"
        onClick={handleImageDelete}
      >
        <img src={Close} alt="close icon" />
      </button>
    )}

https://breathtaking-life.tistory.com/123

[리액트] 버튼 클릭시 요소 표시, 숨기기

 

사진 미리보기 전체 코드

// 함수
  const [visible, setVisible] = useState(false); // preview 삭제 버튼
  const [imageSrc, setImageSrc] = useState('');

  const encodeFile = (fileBlob) => {
    const reader = new FileReader();
    reader.readAsDataURL(fileBlob);

    return new Promise((resolve) => {
      reader.onload = () => {
        setImageSrc(reader.result);
        resolve();
      };
    });
  };

  const handleImageUpload = (event) => {
    encodeFile(event.target.files[0]);
    setVisible(!false);
  };

  // preview 삭제 <- state 비우기
  const handleImageDelete = () => {
    setImageSrc(null);
    setVisible(false);
  };
  
  
  // view
                <ShowPhoto>
                <ImgPreview>
                  {imageSrc && <img src={imageSrc} alt="preview-img" />}
                </ImgPreview>
                {visible && (
                  <button
                    type="button"
                    className="removePhoto"
                    onClick={handleImageDelete}
                  >
                    <img src={Close} alt="close icon" />
                  </button>
                )}
              </ShowPhoto>
              
              ...
              
          <StPhoto>
          <input
            type="file"
            accept="image/*"
            id="input-file"
            className="invisible"
            onChange={handleImageUpload}
          />
          <div className="photoBox">
            <label className="uploadPhoto" htmlFor="input-file">
              <img src={Photo} alt="photo icon" />
            </label>
          </div>
        </StPhoto>

2022.12.21 - [⛵ 부트캠프, 항해99/TIL] - [TIL] 221220

[TIL] 221220

MDN 설명

FileReader 객체는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는File 혹은 Blob 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해줍니다.
File 객체는 <input> 태그를 이용하여 유저가 선택한 파일들의 결과로 반환된 FileList 객체, 드래그 앤 드랍으로 반환된 DataTransfer (en-US) 객체 혹은 HTMLCanvasElement의 mozGetAsFile() API로 부터 얻습니다.

FileReader.result
파일의 컨텐츠입니다. 이 속성은 읽기 작업이 완료되고 읽기 작업의 초기화에 사용한 방식으로 결정된 데이터의 포맷이 정해진 후에 유효합니다.

FileReader.onload
load 이벤트의 핸들러. 이 이벤트는 읽기 동작이 성공적으로 완료 되었을 때마다 발생합니다.

FileReader.readAsDataURL()
Starts reading the contents of the specified Blob, once finished, the result attribute contains a data: URL representing the file's data.

https://developer.mozilla.org/ko/docs/Web/API/FileReader

FileReader - Web API | MDN

 

readAsDataURL()
컨텐츠를 특정 Blob이나 File에서 읽어오는 역할을 하게되고, 읽어오는 read가 종료되는 경우에, readyState의 상태가 DONE이 되고, loadend이벤트가 트리거 되면서, base64 인코딩된 스트링 데이터가 result에 담겨지게 된다.

https://taehoblog.netlify.app/react/previewimg/

[React] Preview Image - 이미지 미리보기

 

encodeFile의 return문 안에서 reader 는

 

        // console.log(reader);

이렇게 보임

 

*구현 화면

 

사진 데이터 전송

 

이미지를 base64로 인코딩한 값

        console.log(reader.result);

        console.log(typeof reader.result);

string 문자열임

 

data:image/png;base64,

 

이 부분을 지우고 전송해야 한다고 함

https://taeho-jo.github.io/posts/naverSmsError/

[Error] Naver MMS 이미지 전송하기

 

콤마를 기준으로 뒤의 데이터가 필요하므로 자바스크립트에서 특정 문자열까지 자르는 방법을 찾았다.

이렇게 하면

 

        const fileData = reader.result.split(',');
        console.log(fileData);

 

*사진 데이터를 서버로 전송하는 form data 를 써서 여러 방법으로 시도했는데 모르겠어서 일단 패스함

 

https://heewon26.tistory.com/275

flex: 1 1 0 의 의미

 

게시글 디테일(post) 페이지 작업 중인데 카페인 덕분인지 잠이 안 온다.

 

*첫 협업을 진행하며 느낀 점

: 기한 안에 배포를 하지 못해서 정말 너무 슬프고 죄송하고 괴로웠었다.

 

이번 프로젝트는 미리 배포해놓고 발표 준비까지 잘 끝내야겠다..!