React-Uploady preview with progress demo

App.jsx

import Uploady from "@rpldy/uploady";

const App = > () {
  return (
    <Uploady
      destination={{ url: "[upload-url]" }}
    >
      <div className="App">
        <h1>Hello React Uploady</h1>
        <UploadWithProgressPreview />
      </div>
    </Uploady>
  );
}

CustomImagePreview.jsx

import styled from "styled-components"
import { useItemProgressListener } from "@rpldy/uploady";

const PreviewImage = styled.img`
  margin: 5px;
  max-width: 200px;
  height: auto;

  ${({ completed }) => `opacity: ${completed / 100};`}
`;

const CustomImagePreview = ({ id, url }) => {
  const [completed, setCompleted] = useState(0);

  useItemProgressListener(item => {
    if (item.id === id) {
      setCompleted(item.completed);
    }
  });

  return <PreviewImage src={url} completed={completed} />;
};

UploadWithProgressPreview.jsx

import UploadButton from "@rpldy/upload-button";
import UploadPreview from "@rpldy/upload-preview";

const UploadWithProgressPreview = () => {
  const getPreviewProps = useCallback(item => ({ id: item.id }), []);

  return (
    <>
      <UploadButton>Upload Files</UploadButton>
      <br />
      <UploadPreview
        previewComponentProps={getPreviewProps}
        PreviewComponent={CustomImagePreview}
      />
    </>
  );
};