개발자로 전향중

CloudFlare Stream Cloud에 다이렉트 업로드 본문

React

CloudFlare Stream Cloud에 다이렉트 업로드

hovinee 2023. 10. 17. 10:33
const UploadVideo = () => {
  const apiUrl = `https://api.cloudflare.com/client/v4/accounts/${accountId}/stream/direct_upload`

  const data = {
    maxDurationSeconds: 3600,
  }

  const [selectedFile, setSelectedFile] = useState(null)
  const [uid, setUid] = useState('')
  const [go, setGo] = useState(false)
  const handleFileChange = (e) => {
    setSelectedFile(e.target.files[0])
  }

  const handleUpload = async () => {
    if (selectedFile) {
      await fetch(apiUrl, {
        method: 'POST',
        headers: {
          Authorization: `Bearer ${apiToken}`,
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
      })
        .then((res) => res.json())
        .then(async (data) => {
          setUid(data.result.uid)
          const uploadURL = data.result.uploadURL
          const formData = new FormData()
          formData.append('file', selectedFile, data.result.uid)
          await fetch(uploadURL, {
            method: 'POST',
            body: formData,
          })
        })
        .then(async () => {
          if (uid) {
            await fetch(
              `https://api.cloudflare.com/client/v4/accounts/${accountId}/stream/${'1cb5a6405f0f408eb9673fb12b61edad'}`,
              {
                headers: {
                  Authorization: `Bearer ${apiToken}`,
                  'Content-Type': 'application/json',
                },
              },
            )
              .then((res) => res.json())
              .then((data) => {
                console.log(data.result.status, data.result.pctcomplete)
              })
          }
        })

        .catch((error) => {
          console.error('Error:', error)
        })
    } else {
      console.log('파일을 선택하세요.')
    }
  }

  return (
    <div>
      비디오 업로드
      <div className="relative">
        {/* <iframe
          className="left-0 top-0 h-[169px] w-[`800px`]"
          allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
        /> */}
      </div>
      <input type="file" accept="video/*" onChange={handleFileChange} />
      <button onClick={handleUpload}>업로드</button>
      <div id="drag-drop-area" style={{ height: '300px' }}></div>
      <div className="for-ProgressBar"></div>
    </div>
  )
}

export default UploadVideo

'React' 카테고리의 다른 글

FE 렌더링 최적화 히스토리  (1) 2023.11.01
Cloudflare 200MB이상 다이렉트 업로드  (0) 2023.10.17
Buffer image 데이터 base64으로 만들기  (0) 2023.02.01
TypeScript 환경변수 설정하고 싶을때  (0) 2022.12.02
Redux-Toolkit TypeScript 여러개의 객체를 배열 추가할때  (0) 2022.11.24
'React' Related Articles more