Hello there,
I have an app built in react which allows my clients to upload video files to Cloudflare Stream. I’m using tus-js-client for the upload, video file size varies from 300Mb up to 1gig.
We have started experiencing errors for .mp4 video file format,
This error persists even after
tus resumes the upload a couple of times, interestingly this is not happening for .avi format (but that is not ideal format).
The code which is handling this:
const onUpload = async () => {
const UPLOAD_ENDPOINT = 'https://api.cloudflare.com/client/v4/accounts/cloudeFlareID/stream'
const UPLOAD_TOKEN = 'token'
const AUTH_EMAIL = 'email'
const file = videoFile.videoFile;
const upload = new tus.Upload(file, {
endpoint: UPLOAD_ENDPOINT,
retryDelays: [0, 3000, 5000, 10000, 20000],
headers: {
// Authorization: `Bearer ${UPLOAD_TOKEN}`,
'X-Auth-Email': `${AUTH_EMAIL}`,
'X-Auth-Key': `${UPLOAD_TOKEN}`,
},
metadata: {
filename: file.name,
filetype: file.type,
defaulttimestamppct: 0.5,
},
onError(error) {
console.log(`Failed because: ${error}`)
},
onProgress(bytesUploaded, bytesTotal) {
// eslint-disable-next-line no-mixed-operators
const percentage = (bytesUploaded / bytesTotal * 100).toFixed(2)
setProgressPercentage(percentage)
},
onSuccess() {
try {
if (upload.url) {
const data = new FormData()
data.append('thumbnail', video.thumbnail ? video.thumbnail : '')
data.append('title', video.title)
data.append('description', video.description)
data.append('body', video.body)
data.append('category', video.category)
data.append('video_id', upload.url)
data.append('podcast_url', video.podcastUrl ? video.podcastUrl : '')
data.append('additionalPdfContentLink', video.additionalPdfContentLink ? video.additionalPdfContentLink : '')
fetch(videoCreateEndpoint, {
method: 'POST',
header: { 'content-type': 'multiplart/form-data' },
body: data,
})
.then((response) => response.json)
.then((data) => {
thumbnailUploadSuccess(true)
setSuccessMessage(true)
setTimeout(() => {
history.push('/videos')
}, 10000);
})
}
} catch (error) {
// setOnCreateError(true)
// setOnCreateMessage('Unable to Create Video')
console.log('Error from', error)
console.log('Download %s from %s', upload.file.name, upload.url)
}
},
})
upload.findPreviousUploads().then((previousUploads) => {
if (previousUploads.length) {
upload.resumeFromPreviousUpload(previousUploads[0])
}
upload.start()
})
upload.start()
}
Code is from your github page on simple file upload, with a little twist for my use case.
Did anyone experience a similar issue once using the JS library before?