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.
import { createLocalStorageStore } from "@dimah-s3/react";
export const localStorageStore = createLocalStorageStore();"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 browserlocalStorageacross 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
Yes. When using @dimah-s3/db, the server tracks pending multipart uploads in your database. You can implement a store get method to fetch active multipart upload IDs across devices.
Use uploadStore for routes with large files (videos, archives, large datasets) where users may refresh or lose connection mid-upload. Small single-part uploads do not need a store.