import React from "react";
import { useDropzone } from "react-dropzone";
import styled from "styled-components";

import CloudUpload from "@material-ui/icons/CloudUpload";

interface IImage {
  image?: string;
  setImage?: Function;
}

const Box = styled.div<IImage>`
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  background: ${props => (props.image ? `url(${props.image})` : "white")};
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border: rgba(0, 0, 0, 0.54) solid;
  border-style: dashed;
`;

const UploadBox = styled.div`
  text-align: center;
  color: rgba(0, 0, 0, 0.54);

  & > p {
    margin: 0;
  }
`;

export const UploadImage = ({ image, setImage }: IImage) => {
  const { getRootProps, getInputProps } = useDropzone({
    accept: "image/*",
    maxSize: 1.5e7, // 15 mb
    multiple: false,
    onDrop: acceptedFiles => {
      setImage(
        acceptedFiles.map(file =>
          Object.assign(file, {
            preview: URL.createObjectURL(file)
          })
        )
      );
    }
  });

  return (
    <Box {...getRootProps()} image={image}>
      <input {...getInputProps()} />
      <UploadBox>
        <CloudUpload fontSize="large" />
        <p>Upload an image!</p>
      </UploadBox>
    </Box>
  );
};

import React from "react";
import fetch from "isomorphic-unfetch";

import { UploadImage } from "../components/utils/UploadImage";

const prueba = () => {
  const [state, setState] = React.useState({ image: [] });

  async function handleSendImage(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();

    const response = await fetch("/api/prueba", {
      method: "POST",
      body: JSON.stringify({ file: state.image })
    });

    const json = await response.json();

    console.log(json);
  }

  return (
    <form method="POST" onSubmit={handleSendImage}>
      <UploadImage
        image={state?.image[0]?.preview}
        setImage={(image: File[]) => setState({ image })}
      />

      <button type="submit">DO IT!</button>
    </form>
  );
};

export default prueba;

import { NextApiRequest, NextApiResponse } from "next";

import { uploadFile } from "../../lib/uploadFile";

async function prueba(req: NextApiRequest, res: NextApiResponse) {
  const { file } = req.body;

  const response = await uploadFile(file);

  res.json({ response });
}

export default prueba;

import { upload } from "now-storage";

export async function uploadFile(file: File) {
  console.log(file, "upload");

  const { url } = await upload(process.env.NOW_TOKEN, {
    name: "image.png",
    content: file
  });

  return url;
}