https://discord.cloudflare.com logo
Join Discord
Powered by
# stream
  • i
    Alongside OPTIONS, the actual POST or GET also needs to return CORS headers.
  • i
    So OPTIONS first which returns header, browser sends real request which also has to return the CORS header otherwise it won't work at all.
  • j
    for the actual post request there's nothing
  • i
    Oh, you're sending the POST to videodelivery
  • i
    Never mind then
  • j
    it's meant to be a direct upload right?
  • j
    that's the URL the CF backend returns
  • i
    Yes, the client should be able to call it
  • i
    You send request to backend -> backend creates upload and returns stuff -> you upload from client
  • j
    I just tried using the Cloudflare upload example on codepen, I used the direct upload thing I got as well, and the error happened there as well.
  • j
    Im just not getting CORS headers
  • j
    oh, wait.
  • j
    it's not finishing because the size isn't accurate
  • j
    so it is going up
  • j
    it's just not finishing because it thinks there's more
  • i
    Oh yeah, I ran into this issue before
  • i
    So it's confusing, slightly
  • i
    When you request you send the size of the video i.e. like the size of the file, but when you upload you send the length. Or something like that, sec let me check docs.
  • i
    So when you do the request to generate the signed URL, the header 
    Upload-Length
    should be length in bytes.
  • j
    I'm parsing the ``file.size`` in Javascript, that seems to be the only way to get it I can see
  • j
    Copy code
    async function uploadVideo(e) {
    // Get the selected file from the input element
    var file = e.target.files[0]
    if (!file) {
      return;
    }

    const uploadLink = await getUploadLink(file.size);
    if (uploadLink == null) { alert(`[error]: Could not find drop point.`); }

    setShowVideoDetailsBox(true);

    // Create a new tus upload
    var upload = new tus.Upload(file, {
        endpoint: uploadLink,
        retryDelays: [0, 3000, 5000, 10000, 20000],
        metadata: {
          filename: file.name,
          filetype: file.type
        },
        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)
        }
    })

    // 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()
    })
  }
  • i
    What are you sending in the 
    Upload-Metadata
    from the backend?
  • i
    file.size
    works for the 
    Upload-Length
    for me FWIW
  • j
    nothing
  • j
    Copy code
    const response = await fetch(
  const response = await fetch(
            'https://api.cloudflare.com/client/v4/accounts/165741ddf22256f1c2d442e345765203/stream?direct_user=true',
            {
                method: 'POST',
                headers: {
                    'Authorization': `Bearer ${env.StreamReadWriteAPIKey}`,
                    'Tus-Resumable': '1.0.0',
                    'Upload-Length': size,
                    'Upload-Metadata': "",
                },
                data: JSON.stringify({ requireSignedURLs: true, allowedOrigins: ["motionfans.com"] })
            }
            )
  • i
    Ah, OK. Body isn't used.
  • i
    You have to put those items in the 
    Upload-Metadata
  • i
    (base64 encoded)
  • i
  • i
    Also 
    maxDurationSeconds
    is required.
1...353637...105Latest