reactjsreact-hooksuploadcare

How Do I Replace UploadCare To Display Image in React


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>

Solution

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

    Edit how-do-i-replace-uploadcare-to-display-image-in-react

    enter image description here