クライアント側での添付ファイル読み込みとアップロード

VercelのNext.js/Reactアプリでファイルアップロードを実装しようとしましたが、アップロードする画像を保存したいわけではない（生成AIに画像ファイルの解釈をしてもらうだけなので処理後は破棄してOK）ので、簡易的な方法を探しました。

結果、クライアント側でBase64に変換してからサーバー側に送信することにしました。
デメリットとしては通信量が多くなります。

<input type="file" id="attachedFile" accept="image/jpeg, image/png, image/gif, image/webp" 
  onChange={(evt) => {
      // Read the file content and convert to data URI in the client side
      const selectedFile = evt.target.files![0];
      if (!selectedFile) {
        setImageUrl('')
        return
      }
          
      const reader = new FileReader();
      reader.onload = () => {
        const dataImageUrl = reader.result as string
        setImageUrl(dataImageUrl);
      };
      reader.readAsDataURL(selectedFile);
}} />

<input type="text" value={imageUrl}
  onChange={(e)=>{setImageUrl(e.currentTarget.value)}}/>

const [imageUrl, setImageUrl] = useState('')となっている前提です。もともとinputは存在していて、
外部URLを指定することができていたので、これで良かったのかなと。

ボタンを押すとファイルを指定する場合はこんな感じ。

<button className={'mx-1 ' + (fileSelected ? 'text-teal-700 active:text-teal-600' : '')} onClick={() => fileImageRef.current?.click()}>
    <PaperclipIcon className="h-5 w-5" />
    <span className="sr-only">Upload</span>
</button>