120 lines
4.1 KiB
JavaScript
120 lines
4.1 KiB
JavaScript
import React, { useCallback, useState } from "react";
|
|
import { useDropzone } from "react-dropzone";
|
|
import Button from "@material-ui/core/Button";
|
|
import axios from 'axios'
|
|
import ReactCrop from 'react-image-crop'
|
|
import { Dialog } from '@material-ui/core'
|
|
import { Image as CloudinaryImage } from 'cloudinary-react'
|
|
import 'react-image-crop/dist/ReactCrop.css'
|
|
import Svg from 'src/components/Svg/Svg.js'
|
|
|
|
const CLOUDINARY_UPLOAD_PRESET = "CadHub_project_images";
|
|
const CLOUDINARY_UPLOAD_URL = "https://api.cloudinary.com/v1_1/irevdev/upload";
|
|
|
|
export default function ImageUploader({ onImageUpload, imageUrl }) {
|
|
const [isModalOpen, setIsModalOpen] = useState(false)
|
|
const [file, setFile] = useState()
|
|
const [cloudinaryId, setCloudinaryId] = useState(imageUrl)
|
|
const [imageObj, setImageObj] = useState()
|
|
const [crop, setCrop] = useState({
|
|
aspect: 16 / 9,
|
|
unit: '%',
|
|
width: 100,
|
|
});
|
|
async function handleImageUpload() {
|
|
const croppedFile = await getCroppedImg(imageObj, crop, 'avatar')
|
|
console.log(croppedFile)
|
|
const imageData = new FormData();
|
|
imageData.append('upload_preset', CLOUDINARY_UPLOAD_PRESET);
|
|
imageData.append('file', croppedFile);
|
|
let upload = axios.post(CLOUDINARY_UPLOAD_URL, imageData)
|
|
try {
|
|
const { data } = await upload
|
|
if (data && data.public_id !== "") {
|
|
onImageUpload({cloudinaryPublicId: data.public_id})
|
|
setCloudinaryId(data.public_id)
|
|
setIsModalOpen(false)
|
|
}
|
|
} catch (e) {
|
|
console.error('ERROR', e)
|
|
}
|
|
}
|
|
// Drag and Drop
|
|
const onDrop = useCallback(acceptedFiles => {
|
|
setIsModalOpen(true)
|
|
const fileReader = new FileReader()
|
|
fileReader.onload = () => {
|
|
setFile(fileReader.result)
|
|
}
|
|
fileReader.readAsDataURL(acceptedFiles[0])
|
|
}, []);
|
|
|
|
const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
|
|
return (
|
|
<div className="m-8">
|
|
<div className="w-full relative" {...getRootProps()}>
|
|
{cloudinaryId && <button className="absolute z-10 w-full inset-0 bg-indigo-900 opacity-50 flex justify-center items-center">
|
|
<Svg name="pencil" strokeWidth={2} className="text-gray-300 h-48 w-48" />
|
|
</button>}
|
|
<input {...getInputProps()} />
|
|
{cloudinaryId && <div className="relative">
|
|
<CloudinaryImage
|
|
className="object-cover w-full rounded shadow"
|
|
cloudName="irevdev"
|
|
publicId={cloudinaryId}
|
|
width="600"
|
|
crop="scale"
|
|
/>
|
|
</div>}
|
|
{!cloudinaryId && <button className="absolute inset-0"></button>}
|
|
{!cloudinaryId && <div className="mt-3 text-indigo-500 border-dashed border border-indigo-500 py-8 text-center rounded-lg w-full">
|
|
Drop files here ...
|
|
or <span className="group flex w-full items-center justify-center py-4">
|
|
<span className="bg-indigo-500 shadow rounded text-gray-200 cursor-pointer p-2 hover:shadow-lg transform hover:-translate-y-1 transition-all duration-150">upload</span>
|
|
</span>
|
|
</div>}
|
|
</div>
|
|
<Dialog
|
|
open={isModalOpen}
|
|
onClose={() => setIsModalOpen(false)}
|
|
>
|
|
<div className="p-4">
|
|
<ReactCrop src={file} crop={crop} onImageLoaded={(image) => setImageObj(image)} onChange={newCrop => setCrop(newCrop)} />
|
|
<Button onClick={handleImageUpload} variant="outlined">Upload</Button>
|
|
</div>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function getCroppedImg(image, crop, fileName) {
|
|
const canvas = document.createElement('canvas');
|
|
const scaleX = image.naturalWidth / image.width;
|
|
const scaleY = image.naturalHeight / image.height;
|
|
canvas.width = crop.width;
|
|
canvas.height = crop.height;
|
|
const ctx = canvas.getContext('2d');
|
|
ctx.drawImage(
|
|
image,
|
|
crop.x * scaleX,
|
|
crop.y * scaleY,
|
|
crop.width * scaleX,
|
|
crop.height * scaleY,
|
|
0,
|
|
0,
|
|
crop.width,
|
|
crop.height
|
|
);
|
|
|
|
// As Base64 string
|
|
// const base64Image = canvas.toDataURL('image/jpeg');
|
|
|
|
// As a blob
|
|
return new Promise((resolve, reject) => {
|
|
canvas.toBlob(blob => {
|
|
blob.name = fileName;
|
|
resolve(blob);
|
|
}, 'image/jpeg', 1);
|
|
});
|
|
}
|