NewPicture Selector v2 · Uploads, previews, test mode

The polished way to upload pictures

React Picture Selector bundles drag & drop uploads, accessible previews, live progress, API wiring, and graceful error states into one composable component. Ship delightful avatar or gallery experiences without reinventing the flow.

Read the docsView on GitHub

Frictionless uploads

Drag & drop, smooth progress rings, fallback percentages, and abortable requests bundled together.

Unlimited customization

Tune radiuses, colors, sizing, and CSS slots so the selector matches any brand system in minutes.

API-first mindset

Pass headers, methods, and endpoints for upload/delete flows or switch into test mode instantly.

Production ready UX

Accessible previews, error states, and callbacks for every critical moment in the upload lifecycle.

One-drop integration

Wire up uploads with a handful of props

Feed the component your endpoints once and keep the rest of your stack focused on core logic. Every callback receives both the generated URL and the original API response so nothing is lost.

  • Preview modal with keyboard support
  • AbortController baked in
  • Full API response passed back to you
  • RTL and responsive layouts covered
import PictureSelector from "react-picture-selector";

export function ProfilePhoto() {
  return (
    <PictureSelector
      imageUrl="https://cdn.example.com/avatar.png"
      title="Profile Photo"
      type="profile"
      size={180}
      apiConfig={{
        baseUrl: "https://api.example.com",
        uploadUrl: "/upload",
        deleteUrl: "/avatar",
      }}
      onChangeImage={(url, response) => {
        console.log("New image:", url, response);
      }}
    />
  );
}