Hi there! I’ve been struggling with this for days now.
I am currently using:
Ruby: 2.4.1
Rails: 5.2.3
Using gem “tus-server”, “~> 2.3”
My code:
video_upload.js
import * as tus from "tus-js-client";
$(document).on('turbolinks:load', function () {
console.log("hello this is from video upload")
const directUploadForm = document.getElementById("videoTusUploadForm");
const projectInput = document.querySelector(".videoTusUploadInput");
let projectFiles = projectInput.files[0]
// request a one-time tokenized URL(POST) to https://api.cloudflare.com/client/v4/accounts/$ACCOUNT/stream?direct_user=true
// Response will contain a Location header which will provide one-time URL that you will be used to upload the video using TUS
projectInput.addEventListener("input", function() {
const fileTypeVideo = this.files[0].type.includes('video')
const token = ""
const uploadLength = 900000000
const authEmail = ""
const authKey = ""
const accId = ''
if (fileTypeVideo) {
// request for one-time tokenzied URL
async function handleRequest() {
const init = {
method: 'POST',
headers: {
'Authorization': `bearer ${token}`,
'Tus-Resumable': '1.0.0',
'Upload-Length': uploadLength,
'X-Auth-Email': authEmail,
'X-Auth-Key': authKey,
'Content-Type': "application/json"
},
}
const response = await fetch(`https://api.cloudflare.com/client/v4/accounts/${accId}/stream?direct_user=true`, init)
const results = await gatherResponse(response)
return new Response(null, {headers: {'Access-Control-Expose-Headers':'Location','Access-Control-Allow-Headers':'*','Access-Control-Allow-Origin':'*','location': results}})
}
async function gatherResponse(response) {
const { headers } = response
return await headers.get('location')
}
handleRequest()
.then((res) => {
const location = res.headers.get("location")
const endPoint = `http://localhost:3000/video_upload?location=${location}`
const token = $("meta[name='csrf-token']").attr("content");
const options = {
endpoint: endPoint,
headers: {
'X-CSRF-Token': token
},
chunkSize: 50 * 1024 * 1024,
resume: true,
onError: function(error) {
console.log("Failed because: " + error)
},
onProgress: function(bytesUploaded, bytesTotal) {
var percentage = (bytesUploaded / bytesTotal * 100).toFixed(2)
console.log(bytesUploaded, bytesTotal, percentage + "%")
},
onSuccess: function() {
console.log("Download %s from %s", upload.file.name, upload.url)
}
}
const upload = new tus.Upload(document.querySelector(".videoTusUploadInput").files[0], options)
upload.start()
// start uploading here
})
console.log("video")
} else {
console.log("not a video")
}
});
Rails controller:
class VideosController < ApplicationController
def index
end
def new
@video = Video.new
end
#
def file
respond_to do |format|
msg = { :status => "ok", :message => "Success!",
'Access-Control-Expose-Headers' => 'Location',
'Access-Control-Allow-Headers' =>'*',
'Access-Control-Allow-Origin' => '*',
'Tus-Resumable' => "1.0.0"
}
format.json { render :json => msg, :location => params[:location] }
end
end
end
When I run the code I get an error as follows:
Access to XMLHttpRequest at 'https://upload.videodelivery.net/tus/3d3a84bc511469e8bc89785de7119146?tusv2=true' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field x-csrf-token is not allowed by Access-Control-Allow-Headers in preflight response.
I’ve tried pushing this to the production server, but, no luck. I am out of ideas… I would get some help if possible thank you