Skip to main content

Getting Started

Install​

npm install @fourcels/react-image-upload

Usage​

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

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

Basic​

Live Editor
<ImageUpload />
Result
Loading...

Advanced​

Live Editor
<ImageUpload
  value={[
    "../img/undraw_docusaurus_mountain.svg",
    "../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={[
    "../img/undraw_docusaurus_mountain.svg",
    "../img/undraw_docusaurus_react.svg",
    "../img/undraw_docusaurus_tree.svg",
  ]}
  readonly
/>
Result
Loading...

Reset​

Live Editor
function MyApp() {
  const imageUploadRef = React.useRef(null);

  return (
    <div>
      <ImageUpload
        ref={imageUploadRef}
        value={[
          "../img/undraw_docusaurus_mountain.svg",
          "../img/undraw_docusaurus_react.svg",
          "../img/undraw_docusaurus_tree.svg",
        ]}
      />
      <button
        className="button button--secondary margin-top--md"
        onClick={() => imageUploadRef.current?.reset()}
      >
        Reset
      </button>
    </div>
  );
}
Result
Loading...