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

Validation Upload Bridge