react 사진 사진들 업로드 uploadImage

1. 화면에 파일을 클릭하면 - 선택할 수 있고 - 선택한 파일의 이미지가 바로 보여진다.
   파일의 이미지는 삭제가 가능할수 있다.
   파일은 1개부터 여러개 까지 가능하다.

2. 선택한 파일을 upload 하면 url파일을 s3에서 자동으로 만들어준다.

---

1. 1개 또는 여러개 파일을 선택한다.

<input onChange={(e)=>imageHandler(e)}  type="file" multiple className="block mt-8 w-full text-sm text-gray-900 rounded-sm cursor-pointer bg-gray-50"   />

2. 파일을 선택하면
   5개 파일 한정 / 2메가 바이트 한정한다.

 const imageHandler = async(e) => {
    setBrickupImage("")
    const files = e.target.files;
    
    if(files?.length > 1){
      alert(`5 Maxmium Files Limited. You have attached ${files.length} files.`)
      return
    }

    Object.keys(files).forEach(i => {
      if(files[i].size > 2000000){
        alert(`Oversize File Detected. Please Do not attach more than 2 Mbyte`)
        return
      }
      
      const file = files[i];
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = (e) => {
        setBrickupImage(prev => 
          [
            ...prev,  
            e.currentTarget.result
          ]
        )
      }
    })
    } 

3. 저장하는 state의 이름은 임의로 한다.

  const [brickupImage, setBrickupImage] = useState("")

4. state에서 업데이트되면 이미지를 보여주고 또 삭제하는 버튼을 만든다.

 <div className="flex flex-wrap  px-1 gap-2 pt-3">
      {
      brickupImage && brickupImage?.map((x, i)=>{
        return (
            <div key={i} className=" mt-4 w-24 h-24 mr-2 pr-4 bg-center bg-origin-content bg-cover rounded-lg" style={{backgroundImage: `url(${x.url})`}}>
             </div>
          <div key={i} className='relative'>
          <div  className="w-24 h-24 bg-indigo-500 bg-center bg-origin-content bg-cover rounded-lg" style={{backgroundImage: `url(${x})`}}></div>
          <div className="absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 -right-2 ">
          <button onClick={()=>onImageDelete(x)} >X</button>
           </div>
          </div>
       )
      })
     }
 </div>

5.Upload - Gql 설정하기

const UPLOAD = gql`
  mutation upload_image($input: CreateImageInput!){
    uploadImage(input:$input){
      ok, error, imageUrl
    }
  }
`

6. Mutation 사용하기

    const onCompleted = (data) => {
      console.log("brickupImage", data, JSON.stringify(data, null, 2))
    }
    const [uploadMutation, { loading: uploadLoading}] = useMutation(UPLOAD, {onCompleted})
    

    const onProjectEdit = async() => {
      try{
        const value = getValues()
        console.log('brickupImage', brickupImage)
        const response = await uploadMutation({
          variables: {
            input: {
              images: brickupImage
            }
          }
        })
        console.log('response---project', response)
  
        const processing = {
          name: "brickUp",
          percent: value.brickUpPercent,
          workerComment: value.workerComment, 
          picture: response?.uploadImage?.imageUrl
        }      
          console.log('processingdata', processing)
      }
      catch(error){
        alert("error occured. Please contact the developer, enesdyaz@gmail.com, code: onProjectEdit")
      }
    }```