3 files changed, 26 insertions, 7 deletions
diff --git a/src/components/UploadImage/UploadImage.tsx b/src/components/UploadImage/UploadImage.tsx
index e6f6d05..d005830 100644
--- a/src/components/UploadImage/UploadImage.tsx
+++ b/src/components/UploadImage/UploadImage.tsx
@@ -6,6 +6,7 @@ import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';
+import get from '../../../node_modules/axios';
 
 interface PropTypes {
   isOpen: boolean;
@@ -15,14 +16,27 @@ interface PropTypes {
 
 const UploadImage: React.FC<PropTypes> = ({ setIsOpen, isOpen, callback }) => {
   const [url, setUrl] = useState('');
+  const [isError, setIsError] = useState(false);
+
 
   const handleClose = () => {
     setIsOpen(false);
   };
 
   const handleSubmit = () => {
-    callback(url || '');
-    setIsOpen(false);
+    get(url).then(res => {
+      if (res.headers['content-type'] === 'image/jpeg') {
+        callback(url || '');
+        setIsOpen(false);
+        setIsError(false);
+      } else {
+        // console.warn(res); TODO: handle error if response status is ok but not an image
+        setIsError(true);
+      }
+    }).catch(() => {
+      // console.warn(err); TODO: handle error if resposne status is not ok
+      setIsError(true);
+    });
   };
 
   const handleChange = (event:React.ChangeEvent<HTMLInputElement>) => {
@@ -46,6 +60,8 @@ const UploadImage: React.FC<PropTypes> = ({ setIsOpen, isOpen, callback }) => {
             fullWidth
             autoComplete="off"
             onChange={handleChange}
+            error={isError}
+            helperText={isError === true ? 'invalid Url!' : ''}
           />
         </DialogContent>
         <DialogActions>
diff --git a/src/pages/FeedPage/PollSubmissionImage.tsx b/src/pages/FeedPage/PollSubmissionImage.tsx
index e2ffad3..a8ec437 100644
--- a/src/pages/FeedPage/PollSubmissionImage.tsx
+++ b/src/pages/FeedPage/PollSubmissionImage.tsx
@@ -57,7 +57,6 @@ const PollSubmissionImage: React.FC<PropTypes> = ({ url, setUrl }) => {
     <>
       <CloudUploadIcon fontSize="large" color="primary" />
       <Typography variant="h5"> Upload an image </Typography>
-      <UploadImage isOpen={isModalOpen} setIsOpen={setIsModalOpen} callback={setUrl} />
     </>
   );
 
@@ -73,9 +72,12 @@ const PollSubmissionImage: React.FC<PropTypes> = ({ url, setUrl }) => {
   );
 
   return (
-    <CardActionArea onClick={handleClick} className={classes.root}>
-      {url ? Media : Upload}
-    </CardActionArea>
+    <>
+      <CardActionArea onClick={handleClick} className={classes.root}>
+        {url ? Media : Upload}
+      </CardActionArea>
+      <UploadImage isOpen={isModalOpen} setIsOpen={setIsModalOpen} callback={setUrl} />
+    </>
   );
 };
 
diff --git a/src/requests.ts b/src/requests.ts
index b02329d..0af80dc 100644
--- a/src/requests.ts
+++ b/src/requests.ts
@@ -5,7 +5,8 @@ const baseURL = process.env.NODE_ENV === 'production'
   ? 'https://which-api.herokuapp.com'
   : 'http://localhost:3030';
 
-const requests = axios.create({ baseURL });
+const headers = ['Access-Control-Allow-Origin', '*'];
+const requests = axios.create({ baseURL, headers });
 
 requests.interceptors.request.use(config => {
   const token = localStorage.getItem('token');