How to integrate with @tus/server?

[jdkcoder]

Here is the code that used for trying implement tus protocol with Elysia.js but I still get the error:

Error: tus: unexpected response while creating upload, originated from request (method: POST, url: http://localhost:3000/files, response code: 400, response text: Bad Request, request id: n/a)

How should I fix the problem?

Server:

import { Elysia } from 'elysia';
import { Server } from '@tus/server';
import { FileStore } from '@tus/file-store';

// Cấu hình máy chủ tus
const tus = new Server({
  path: '/files',
  datastore: new FileStore({ directory: './files' }),
});

const app = new Elysia()
  .onParse(({ request, contentType }) => {
    if (contentType === 'application/offset+octet-stream') {
      return request.arrayBuffer();
    }
  })
  .all('/files', async ({ request, response }) => {
    return await tus.handle(request, response);
  })
  .all('/files/*', async ({ request, response }) => {
    return await tus.handle(request, response);
  })
  .listen(3000);

Client:

<template>
  <div>
    <input type="file" @change="onFileChange" />
    <div v-if="uploadProgress > 0">
      <progress :value="uploadProgress" max="100"></progress>
      <span>{{ uploadProgress.toFixed(2) }}%</span>
    </div>
    <button v-if="upload && !isUploading" @click="startUpload">Tải lên</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import * as tus from 'tus-js-client';

const file = ref(null);
const upload = ref(null);
const uploadProgress = ref(0);
const isUploading = ref(false);

const onFileChange = (e) => {
  file.value = e.target.files[0];
  
  if (file.value) {
    // Khởi tạo tus upload
    upload.value = new tus.Upload(file.value, {
      endpoint: 'http://localhost:3000/files',
      retryDelays: [0, 3000, 5000, 10000, 20000],
      metadata: {
        filename: file.value.name,
        filetype: file.value.type
      },
      onError: (error) => {
        console.error('Lỗi tải lên:', error);
        isUploading.value = false;
      },
      onProgress: (bytesUploaded, bytesTotal) => {
        uploadProgress.value = (bytesUploaded / bytesTotal * 100);
      },
      onSuccess: () => {
        console.log('Tải lên thành công!');
        console.log('URL tải xuống:', upload.value.url);
        isUploading.value = false;
      }
    });
  }
};

const startUpload = () => {
  if (upload.value) {
    // Kiểm tra các phiên tải lên trước đó để tiếp tục
    upload.value.findPreviousUploads().then(previousUploads => {
      if (previousUploads.length) {
        upload.value.resumeFromPreviousUpload(previousUploads[0]);
      }
      
      // Bắt đầu tải lên
      upload.value.start();
      isUploading.value = true;
    });
  }
};

const pauseUpload = () => {
  if (upload.value) {
    upload.value.abort();
    isUploading.value = false;
  }
};

const resumeUpload = () => {
  if (upload.value) {
    upload.value.start();
    isUploading.value = true;
  }
};
</script>

[Guara92]

I'm trying to integrate tus-server too, I managed to get the POST endpoint working, but I'm having trouble with the PATCH one, I used the local datastore for simplify all the things, a temporary files is created locally, but seems that the onUploadFinish is never triggered, I also tried listening for the POST_FINISH but without luck, in particular seems that the server hangs inside the handleWeb function, anyone has some idea?

[Guara92]

minimal example here

[SaltyAom]

I don't use tus-server personally, but you might want to use tus.handleWeb instead?

[Guara92]

I think is what I'm actually doing