이미지 업로드

DB에는 이미지를 다운 받을 수 있는 주소를 넣고
다른 용량 큰 컴퓨터에 이미지를 저장해둠 => Cloud Provider - AWS, GCP, Azure 등
컴퓨터 이름은 Storage, Storage 서비스라고도 함

<input type = "file" />

파일선택가능

브라우져에서 파일 선택하면 백엔드로 보내고(uploadFile), 백엔드는 스토리지로 파일 보냄.
스토리지에서는 파일 다운로드할 수 있는 주소를 줌

이미지를 그대로 저장하려면
blob(or clob) 타입으로 저장함(binury, 0과1로 저장)
용량이 크기때문에 잘 사용하지 않음

apollo-upload-client 설치

yarn add apollo-upload-client
yarn add @types/apollo-upload-client --dev

app.tsx

import {createUploadLink} 'apollo-upload-client'
import { ApolloClient, ApolloProvider, ApolloLink, InMemoryCache } from '@apollo/client'

const uploadLink = createUploadLink({
    uri: "http://backend06.codebootcamp.co.kr/graphql",
  })

  const client = new ApolloClient({
    link: ApolloLink.from([uploadLink]),
    cache: new InMemoryCache(),
  });

index.tsx

import { ChangeEvent, useState } from "react"
import { gql, useMutation } from "@apollo/client"
import { IMutation, IMutationUploadFileArgs } from "../../src/commons/types/generated/types"
import Modal from "antd/lib/modal/Modal"

    const UPLOAD_FILE = gql`
        mutation uploadFile($file:Upload!){
            uploadFile(file:$file){
                url
            }
        }
    `


export default function ImageUploadPage(){
    const [imageUrl, setImageUrl] = useState<string | undefined>("")
    const [uploadFile] = useMutation<Pick<IMutation, "uploadFile">, IMutationUploadFileArgs>(UPLOAD_FILE)


    const onChangeFile = async (event:ChangeEvent<HTMLInputElement>) =>{
        const file = event.target.files?.[0]
        console.log(file)
        try{
            const result = await uploadFile({
                variables:{file}
            })
    
            console.log(result.data?.uploadFile.url)
    
            setImageUrl(result.data?.uploadFile.url)

        } catch(error){
            Modal.error({
                content: error.message
            });
            
        }
    }

    return(
        <div>
            <div>이미지업로드 연습</div>
            <input type="file" onChange={onChangeFile} /> 
            {/* multiple 속성주면 한번에 여러개 */}
            <img width="300px" src={`https://storage.googleapis.com/${imageUrl}`} />
        </div>
    )
}