getTusEnhancer

Package

• @rpldy/chunked-sender

Installation

npm

npm install @rpldy/chunked-sender

Yarn

yarn add @rpldy/chunked-sender

pnpm

pnpm add @rpldy/chunked-sender

Details

type getTusEnhancer = (options: TusOptions) => UploaderEnhancer;

• See: TusOptions
• See: UploaderEnhancer

Creates an uploader enhancer that can be handed to the Uploady (using the enhancer prop), or to the uploader.

warning

When using React, there's typically no need to use this enhancer directly. Using Tus-Uploady will do this for you automatically.

Options

Name (* = mandatory)	Type	Default	Description
version	string	"1.0.0"	The tus server version
featureDetection	boolean	false	whether to query the server for supported extensions
featureDetectionUrl	string	null	URL to query for TUS server feature detection, in case it's different from upload URL
onFeaturesDetected	(string[]) => ?TusOptions	void	callback to handle the extensions the server broadcasts
resume	boolean	true	whether to store information locally on files being uploaded to support resuming
deferLength	boolean	false	defer sending file length to server (protocol)
overrideMethod	boolean	false	whether to use X-HTTP-Method-Override header instead of PATCH
sendDataOnCreate	boolean	false	send first chunk with create request (protocol)
storagePrefix	string	"rpldy-tus"	the key prefix to use for persisting resumable info about files
lockedRetryDelay	number	2000	milliseconds to wait before retrying a locked (423) resumable file
forgetOnSuccess	boolean	false	whether to remove URL from localStorage when upload finishes successfully
ignoreModifiedDateInStorage	boolean	false	ignore File's modified date when creating key for storage

info

When the chunked-sender parallel param is set to > 1, the Concatenation Tus extension will be used. It will send the chunks as different parallel requests that are finalized once done.

note

The params prop that is set on the Destination or upload options is serialized (encoded according to Tus protocol) and sent as the value of the Upload-Metadata header.

info

Custom headers set on the Destination will be sent (and override existing headers) with the Creation request

Example

import React, { useCallback, useEffect, useRef } from "react";
import createUploader from "@rpldy/uploader";
import getTusEnhancer from "@rpldy/tus-sender";

export const App = () => {
	const inputRef = useRef(null);
	const uploaderRef = useRef(null);

	useEffect(() => {
		const tusEnhancer = getTusEnhancer({
			parallel: 2,
		});

		uploaderRef.current = createUploader({
			enhancer: tusEnhancer,
			destination: {url: "my-tus-server.com"},
			params: {
				source: "rpldy",
			}
		});
	}, []);

	const onClick = useCallback(() => {
		const input = inputRef.current;
		if (input) {
			input.value = "";
			input.click();
		}
	}, []);

	const onInputChange = useCallback(() => {
		uploaderRef.current?.add(inputRef.current?.files);
	}, []);

	return <div>
		<input type="file" ref={inputRef} style={{ display: "none" }} onChange={onInputChange}/>
		<button id="upload-button" onClick={onClick}>Upload with TUS</button>
	</div>
};