dimah-s3v1.5.5

Upload Store

Persist multipart upload state to seamlessly resume large uploads after page reload.

An UploadStore persists uploadId and part state so in-flight multipart uploads can resume after a browser reload.

lib/upload-store.ts
import { createLocalStorageStore } from "@dimah-s3/react";

export const localStorageStore = createLocalStorageStore();
app/video-uploader.tsx
"use client";

import { useUpload } from "@dimah-s3/react";
import { localStorageStore } from "@/lib/upload-store";

export function VideoUploader() {
  const upload = useUpload({
    route: "video",
    multipart: true,
    uploadStore: localStorageStore,
  });

  return (
    <div
      {...upload.getRootProps()}
      className="border p-4 rounded text-center cursor-pointer"
    >
      <input {...upload.getInputProps()} />
      {upload.isUploading
        ? `Uploading: ${upload.progress.percent}%`
        : "Upload large video"}
    </div>
  );
}

Resume keys are uniquely hashed by ${route}:${file.name}:${file.size}:${file.lastModified}.


Built-in stores

  • createLocalStorageStore() — persists in browser localStorage across page reloads.
  • createMemoryStore() — in-memory store for unit tests or SSR.
import { createLocalStorageStore, createMemoryStore } from "@dimah-s3/react";

const memoryStore = createMemoryStore();
const localStore = createLocalStorageStore();

Custom upload store interface

import type { UploadStore, StoredUpload } from "@dimah-s3/react";

Prop

Type

Frequently asked questions

On this page