Skip to main content

Getting Started

Install​

npm install @fourcels/react-image-upload

Usage​

import { ImageUpload } from "@fourcels/react-image-upload";
import "@fourcels/react-image-upload/style.css";

function MyApp() {
  return <ImageUpload />;
}

Basic​

Live Editor
<ImageUpload />
Result
Loading...

Advanced​

Live Editor
<ImageUpload
  value={[
    "/react-image-upload/img/undraw_docusaurus_mountain.svg",
    "/react-image-upload/img/undraw_docusaurus_react.svg",
  ]}
  max={5}
  dropzoneOptions={{ onDragEnter: (evt) => console.log(evt) }}
  photoProviderProps={{ maskOpacity: 0.8 }}
  onChange={(value) => console.log(value)}
  onUpload={(file) =>
    new Promise((resolve) =>
      setTimeout(
        () => resolve(URL.createObjectURL(file)),
        1000 * Math.floor(Math.random() * 5)
      )
    )
  }
/>
Result
Loading...

Custom​

Live Editor
<ImageUpload>
  <button className="button button--secondary">Upload</button>
</ImageUpload>
Result
Loading...

Readonly​

Live Editor
<ImageUpload
  value={[
    "/react-image-upload/img/undraw_docusaurus_mountain.svg",
    "/react-image-upload/img/undraw_docusaurus_react.svg",
    "/react-image-upload/img/undraw_docusaurus_tree.svg",
  ]}
  readonly
/>
Result
Loading...