imgixを使ったReactアップローダーの作成

npx create-react-app imgix-uploader
cd imgix-uploader

npm install axios react-imgix

import { useState, useEffect } from "react"
import axios from "axios"
import Imgix from "react-imgix"
 
export default function ReactUploader() {
  return (
    <div>
      <form className="mb-4" onSubmit={handleSubmit}>
        {/* APIキー */}
        <input
          type="text"
          placeholder="Your imgix API key"
          value={apiKey}
          onChange={(e) => setApiKey(e.target.value)}
        />
        {/* Source ID */}
        <input
          type="text"
          placeholder="Source ID"
          value={sourceId}
          onChange={(e) => setSourceId(e.target.value)}
        />
        {/* imgixドメイン名 */}
        <input
          type="text"
          placeholder="your_subdomain.imgix.net"
          value={imgixDomain}
          onChange={(e) => setImgixDomain(e.target.value)}
        />
        {/* 画像をアップロードするパス */}
        <input
          type="text"
          placeholder="path/to/upload/to/"
          onBlur={(e) => {
            // アップロードパスを解析して末尾のスラッシュを削除します
            let parsedPath = ""
            if (uploadPath.charAt(0) !== "/" && uploadPath.length > 1) {
              parsedPath = "/" + uploadPath
            } else {
              parsedPath = uploadPath
            }
            if (uploadPath.charAt(uploadPath.length - 1) !== "/") {
              parsedPath += "/"
            }
            setUploadPath(parsedPath)
          }}
          value={uploadPath}
          onChange={(e) => setUploadPath(e.target.value)}
        />
        {/* 画像アップロード */}
        <input type="file" onChange={(e) => setImg(e.target.files[0])} />
        <button disabled={disableForm}>Upload Image</button>
      </form>
      {/* ステータス情報はここに表示されます */}
      <div>
        <h3>セッションのステータスは: {sessionStatus}</h3>
        <div>
          {sessionStatus === "ERROR" && <h3>{error}</h3>}
          {/* セッションが完了したら、imgix画像を表示します */}
          {sessionStatus === "COMPLETE" && (
            <Imgix
              src={imgixUrl}
              width={200}
              height={200}
              imgixParams={{ auto: "format,compress,enhance", fit: "crop" }}
            />
          )}
        </div>
        {sessionStatus === "COMPLETE" && <h4>{imgixUrl}</h4>}
      </div>
    </div>
  )
}

export default function ReactUploader() {
  const [img, setImg] = useState()
  const [sessionStatus, setSessionStatus] = useState("No Status")
  const [imgixUrl, setImgixUrl] = useState()
  const [apiKey, setApiKey] = useState("")
  const [sourceId, setSourceId] = useState("")
  const [imgixDomain, setImgixDomain] = useState("")
  const [uploadPath, setUploadPath] = useState("")
  const [sessionId, setSessionId] = useState("")
  const [presignedUrl, setPresignedUrl] = useState("")
  const [error, setError] = useState("")
  const [disableForm, setDisableForm] = useState(false)
 
  return {
    /* 手順1のフォーム要素 */
  }
}

export default function ReactUploader() {
  // 手順2と3のインポート文と状態変数
 
  // フォームの送信を処理する関数
  const handleSubmit = async (e) => {
    e.preventDefault()
 
    // エラーハンドリング
    if (!img) {
      alert("アップロードする画像を選択してください")
      return
    } else if (!apiKey) {
      alert("imgix APIキーを入力してください")
    } else if (!sourceId) {
      alert("ソースIDを入力してください")
    }
 
    setDisableForm(true)
    setSessionStatus("OPENING")
 
    //セッションを作成してセッションIDを設定
    await axios({
      method: "POST",
      url:
        `https://api.imgix.com/api/v1/sources/${sourceId}/upload-sessions/create` +
        uploadPath +
        img.name,
      maxBodyLength: Infinity,
      headers: {
        "Content-Type": "application/vnd.api+json",
        Authorization: `Bearer ${apiKey}`,
      },
    })
      .then((response) => {
        setSessionId(response.data.data.id)
        setSessionStatus(response.data.data.attributes.status)
        setPresignedUrl(response.data.data.attributes.url)
      })
      .catch((error) => {
        // サーバーエラーハンドリング
        console.log(error?.response?.data?.errors[0]?.detail)
        setSessionStatus("ERROR")
        setError(error?.response?.data?.errors[0]?.detail)
        console.log(error.message)
      })
  }
 
  return {
    /* 手順1のフォーム要素 */
  }
}

export default function ReactUploader() {
 
  // 手順2と3のインポート文と状態変数
 
  useEffect(() => {
    //セッションIDから取得したプリサインURLを使用して画像をアップロードします
    // ドキュメント: https://docs.imgix.com/apis/management/assets#using-upload-sessions
    if (sessionStatus === "PENDING") {
      axios({
        method: "PUT",
        url: presignedUrl,
        headers: {
                  "Content-Type": "application/octet-stream",
                },
        data: img,
              }
            )
        .then(() => {
          // 画像がアップロードされたら、セッションを閉じて完了状態を設定します
          closeSession(sessionId)
          setSessionStatus("COMPLETE")
          setImgixUrl("https://" + imgixDomain + uploadPath + img.name)
          setDisableForm(false)
        })
        .catch((error) => {
          // エラーが発生した場合、エラーハンドラを設定します
          closeSession(sessionId)
          setSessionStatus("ERROR")
          console.log(error.message)
          setDisableForm(false)
        })
    }
 
    // エラーやアップロード時にセッションを閉じる関数
    const closeSession = (sessionId) => {
      // セッションを閉じます
      axios({
        method: "POST",
        url:
        `https://api.imgix.com/api/v1/sources/${sourceId}/upload-sessions/close/` +
        sessionId,
        headers: {
                  "Content-Type": "application/vnd.api+json",
                  Authorization: `Bearer ${apiKey}`,
                },
              }
      )
      .catch((error) => {
        console.log(error)
      })
    }
  }, [sessionStatus, error])
 
  // 手順4のhandleSubmit関数
 
  return (
    // 手順1のフォーム要素
 )
}

import React from "react"
import ReactUploader from "./ReactUploader"
 
function App() {
  return (
    <div className="App">
      <h1>imgixで画像をアップロード</h1>
      <ReactUploader />
    </div>
  )
}
 
export default App

npm start