dimah-s3v1.5.11

Upload Store

Persist multipart identity and resume after the user reselects the same file.

An UploadStore persists multipart metadata, not the browser File. After a reload, the user reselects the same local file and the client uses the stored identity to reconcile parts and resume.

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

The resume key is derived as ${route}:${file.name}:${file.size}:${file.lastModified}. It is a lookup key, not a collision-resistant hash.

Built-in stores

  • createLocalStorageStore() — persists multipart metadata 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 } from "@dimah-s3/react";

Prop

Type

Frequently asked questions

Helpers

Formatting utilities, validation functions, and error helpers.

Forms

Integrate confirmed S3 uploads with React Hook Form or TanStack Form.

On this page

Built-in storesCustom upload store interfaceFrequently asked questions