Right now, after uploading image, it shows up only the name of the file, the size and the remove button. I wanted to display the image itself on the circle.
Pls check codesandbox here CLICK HERE
<UploadWrapper>
<Widget
localeTranslations={translation}
publicKey="demopublickey"
imagesOnly
previewStep
clearable
onfi
onFileSelect={(file) => {
if (!file) {
console.log("File removed from widget");
return;
}
file.done((fileInfo) => {
console.log("File uploaded: ", fileInfo.cdnUrl);
});
}}
/>
</UploadWrapper>
From what I can tell it looks like the Widget
component is only for uploading a file and not for rendering one.
Here's a solution I came up with: Use some "state" to store the uploaded file URL and conditionally hide the Widget
to upload a file or the rendered div/image. Use an attached ref to the Widget
in a click handler on the image to trigger re-opening of the upload dialog.
Style:
import styled, { css } from "styled-components";
...
const UploadWrapper = styled.div`
position: relative;
display: flex;
justify-content: center;
align-items: center;
${({ image }) => image ? css`
& .image {
position: absolute;
height: 300px; // make a circle
width: 300px; // make a circle
border-radius: 50%; // make a circle
top: 50%; // position div
overflow: hidden; // hide the circle
img {
height: 100%; // fill parent div
width: auto; // fill parent div
transform: translate(-50%, -50%); // center image
top: 50%; // center image
left: 50%; // center image
position: absolute;
}
}
& .uploadcare--widget {
display: none;
}
` : css`
& .image {
display: none;
}
`}
& .uploadcare--widget__button_type_open {
height: 300px;
width: 300px;
border-radius: 100%;
}
`;
Component:
const Upload = () => {
const [image, setImage] = React.useState("");
const translation = {
buttons: {
choose: {
images: {
one:
'<div className="image"><img src="/assets/images/camera.svg" alt="camera" /><br/>Upload photo</div>'
}
}
}
};
return (
<FormWrapper>
<h1>Hello</h1>
<UploadWrapper image={image}>
<div
className="image"
onClick={() => widgetApi.current.openDialog()}
>
<img src={image} alt="uploaded" />
</div>
<Widget
localeTranslations={translation}
publicKey="demopublickey"
imagesOnly
previewStep
onFileSelect={(file) => {
if (!file) {
console.log("File removed from widget");
return;
}
file.done((fileInfo) => {
setImage(fileInfo.cdnUrl);
});
}}
/>
</UploadWrapper>
</FormWrapper>
);
};