How Do I Replace UploadCare To Display Image in React

Question

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>

Answer 1

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>
  );
};