Vimeo Resumable approach using Uppy Tus failed with response code: 412, response text: unsupported version

[ashraful19]

i am implementing Vimeo video upload using resumable approach using Uppy Tus So first i am making a call to my backend, and using Vimeo laravel package, i am creating the video,

$vimeoResponse = Vimeo::request('/me/videos', [
                                     'upload' => [
                                          'approach' => 'tus', 
                                          'size' => 26284326
                                      ]
                                ], 'POST');

in the response $vimeoResponse['body']['upload']['approach'] is tus as expected. then i am sending the $vimeoResponse['body']['upload']['upload_link'] to my front end.

in my frontend, i am using Uppy tus as follow,

this.fileUploaderObject.use(UppyTus, {
     endpoint: this.uploadLink, // upload_link from backend
     resume: true,
     headers: {
         'Tus-Resumable': '1.0.0',
         'Upload-Offset': '0',
         'Content-Type': 'application/offset+octet-stream',
         'Accept': 'application/vnd.vimeo.*+json;version=3.4'
     },
     retryDelays: [0, 1000, 3000, 5000]
});

But when i select file, and start upload, i get error response every time,

Failed to upload <filename> tus: unexpected response while creating upload, 
originated from request (method: POST, url: <upload_url>, 
response code: 412, response text: unsupported version

i tried to insert uploadUrl: this.uploadLink along with endpoint: "https://asia-files.tus.vimeo.com/files/" in Uppy Tus config, but then i get CORS error.

can anyone please help ?

[goto-bus-stop]

I think uploadUrl + endpoint is actually the correct approach for Vimeo. Do the browser developer tools tell you anything about the cause of the CORS error?

[ashraful19]

@goto-bus-stop Hi, when i use uploadUrl and endpoint both, and use same value (the returned upload_link from vimeo post request of first step) for both, i get the response code: 412, response text: unsupported version

when is use endpoint: https://asia-files.tus.vimeo.com/files/ and the returned upload_link from vimeo post request of first step as uploadUrl value, i get Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://asia-files.tus.vimeo.com/files/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)

so when in header, i use 'Access-Control-Allow-Origin': '*' then i get error Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at <upload_link>. (Reason: header ‘access-control-allow-origin’ is not allowed according to header ‘Access-Control-Allow-Headers’ from CORS preflight response).

i have been trying to implement this for last 3 days.

[goto-bus-stop]

I can see two other problems but I don't think they should cause this particular issue…

1.      'Tus-Resumable': '1.0.0',
        'Upload-Offset': '0',

   These two headers are set by the Tus plugin, so you should not manually set them. If you override upload-offset this way resuming will not work.

2. Access-Control-Allow-Origin is a server-side header: sending it from the browser does not do anything.

I don't really know. what if you try this, without any custom headers?

this.fileUploaderObject.use(UppyTus, {
     endpoint: 'https://files.tus.vimeo.com/files/', // just to give tus-js-client a URL, should be unused
     uploadUrl: this.uploadLink, // upload_link from backend
     resume: true,
     retryDelays: [0, 1000, 3000, 5000]
});

That is more similar to what we did in https://github.com/transloadit/uppy-vimeo-thing/ a few years ago, though I don't know if anything changed on Vimeo's side in the mean time.