ImageUpload.1.(imagePreview)

들어가기
cloudflare에 이미지를 업로드 하는 방법을
알아보고,
이미지를 업로드 해본다.

1. editProfile.tsx

interface EditProfileForm {
  email?: string
  phone?: string
  name?: string
  avatar?: FileList
  formErrors?: string
}
///2. avatar를 form안에 넣어준 후에, avatar?:FileList로 type설정해줌.

<form onSubmit={handleSubmit(onValid)} className="py-10 px-4 space-y-4">
        <div className="flex items-center space-x-3">
          {avatarPreview ? (
            <Image
              width={52}
              height={52}
              alt="Picture of the author"
              src={avatarPreview}
              className="w-14 h-14 rounded-full"
            />
          ) : (
            <div className="w-14 h-14 rounded-full bg-slate-400" />
          )}
          <label  /// 1. avatar(Image)를 form안에 넣어줌. 
                  /// 그래야 onValid에서 name이나, price등과 같이 data받음.
                  ///FlatList로 console에 찍힘.
            htmlFor="picture"
            className="cursor-pointer py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm font-medium focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 text-gray-700"
          >
            Change
            <input
              {...register('avatar')}
              id="picture"
              type="file"
              className="hidden"
              accept="image/*"
            />
          </label>
        </div>
        <Input
          register={register('name')}
          required={false}
          label="Name"
          name="name"
          type="text"
        />
        <Input
          register={register('email')}
          required={false}
          label="Email"
          name="email"
          type="email"
        />
        <Input
          register={register('phone')}
          required={false}
          label="Phone Number"
          name="phone"
          type="number"
          kind="phone"
        />
        {errors.formErrors ? (
          <span className="my-2 text-red-500 font-bold block">
            {errors.formErrors?.message}
          </span>
        ) : null}
        <Button text={loading ? 'Loading' : 'Update Profile'} />
      </form>
      
      const onValid = async ({ email, phone, name, avatar }: EditProfileForm) => {  ///3. onValid에서 avatar 값을 받아올 수 있음.
      
      const avatar = watch('avatar')
      ///4. react-hook-form의 watch를 이용해 avatar값이 입력될때마다 그 값을 받음.
      
      const [avatarPreview, setAvatarPreview] = useState('')
      useEffect(() => {
    if (avatar && avatar.length > 0) {
      const file = avatar[0]
      setAvatarPreview(URL.createObjectURL(file))
    }
  }, [avatar])
  ///5. avatar가 존재하면(사진입력칸을 클릭후 사진을 초이스) avatar[0]=>클릭한사진
  ///을 file에 담아줌.
  ///그리고 setAvatarPreview에 담아줌.
  ///URL.createObjectUrl은 내컴퓨터의 사진을 초이스했을때, 이 사진을
  ///웹브라우저에서 열수있게 사진의 URL을 만들어 주는 것임.
  
  {avatarPreview ? (
            <Image
              width={52}
              height={52}
              alt="Picture of the author"
              src={avatarPreview}
              className="w-14 h-14 rounded-full"
            />
          ) : (
            <div className="w-14 h-14 rounded-full bg-slate-400" />
          )}
   ///avatarPreview에 파일이 담기면, src={avatarPreview}로 미리보기가 가능해짐.
   ///원래 <img src={} />인데 NextJS라 Image를 사용하는데, 나중에 자세히 설명예정.
      
      

일단정리

<input
{...register('avatar')}
id="picture"
type="file"
className="hidden"
accept="image/*"
/>
통해서 받은 사진파일을 watch로 avatar에 담은 다음,
avatar은 file이라 type은 FileList,
URL.createObjectURL에 넣어서 파일의 주소를 만들어줌.
그리고 <img src={} / >로 주소를 넣어서 사진을 화면에 뿌려줄 수 있음.
미리보기 시킬 수 있음.
다음 POST에서 cloudFlare에 Upload를 해 본다.