kqito / use-tus Goto Github PK

Since React 18 was removed children property from React.FC the TusClientProvider is not working.

About

• Support for https://tus.io/blog/2022/08/03/tus-js-client-300.html

Attempting to upload multiples files, i noticed all files are upload execpt 1, always.
If i select 5 files, only 4 are successfully uploaded.

These logs show the use state null

I modified your Basic.stories.tsx , added multiple on input type file.
Then, used all files instead of 1.

const files = event.target?.files;
for (let index = 0; index < files.length; index += 1) {
  const file = files[index];

Not sure what is happening. Can you upload multiple files using use-tus?

UPDATE: the problem was in the for loop. Implemented a queue to upload 1 file at a time, it works as expected.

I'm trying to set retryDelays to send request every 10seconds until it reaches to 10 mins then throw error. but it doesn't send multiple requests and throw error after a while on first reqest.
This is my code:

 setUpload(file, {
      endpoint: `https://upload.domain.com`,
      retryDelays: [
        0, 10000, 20000, 30000, 40000, 50000, 60000, 70000, 80000, 90000, 100000, 110000, 120000,
        130000, 140000, 150000, 160000, 170000, 180000, 190000, 200000, 210000, 220000, 230000,
        240000, 250000, 260000, 270000, 280000, 290000, 300000, 310000, 320000, 330000, 340000,
        350000, 360000, 370000, 380000, 390000, 400000, 410000, 420000, 430000, 440000, 450000,
        460000, 470000, 480000, 490000, 500000, 510000, 520000, 530000, 540000, 550000, 560000,
        570000, 580000, 590000, 600000,
      ],
      headers: {
        Authorization: `Bearer ${token}`,
      },
      metadata: {
        filename: file.name.split('.')[0],
        filetype: file.type.split('/')[1],
      },
      onProgress: function (bytesUploaded, bytesTotal) {
        const percentage = ((bytesUploaded / bytesTotal) * 100).toFixed(2)

        setProgress(percentage)
      },
      onSuccess: function () {},
    })

  "peerDependencies": {
    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
    "tus-js-client": "^2.2.0"
  },

we need to add || ^18.0.0.

As of today now, we have to force install via npm install --force.

How can I use this in a react class?

When i try to access upload object on onSuccess function i get undefined error.

I need to get upload.url parameter to get file information after upload completed succesfully.

useEffect(() => {
  if (!upload) {
    return
  }

  setUrl(upload.url as string)
  console.log(upload.url)
}, [upload])

This sets url to null

onSuccess: () => {
  setUploading(false)
  console.log(upload)
  
  apiService.post("/upload_info", {
    key: upload.url
  })
}

This is also null.

Thanks for creating great library

The problem arise in useAutoAbort hook. After being bundled by babel, I suppose, the library throw this error.

Uncaught ReferenceError: regeneratorRuntime is not defined
    abortUploading index.esm.js:199
    useAutoAbort2 index.esm.js:226
    ....