{"size": 2078, "ext": "js", "max_stars_repo_path": "client/src/components/cloud/Upload.js", "max_stars_repo_name": "lilyso/swapzie", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "client/src/components/cloud/Upload.js", "max_issues_repo_name": "lilyso/swapzie", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "client/src/components/cloud/Upload.js", "max_forks_repo_name": "lilyso/swapzie", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 30.115942029, "max_line_length": 97, "alphanum_fraction": 0.5404234841}
import React from "react";
import { Center, Button, Box, Image } from "@chakra-ui/react";

export default function Upload({ onChange, defaultImage = null }) {
  const cloudName = process.env.REACT_APP_CLOUD_NAME;
  const uploadPreset = process.env.REACT_APP_UPLOAD_PRESET;

  const showWidget = () => {
    const myWidget =
      window.cloudinary &&
      window.cloudinary.createUploadWidget(
        {
          cloudName: cloudName,
          uploadPreset: uploadPreset,
          cropping: true, //add a cropping step
          multiple: false, //restrict upload to a single file
          folder: "swapzie/", //upload files to the specified folder
          tags: ["users", "post"], //add the given tags to the uploaded files
          context: { alt: "user_uploaded" }, //add the given context data to the uploaded files
          clientAllowedFormats: ["jpg", "png"], //restrict uploading to image files only
          maxImageFileSize: 2000000, //restrict file size to less than 2MB
          maxImageWidth: 1000, //Scales the image down to a width of 2000 pixels before uploading
          styles: {
            palette: {
              window: "#4ecdc4",
              tabIcon: "#f7fff7",
              action: "#FFFFFF",
              menuIcons: "#1a535c",
            },
          },
        },
        (error, result) => {
          if (!error && result && result.event === "success") {
            console.log("Done! Image uploaded");
            onChange(result.info.secure_url);
          }
        }
      );
    myWidget.open();
  };

  return (
    <Box
      mb={4}
      p={4}
      border="1px"
      borderStyle="dashed"
      borderRadius="10"
      borderColor="gray.300"
    >
      {defaultImage && (
        <Center>
          <Image
            borderRadius={10}
            pb={4}
            maxH="200"
            id="uploadedimage"
            src={defaultImage}
            alt="upload"
          />
        </Center>
      )}
      <Center>
        <Button onClick={() => showWidget()}>Upload image</Button>
      </Center>
    </Box>
  );
}
