Skip to main content

getTusEnhancer

Package​

Installation​

npm install @rpldy/chunked-sender

Details​

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

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

caution

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)TypeDefaultDescription
versionstring"1.0.0"The tus server version
featureDetectionbooleanfalsewhether to query the server for supported extensions
featureDetectionUrlstringnullURL to query for TUS server feature detection, in case it's different from upload URL
onFeaturesDetected(string[]) => ?TusOptionsvoidcallback to handle the extensions the server broadcasts
resumebooleantruewhether to store information locally on files being uploaded to support resuming
deferLengthbooleanfalsedefer sending file length to server (protocol)
overrideMethodbooleanfalsewhether to use X-HTTP-Method-Override header instead of PATCH
sendDataOnCreatebooleanfalsesend first chunk with create request (protocol)
storagePrefixstring"rpldy-tus"the key prefix to use for persisting resumable info about files
lockedRetryDelaynumber2000milliseconds to wait before retrying a locked (423) resumable file
forgetOnSuccessbooleanfalsewhether to remove URL from localStorage when upload finishes successfully
ignoreModifiedDateInStoragebooleanfalseignore File's modified date when creating key for storage
caution

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>
};