MediaLit DocsReact
The MediaLitUploader component and the useMediaLitUpload hook.
@medialit/react uploads files from the browser directly to MediaLit with resumable uploads. It works with any React 18 or 19 app, including Next.js, Remix and Vite.
npm install @medialit/reactYour server needs a route that returns an upload signature. See Next.js or createSignatureHandler.
MediaLitUploader
A drop zone with upload progress, cancel, retry and a preview of the uploaded file.
"use client";
import { MediaLitUploader } from "@medialit/react";
import "@medialit/react/styles.css";
export function Upload() {
return (
<MediaLitUploader
signatureEndpoint="/api/medialit/signature"
onUploadComplete={(media) => console.log(media.mediaId)}
/>
);
}Props
Prop
Type
Translate the text
<MediaLitUploader
signatureEndpoint="/api/medialit/signature"
labels={{
prompt: "Déposez un fichier ou cliquez pour parcourir",
cancel: "Annuler",
uploaded: "Envoyé",
uploadAnother: "Envoyer un autre fichier",
retry: "Réessayer",
chooseAnother: "Choisir un autre fichier",
invalidType: "Ce type de fichier n'est pas autorisé",
tooLarge: (maxSize) => `Taille maximale : ${maxSize}`,
}}
/>Style it
@medialit/react/styles.css is optional. It follows the system's light or dark mode, and you can change its colours and corners with CSS variables:
.medialit-uploader {
--medialit-accent: #0f766e;
--medialit-accent-contrast: #ffffff;
--medialit-radius: 6px;
--medialit-font: inherit;
}The other variables are --medialit-text, --medialit-muted, --medialit-border, --medialit-surface, --medialit-surface-hover, --medialit-track, --medialit-success and --medialit-error.
To style it from scratch, skip the stylesheet and target the medialit-uploader__* classes. The root element has data-status set to idle, uploading, success or error.
useMediaLitUpload
The same upload logic without any markup, for when you want your own UI.
"use client";
import { useMediaLitUpload } from "@medialit/react";
export function UploadButton() {
const { upload, cancel, status, progress, media, error } =
useMediaLitUpload({
signatureEndpoint: "/api/medialit/signature",
access: "public",
});
if (status === "uploading") {
return (
<button onClick={cancel}>Cancel ({Math.round(progress)}%)</button>
);
}
return (
<div>
<input
type="file"
onChange={(e) => {
const file = e.target.files?.[0];
if (file) upload(file);
}}
/>
{media && <img src={media.thumbnail || media.file} alt="" />}
{error && <p role="alert">{error.message}</p>}
</div>
);
}It takes the same options as MediaLitUploader except accept, maxFileSize, labels, disabled and className, and returns:
Prop
Type
UploadedMedia
What an upload returns.
Prop
Type
Uploads are temporary until your server seals them. See sealing.