Direct TUS upload cho end user

POST https://mps.mediacdn.vn/v1/namespaces/<namespace>/tus?direct_user=true

npm install express dotenv tus-js-client

require('dotenv').config();

const path = require('path');
const express = require('express');

const app = express();
const port = Number(process.env.PORT || 3000);
const maxUploadSize = 20 * 1024 * 1024 * 1024;

app.use(express.static(path.join(__dirname, 'public')));
app.use('/scripts/tus', express.static(
  path.join(__dirname, 'node_modules/tus-js-client/dist')
));

app.post('/api/create-tus-upload', async (req, res) => {
  // Production: xác thực end user trước khi tạo upload URL.
  const uploadLength = Number(req.get('Upload-Length'));
  const tusResumable = req.get('Tus-Resumable');

  if (!tusResumable || !Number.isSafeInteger(uploadLength) ||
      uploadLength < 1 || uploadLength > maxUploadSize) {
    return res.status(400).json({ error: 'Invalid upload request' });
  }

  // Production: decode, validate và rebuild metadata thay vì forward trực tiếp.
  const uploadMetadata = req.get('Upload-Metadata') || '';
  const endpoint = `https://mps.mediacdn.vn/v1/namespaces/${encodeURIComponent(process.env.MPS_NAMESPACE)}/tus?direct_user=true`;

  try {
    const upstream = await fetch(endpoint, {
      method: 'POST',
      headers: {
        'Tus-Resumable': tusResumable,
        'Upload-Length': String(uploadLength),
        'Upload-Metadata': uploadMetadata,
        'X-Auth-Type': 'application_credential',
        'X-App-Credential-Id': process.env.MPS_CREDENTIAL_ID,
        'X-App-Credential-Secret': process.env.MPS_CREDENTIAL_SECRET
      }
    });

    for (const name of ['Location', 'Tus-Resumable', 'Tus-Upload-Expires']) {
      const value = upstream.headers.get(name);
      if (value) res.setHeader(name, value);
    }

    res.status(upstream.status).send(await upstream.text());
  } catch (error) {
    res.status(502).json({ error: 'Cannot create MPS upload' });
  }
});

app.listen(port, () => console.log(`Open http://localhost:${port}`));

<input id="fileInput" type="file">
<button id="startBtn">Start</button>
<button id="pauseBtn">Pause</button>
<button id="resumeBtn">Resume</button>
<progress id="progress" value="0" max="100"></progress>
<pre id="status"></pre>

<script src="/scripts/tus/tus.min.js"></script>
<script src="/app.js"></script>

let upload;
const fileInput = document.getElementById('fileInput');
const progress = document.getElementById('progress');
const status = document.getElementById('status');

async function startUpload() {
  const file = fileInput.files[0];
  if (!file) return;

  upload = new tus.Upload(file, {
    endpoint: '/api/create-tus-upload',
    chunkSize: 10 * 1024 * 1024,
    retryDelays: [0, 3000, 5000, 10000],
    removeFingerprintOnSuccess: true,
    metadata: {
      file_path: 'videos/intro.mp4',
      display_name: file.name,
      video_profile_ids: '360,480,720',
      client_reference: 'customer-record-42',
      video_encryption: 'false',
      default_thumb_timepct: '0.25'
    },
    onProgress(uploaded, total) {
      progress.value = (uploaded / total) * 100;
      status.textContent = `${progress.value.toFixed(2)}%`;
    },
    onError(error) {
      status.textContent = `Upload failed: ${error}`;
    },
    onSuccess() {
      status.textContent = 'Binary upload completed';
    }
  });

  const previous = await upload.findPreviousUploads();
  if (previous.length) upload.resumeFromPreviousUpload(previous[0]);
  upload.start();
}

document.getElementById('startBtn').onclick = startUpload;
document.getElementById('pauseBtn').onclick = () => upload && upload.abort();
document.getElementById('resumeBtn').onclick = () => upload && upload.start();