Uppy is an open source project by Transloadit
Transloadit Community Plan: free hosted Companion & tusd, unlimited uploading, and 5GB/mo encoding traffic!

Golden Retriever

The @uppy/golden-retriever plugin saves selected files in your browser cache, so that if the browser crashes, Uppy can restore everything and continue uploading as if nothing happened. You can read more about it on our blog.

The Golden Retriever uses LocalStorage to store file metadata and Uppy state, and IndexedDB for small files. It also uses a Service Worker for all files because, unlike IndexedDB, a Service Worker can keep large files. Service Worker storage is quite temporary though, and doesn’t persist across browser crashes or restarts. It works well, however, for accidental refreshes or closed tabs.

Installation

This plugin is published as the @uppy/golden-retriever package.

Install from NPM:

npm install @uppy/golden-retriever

In the CDN package, the plugin class is available on the Uppy global object:

const { GoldenRetriever } = Uppy

Usage

1. Bundle your own service worker sw.js file with Uppy GoldenRetriever’s service worker. If you are using Browserify, bundle it separately. For Webpack, check out serviceworker-webpack-plugin.

// sw.js

import('@uppy/golden-retriever/lib/ServiceWorker')

2. Register it in your app entry point:

// you app.js entry point
import GoldenRetriever from '@uppy/golden-retriever'

uppy.use(GoldenRetriever, { serviceWorker: true })

if ('serviceWorker' in navigator) {
  navigator.serviceWorker
    .register('/sw.js') // path to your bundled service worker with GoldenRetriever service worker
    .then((registration) => {
      console.log('ServiceWorker registration successful with scope: ', registration.scope)
    })
    .catch((error) => {
      console.log(`Registration failed with ${error}`)
    })
}

Voilà, that’s it. Happy retrieving!