2021년 7월 20일 FIRST PROJECT DAY2( project upload page 파일 업로드 preview 기능, Wiki 작성)

DEV LOG

오늘의 스케쥴

• stand up meeting
• 파일 업로드 preview 기능 구현(solo)
• API docs 작성(with BE)
• 시스템 아키텍쳐 작성(with BE)
• FE Task Issue 작성 및 Wiki 작성(FE)

오늘은 어떻게 프로젝트에 기여했나요?

• 파일 업로드 preview 기능 구현을 완료하였고 각각의 사진에 해당하는 div태그를 클릭했을 시 해당 사진이 preview에 render되도록 하였음.
• FE(Front-End) Task Issue 작성.
• Wiki(Team Rule, Team Introduction)작성. 

오늘의 프로젝트에서 힘든 점은 무엇인가요?

• input 태그를 통하여 파일을 불러오고 그 파일정보를 state에 저장하는 것까지 성공했으나 이를 img 태그에 넣어서 render하는 것에 실패(1일차의 문제점)
• 위 문제를 해결하기위하여 react에서 appendchild하는 방법을 검색하였고 아래와 같은 결과를 발견

https://stackoverflow.com/questions/58200373/how-to-append-child-to-react-element

How to append child to React element?

function App() {
  // the data
  const childrenData = [
        {key: 1, name: "Hello"},
        {key: 2, name: "World"},
        {key: 3, name: "etc"}
      ];
  // the loop
  const children = childrenData.map((val) => {
    return (
      React.createElement("p", {id: val["key"]}, val["name"])
    )
  })
  // the div with children inside
  return (
    React.createElement("div", {className: "contexCon"},
      children
    )
  )
}

// render
ReactDOM.render(React.createElement(App, {}), document.getElementById("root"));

//검색 결과

그리고 이를 본인의 코드에 적용

import React, { useState, useRef } from 'react';
import axios from 'axios';
// https://stackoverflow.com/questions/58200373/how-to-append-child-to-react-element appendchild구현
// https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input/file 공식문서
// https://basketdeveloper.tistory.com/70 미리보기 포함

//본문 미리보기 + portfolio upload 페이지에는 글 작성시 작게 미리보기 화면 구현

function ImageUploader() {
  const input = useRef(null);
  const [defaultImg, setDefaultImg] = useState('');
  const [selected, setSelected] = useState(null);
  const [curFiles, setCurFiles] = useState('');

  function inputFileHandler(e) {
    const imageFiles = input.current.files; //imageFiles는 객체형식
    console.log(Object.values(imageFiles));
    const fileArray = Object.values(imageFiles); //배열 형식
    setCurFiles(fileArray);
    setSelected(e.target.files);
    // console.log(e.target.files);
  }

  function clickHandler(e) {
    setDefaultImg(curFiles[Number(e.target.id)]);
  }

  console.log(defaultImg);

  function postHandler() {
    //server에 form data를 전송하는 부
    const formData = new FormData();
    formData.append('file', selected);

    return axios
      .post('api/upload', formData)
      .then(res => {
        alert('성공');
      })
      .catch(err => {
        alert('실패');
      });
  }
  // https://velog.io/@edie_ko/React-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%97%85%EB%A1%9C%EB%93%9C%ED%95%98%EA%B8%B0-with-Axios
  // https://kyounghwan01.github.io/blog/React/image-upload/#formdata-%E1%84%92%E1%85%A2%E1%86%AB%E1%84%83%E1%85%B3%E1%86%AF%E1%84%85%E1%85%B5%E1%86%BC
  return (
    <div className="imageUploaderContainer">
      {React.createElement(
        'div',
        { className: 'contexCon' },
        curFiles === '' ? (
          <img className="preview" src="images/preview.png" />
        ) : (
          React.createElement('img', {
            className: 'preview',
            src: URL.createObjectURL(defaultImg), //https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL
          })
        )
      )}
      <div>
        {curFiles.length !== 0 ? (
          curFiles.map((curFile, idx) => {
            return (
              <div
                className="imgNameimgDesc"
                id={idx}
                key={idx}
                style={{ border: '1px solid red', marginBottom: '10px' }}
                onClick={e => clickHandler(e)}
              >
                번호 {idx} <br />
                사진이름 {curFile.name}
              </div>
            );
          })
        ) : (
          <h1>프로젝트의 사진을 선택해주세요.</h1>
        )}
      </div>
      <input
        ref={input}
        type="file"
        name="image_uploads"
        accept=".png, .jpg, .jpeg"
        onChange={e => inputFileHandler(e)}
        multiple
      />
      <button type="button" onClick={postHandler}>
        Upload!
      </button>
    </div>
  );
}

export default ImageUploader;

작동을 하다가 

TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.

에러가 발생했다....어떻게 handling 할 것인가?ㅠㅠ

 

내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?

• 오전 중 이미지 업로드 및 관련기능 오류 분석/해결 구현
• DB로부터 thumbnail, desc를 받아와서 presentation animation을 보여줄 수 있게 코드 구현