devendra Posts - Answer Overflow

devendra

•Created by devendra on 2/24/2024 in #general-help

Upload using tus is never finished

Hi, I want to upload video using stream direct upload. In the backend I have created backend API will will return the stream direct upload url. That part is working fine and I am able to generate upload URL. Now in the frontend, I am using TUS for uploading the video. Video is showing progress but after 100%, it never finishes. Below is my code:

import React, { useState } from 'react';
import * as tus from 'tus-js-client'

const VideoUploader = () => {
  const [upload, setUpload] = useState(null);
  const [progress, setProgress] = useState(0);

  const handleUpload = (event) => {
    const file = event.target.files[0];
    console.log(file)
    const upload = new tus.Upload(file, {
      endpoint: 'http://localhost:3001/upload',
      retryDelays: [0, 1000, 3000, 5000],
      metadata: {
        filename: file.name,
        filetype: file.type
      },
      onError: (error) => console.error('Failed because: ' + error),
      onProgress: (bytesUploaded, bytesTotal) => {
        const percentage = (bytesUploaded / bytesTotal * 100).toFixed(2);
        setProgress(percentage);
      },
      onSuccess: () => console.log('Upload complete')
    });

    upload.start();
    setUpload(upload);
  };

  const handleCancel = () => {
    if (upload) {
      upload.abort();
      setUpload(null);
      setProgress(0);
    }
  };

  return (
    <div>
      <input type="file" onChange={handleUpload} />
      {progress > 0 && <p>Progress: {progress}%</p>}
      <button onClick={handleCancel}>Cancel</button>
    </div>
  );
};
export default VideoUploader;

import React, { useState } from 'react';
import * as tus from 'tus-js-client'

const VideoUploader = () => {
  const [upload, setUpload] = useState(null);
  const [progress, setProgress] = useState(0);

  const handleUpload = (event) => {
    const file = event.target.files[0];
    console.log(file)
    const upload = new tus.Upload(file, {
      endpoint: 'http://localhost:3001/upload',
      retryDelays: [0, 1000, 3000, 5000],
      metadata: {
        filename: file.name,
        filetype: file.type
      },
      onError: (error) => console.error('Failed because: ' + error),
      onProgress: (bytesUploaded, bytesTotal) => {
        const percentage = (bytesUploaded / bytesTotal * 100).toFixed(2);
        setProgress(percentage);
      },
      onSuccess: () => console.log('Upload complete')
    });

    upload.start();
    setUpload(upload);
  };

  const handleCancel = () => {
    if (upload) {
      upload.abort();
      setUpload(null);
      setProgress(0);
    }
  };

  return (
    <div>
      <input type="file" onChange={handleUpload} />
      {progress > 0 && <p>Progress: {progress}%</p>}
      <button onClick={handleCancel}>Cancel</button>
    </div>
  );
};
export default VideoUploader;

And in the browser console, I got the below error:

app-index.js:33 Failed because: Error: tus: unexpected response while uploading chunk, originated from request (method: PATCH, url: https://upload.cloudflarestream.com/..., response code: 400, response text: Basic uploads must be made using POST method, request id: n/a)

I am stuck . Please help me.

2 replies

Gaming

Programming