Video

Get your account ID

Get your API KEY

App.js (<200mb video)

import React, { useState } from "react";
import axios from "axios";
import { Box, Button, Input } from "@chakra-ui/react";

function App() {
  const [videoFile, setVideoFile] = useState();
  
  const ACCOUNT_ID = "xxx";
  const API_KEY = "yyy";
  const bearer = `Bearer ${API_KEY}`

  const uploadVideo = async () => {
    let formData = new FormData();
    let cloudflareResponse;

    formData.append("file", videoFile[0]);
    try {
      console.log("trying to upload");
      cloudflareResponse = await axios.post(`https://api.cloudflare.com/client/v4/accounts/${ACCOUNT_ID}/stream`,formData, {
		headers: {
          Authorization: bearer,
		  "Content-Type":"multipart/form-data"
        }
      });
      if (cloudflareResponse) console.log("upload sccess");
    } catch (e) {
      console.log("Error while trying to upload video to Cloudflare API ", e.message);
	  console.log(e)
	}
  };

  return (
    <Box width='300px'>
      <Input type="file" id='video' placeholder="upload" onChange={(e) => setVideoFile(e.target.files)} />
      <Button onClick={() => uploadVideo()}>Submit</Button>
    </Box>
  );
}

export default App;

App.js (>200mb video)

// Some code
import React, { useState } from "react";
import axios from "axios";
import { Box, Button, Input, Text } from "@chakra-ui/react";

import * as tus from 'tus-js-client'

function App() {
  const [videoFile, setVideoFile] = useState();
  const [uploadPercent,setUploadPercent]=useState();
  let mediaId='';

  const ACCOUNT_ID = process.env.REACT_APP_CLOUDFLARE_ACCOUNT;
  const API_KEY = process.env.REACT_APP_CLOUDFLARE_TOKEN;
   const tusVideo=async()=>{
	const options = {
		endpoint: `https://api.cloudflare.com/client/v4/accounts/${ACCOUNT_ID}/stream`,
		headers: {
		  Authorization: bearer,
		},
		chunkSize: 50 * 1024 * 1024, // Required a minimum chunk size of 5MB, here we use 50MB.
		// resume: true,
		metadata: {
		  filename: videoFile[0].name,
		  filetype: videoFile[0].type,
		  defaulttimestamppct: 0.5,
		},
		uploadSize: videoFile[0].size,
		onError: function (error) {
		  throw error;
		},
		onProgress: function (bytesUploaded, bytesTotal) {
		  var percentage = ((bytesUploaded / bytesTotal) * 100).toFixed(2);
		//   console.log(bytesUploaded, bytesTotal, percentage + '%');
		  setUploadPercent(`${percentage}%`)
		},
		onSuccess: function () {
		  console.log('Upload finished');
		},
		onAfterResponse: function (req, res) {
		  return new Promise(resolve => {
			var mediaIdHeader = res.getHeader('stream-media-id');
			if (mediaIdHeader) {
			  mediaId = mediaIdHeader;
			}
			resolve();
		  });
		},
	  };
	
	console.log('in tus video')
	var upload = new tus.Upload(videoFile[0], options);
	upload.start();
	console.log('tus start')
  }
  
  return (
    <Box width='300px'>
      <Input type="file" id='video' placeholder="upload" onChange={(e) => setVideoFile(e.target.files)} />
	  <Button onClick={() => tusVideo()}>Tus Upload</Button>
	  <Text>{uploadPercent}</Text>
    </Box>
  );
}

export default App;