Upload SDK
The upload SDK package provides the means to upload files directly to the platforms storage. It uses a multipart approach to upload files directly to the underlying S3 bucket.
The library supports multiple uploads, pausing and resuming of paused and failed uploads. Each remote call will be retried multiple times with increasing timespans betrween retries until ultimately, the upload will fail on to many retries.
This is a low level library that is used by the HxDR platform to upload files. It doesn't contain the necessary
logic to handle asset creation and finalization. To get a full asset upload experience, use the @sdk/asset-upload
package.
Installation
To install this package, you need to have access to the private @sdk
npm scope.
npm install @sdk/upload
Usage
Uploads on the HxDR Platform need to be split in multiple chunks that each have their own presigned url they have to be pushed to. The library takes two parameters: The resolver
callback function that fetches the correct presigned url for a given chunk and the uploader
callback function that pushes a given chunk to the backend.
import { LibUpload } from '@sdk/upload';
const resolver = async options => {
const response = await fetch(`http://api/get-url/file-id/${options.metadata.fileId}/${options.chunkIndex}`);
return response.body.url;
};
const uploader = async options => {
const response = await fetch(`http://api/upload/${options.metadata.fileId}/${options.chunkIndex}`, {
method: 'PUT',
body: options.blob,
});
return response.body.url;
};
const uploadClient = new LibUpload({ resolver, uploader });
uploadClient.upload(file, { fileId: 'fad0-3db5' });
In this example, the resolver
function fetches the presigned url for a given chunk and the uploader
function uploads the chunk to the backend.
React Integration
A set of React hooks and components are provided to make working with the upload SDK easier in a React context.
First, wrap your app with the UploadProvider
to make the upload logic accessible throughout your component tree:
import { UploadProvider } from '@sdk/upload';
// const resolver = ...same as vanilla js example
// const uploader = ...same as vanilla js example
export default function App() {
return (
<UploadProvider resolver={resolver} uploader={uploader}>
{children}
</UploadProvider>
);
}
After that, you can use the useUpload
hook to access the upload client and state:
import { useUpload } from '@sdk/upload';
export default function Upload() {
const [uploadClient, uploadState] = useUpload();
const handleFileChange = event => {
uploadClient.upload(event.files[0]);
};
return (
<div>
<input type="file" onChange={handleFileChange} />
<Progress percentage={uploadState.progress} />
</div>
);
}