My php service end point: /getUploadLink
$ch = curl_init("https://api.cloudflare.com/client/v4/accounts/".$ACCOUNT."/stream?direct_user=true");
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_HEADER, 1);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 5);
curl_setopt($ch, CURLOPT_TIMEOUT, 5);
curl_setopt($ch, CURLOPT_HTTPHEADER, array(
"Authorization: Bearer ". $TOKEN,
"Tus-Resumable: 1.0.0",
"Upload-Length: ".$VIDEO_LENGTH,
"Upload-Metadata: 'requiresignedurls'"
));
I am getting the Location perfectly.. let me say it is
$location = "https://upload.videodelivery.net/tus/XXXXXXXX?tusv2=true";
My response will:
header('Access-Control-Expose-Headers: Location');
header("Access-Control-Allow-Methods: PATCH, HEAD");
header('Access-Control-Allow-Headers: *');
header('Access-Control-Allow-Origin: *');
header('Location: '.$location);
http_response_code(201);
And this is tus-js client:
var vid = document.getElementById('fileinput');
vid.addEventListener("change", function(e) {
// Get the selected file from the input element
var file = e.target.files[0]
var mime = file.type, // store mime for later
rd = new FileReader();
rd.onload = function(e) { // when file has read:
var blob = new Blob([e.target.result], {type: mime}), // create a blob of buffer
url = (URL || webkitURL).createObjectURL(blob), // create o-URL of blob
video = document.createElement("video"); // create video element
video.preload = "metadata"; // preload setting
video.addEventListener("loadedmetadata", function() { // when enough data loads
console.log( "Duration: " + video.duration + "s"); // show duration
var duration = parseInt(video.duration, 10);
// Create a new tus upload
var upload = new tus.Upload(file, {
// Endpoint is the upload creation URL from your tus server
endpoint: "/getUploadLink/"+duration,
chunkSize: 52428800, //50 * 1024 * 1024
retries: 9,
// Retry delays will enable tus-js-client to automatically retry on errors
retryDelays: [0, 1000, 3000, 5000],
overridePatchMethod: false,
// Attach additional meta data about the file for the server
metadata: {
filename: file.name,
filetype: file.type,
},
// Callback for errors which cannot be fixed using retries
onError: function(error) {
console.log("Failed because: " + error)
if (window.confirm(`Failed because: ${error}\nDo you want to retry?`)) {
upload.start()
return
}
},
// Callback for reporting upload progress
onProgress: function(bytesUploaded, bytesTotal) {
var percentage = (bytesUploaded / bytesTotal * 100).toFixed(2)
console.log(bytesUploaded, bytesTotal, percentage + "%")
},
// Callback for once the upload is completed
onSuccess: function() {
console.log("Download %s from %s", upload.file.name, upload.url)
}
})
// Check if there are any previous uploads to continue.
upload.findPreviousUploads().then(function (previousUploads) {
// Found previous uploads so we select the first one.
if (previousUploads.length) {
upload.resumeFromPreviousUpload(previousUploads[0])
}
// Start the upload
upload.start()
})
});
video.src = url; // start video load
};
rd.readAsArrayBuffer(file);
So this setup send file until chunk size. Here is my browser’s console
size : 290646801
VM1387:23 Duration: 2363.041667s
VM1387:54 0 290646801 '0.00%'
VM1387:54 743424 290646801 '0.26%'
VM1387:54 1486848 290646801 '0.51%'
VM1387:54 1858560 290646801 '0.64%'
VM1387:54 2230272 290646801 '0.77%'
.....
.....
.....
VM1387:54 52039680 290646801 '17.90%'
VM1387:54 52411392 290646801 '18.03%'
VM1387:54 52428800 290646801 '18.04%'
httpStack.js:65 PATCH https://upload.videodelivery.net/tus/XXXXXXXXXXXX?tusv2=true 400
(anonymous) @ httpStack.js:65
value @ httpStack.js:56
(anonymous) @ upload.js:902
Promise.then (async)
_ @ upload.js:901
value @ upload.js:841
(anonymous) @ upload.js:746
Promise.then (async)
value @ upload.js:733
value @ upload.js:690
(anonymous) @ upload.js:582
Promise.then (async)
value @ upload.js:550
value @ upload.js:383
(anonymous) @ upload.js:219
Promise.then (async)
value @ upload.js:211
(anonymous) @ VM1387:71
Promise.then (async)
(anonymous) @ VM1387:64
VM1387:45 Failed because: Error: tus: unexpected response while uploading chunk, originated from request (method: PATCH, url: https://upload.videodelivery.net/tus/XXXXXXXXXXX?tusv2=true, response code: 400, response text: {
"result": null,
"success": false,
"errors": [
{
"code": 10005,
"message": "Bad Request"
}
],
"messages": null
}
, request id: n/a)
After uploaded size reaches chunk size I get error. Do you have any idea about it?