import React, {useContext, useState} from 'react'; import ImageUploader from "react-images-upload"; import {Button, CircularProgress, TextField} from "@material-ui/core"; import {GLOBAL_CONSTANTS} from "./GlobalConstants"; import FormButtons from "./FormButtons"; import {BackendContext} from "./App"; type DataToGetUrl = { name: string, type: string, extension: string, } type Result = { uploadURL: string, fileName: string, } const ImageUpload: React.FunctionComponent = () => { const [picture, setPicture] = useState(); const [name, setName] = useState(''); const [message, setMessage] = useState(); const [loading, setLoading] = useState(); const [backend] = useContext(BackendContext); const handleImageChange = (picture:File[]) => { setMessage(undefined); setLoading(false) setPicture(picture[0]); }; const submitForm = () => { setMessage(undefined); setLoading(true) if(picture) { const dataToGetUrl: DataToGetUrl = { name: name, type: picture.type, extension: picture.type.split('/')[1] }; getUrl(dataToGetUrl); } }; const getUrl = (dataToGetUrl: DataToGetUrl) => { fetch(`${GLOBAL_CONSTANTS.get(backend)?.UPLOAD_URL}?content-type=${dataToGetUrl.type}&file-extension=.${dataToGetUrl.extension}&person-name=${dataToGetUrl.name}`) .then(res => res.json()) .then( (result) => { submitImage(result, dataToGetUrl.type, dataToGetUrl.name); }, (error) => { console.log(error); } ).catch(err => { setMessage('Upload Failed'); setLoading(false) } ) }; const submitImage = (result: Result, contentType: string, name: string) => { const putMethod = { method: 'PUT', body: picture, headers: { 'Content-Type': contentType, 'x-amz-meta-fullname': name, }, }; if(result.uploadURL) { fetch(result.uploadURL, putMethod) .then(response => { setLoading(false) if(response.status === 200 && response.statusText === 'OK') { setMessage('Upload Successful'); } else { setMessage('Upload Failed'); } }) .catch(err => { setMessage('Upload Failed'); setLoading(false) }); } else { setMessage('Upload Failed'); setLoading(false) } }; return (
setName(e.target.value)}/> {message &&
{message}
} {loading && }
); }; export default ImageUpload;