Skip to content

Instantly share code, notes, and snippets.

@yoavniran

yoavniran/App.jsx

Created May 21, 2020
Embed
What would you like to do?
React-Uploady preview with progress demo
import Uploady from "@rpldy/uploady";
const App = > () {
return (
<Uploady
destination={{ url: "[upload-url]" }}
>
<div className="App">
<h1>Hello React Uploady</h1>
<UploadWithProgressPreview />
</div>
</Uploady>
);
}
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} />;
};
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}
/>
</>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment