Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update types to allow Node.js' Buffer for uploads #674

Merged
merged 3 commits into from
Nov 26, 2024

Conversation

DennySlick
Copy link
Contributor

@Acconut,

I did not test these changes on a Browser engine, but for NodeJS TypeScript support it should work more consistently

Issue reference: #289

I did not test these changes on a Browser engine, but for NodeJS it should work more consistent
@Acconut
Copy link
Member

Acconut commented Mar 22, 2024

I did not test these changes on a Browser engine,

Thank you, but I am a bit concerned that this might breaking the tus-js-client integration for people using the client in a browser environment. Could this lead to problems with TypeScript if its configured for browsers and does not know Buffer?

@rotanev
Copy link

rotanev commented Oct 24, 2024

@Acconut Hi! No, this change will not break users' browser apps.

Proof of concept

package.json

{
  "name": "tus-buffer",
  "version": "1.0.0",
  "private": true,
  "license": "MIT",
  "main": "src/index.ts",
  "scripts": {
    "dev": "webpack-dev-server",
    "watch": "webpack --watch",
    "build": "webpack"
  },
  "devDependencies": {
    "@types/node": "^22.7.9",
    "ts-loader": "^9.5.1",
    "typescript": "^5.6.3",
    "webpack": "^5.95.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.1.0"
  },
  "dependencies": {
    "tus-js-client": "file:./../source/"
  }
}

tsconfig.json

{
    "target": "es5",
    "lib": ["es5", "es6", "dom"],
    "module": "es6",
    "rootDir": "./",
    "moduleResolution": "node",
    "allowJs": true,
    "sourceMap": true,
    "outDir": "./dis",
    "downlevelIteration": true,
    "esModuleInterop": true,
    "strict": true,
    "noImplicitAny": true,
    "skipLibCheck": true
}

webpack.config.js

const path = require('path');

module.exports = {
  devtool: 'inline-source-map',
  entry: './src/index.ts',
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.ts?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  devServer: {
    static: path.join(__dirname, 'dist'),
    compress: false,
    port: 4000,
  },
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

src/index.ts

import { Upload } from 'tus-js-client';

let file: File | Blob | Buffer | Pick<ReadableStreamDefaultReader, 'read'>;

if (typeof window === 'undefined') {
  file = Buffer.from('Hello Buffer!', 'utf-8');
} else {
  file = new Blob(['Hello Blob!!!']);
}

const upload = new Upload(file, {
  endpoint: 'https://tusd.tusdemo.net/files/',
  metadata: {
    filename: 'README.md',
    filetype: 'text/plain',
  },
  onError(error) {
    console.error('An error occurred:');
    console.error(error);
  },
  onProgress(bytesUploaded, bytesTotal) {
    const percentage = ((bytesUploaded / bytesTotal) * 100).toFixed(2);
    console.log(bytesUploaded, bytesTotal, `${percentage}%`);
  },
  onSuccess() {
    console.log('Upload finished:', upload.url);
  },
});

setTimeout(() => {
  upload.start();
}, 2000);

dist/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="index.js"></script>
</head>
<body>
  <h1>Buffer...</h1>
</body>
</html>

Result

Browser:

https://tusd.tusdemo.net/files/f2c04a8c9c5c47e11576fd92fef589fe+.UW3vx6k_mD1DM1wYOuC4pxssoLL0Huus5Y8lVDRzzwmYQV0vXMHxxLVX0GDrg5IwEWsRvLFJTf9hwULrIrSxivM5CEPPi1J5G5Dhr5RY1k.exIGylbXetCi8YnO_JNs

Screenshot 2024-10-24 at 16 41 49

Node.js

https://tusd.tusdemo.net/files/ecdb245fd3466aae8314df9190dd2348+D1k_VH6htOgUln9084SDVoawTCUW4Bye2khyHJGkDIYZNvtMZ6Er8CwxSawMxqEerIDXzbTuiLHxxlr7q7nyvickQV2_yO0Q2ut9wfamr9FTXBm9riW7lr4pGi0kj3NU

Screenshot 2024-10-24 at 16 41 14

Co-Authored-By: Marius Kleidl <marius@transloadit.com>
@Acconut
Copy link
Member

Acconut commented Nov 26, 2024

@rotanev Thank you for testing whether this change impacts users! This PR can be merged then.

@Acconut Acconut changed the title feat: Typing support for NodeJS Buffer in lib/index.d.ts Update types to allow Node.js' Buffer for uploads Nov 26, 2024
@Acconut Acconut merged commit ca63ba2 into tus:main Nov 26, 2024
4 of 5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants