3 files changed, 47 insertions, 17 deletions

diff --git a/src/containers/PollCreation/ImageInput.tsx b/src/containers/PollCreation/ImageInput.tsx
index 475d527..e807865 100644
--- a/src/containers/PollCreation/ImageInput.tsx
+++ b/src/containers/PollCreation/ImageInput.tsx
@@ -10,6 +10,7 @@ import { Check, CancelOutlined } from '@material-ui/icons';
 import AttachLink from '../../components/AttachLink/AttachLink';
 import FileUpload from '../../components/FileUpload/FileUpload';
 import BackgroundImage from '../../components/Image/BackgroundImage';
+import getLocalFileUrl from '../../utils/getLocalFileUrl';
 
 interface PropTypes {
   callback: (file?: File | string) => void;
@@ -59,9 +60,12 @@ const ImageInput: React.FC<PropTypes> = ({ callback, progress }) => {
     callback(undefined);
   };
 
-  const childrenCallback = (fileUrl: string, file?: File) => {
-    setUrl(fileUrl);
-    callback(file || fileUrl);
+  const childrenCallback = (value: File | string) => {
+    if (value instanceof File) {
+      getLocalFileUrl(value).then(localUrl => setUrl(localUrl));
+    } else setUrl(value);
+
+    callback(value);
   };
 
   const Upload = (
diff --git a/src/containers/PollCreation/PollCreation.tsx b/src/containers/PollCreation/PollCreation.tsx
index 03ab905..ecc6757 100644
--- a/src/containers/PollCreation/PollCreation.tsx
+++ b/src/containers/PollCreation/PollCreation.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable */
 import React from 'react';
 import Bluebird from 'bluebird';
 import { useHistory } from 'react-router-dom';
@@ -12,12 +11,12 @@ import {
 } from '@material-ui/core';
 import { useSnackbar } from 'notistack';
 
+import useS3Preupload from './useS3Preupload';
 import ImageInput from './ImageInput';
 import UserStrip from '../../components/UserStrip/UserStrip';
 import { post } from '../../requests';
 import { useAuth } from '../../hooks/useAuth';
 import { useFeed } from '../../hooks/APIClient';
-import useS3Preupload from '../../hooks/useS3Preupload';
 
 
 const useStyles = makeStyles(theme => ({
@@ -38,23 +37,21 @@ const PollCreation: React.FC = () => {
   const { user } = useAuth();
   const { mutate: updateFeed } = useFeed();
   const {
-    setValue: setLeft,
-    progress: progressLeft,
+    file: left,
+    setFile: setLeft,
     resolve: resolveLeft,
-    isReady: isLeftReady
+    progress: leftProgress
   } = useS3Preupload();
   const {
-    setValue: setRight,
-    progress: progressRight,
+    file: right,
+    setFile: setRight,
     resolve: resolveRight,
-    isReady: isRightReady
+    progress: rightProgress
   } = useS3Preupload();
 
   const handleClick = async () => {
     try {
       const [leftUrl, rightUrl] = await Bluebird.all([resolveLeft(), resolveRight()]);
-      console.log('leftUrl', leftUrl);
-      console.log('rightUrl', rightUrl);
 
       const contents = {
         left: { url: leftUrl },
@@ -79,16 +76,16 @@ const PollCreation: React.FC = () => {
         {user && <UserStrip user={user} info="" />}
         <Divider />
         <div className={classes.images}>
-          <ImageInput callback={setLeft} progress={progressLeft} />
-          <ImageInput callback={setRight} progress={progressRight} />
+          <ImageInput callback={setLeft} progress={leftProgress} />
+          <ImageInput callback={setRight} progress={rightProgress} />
         </div>
         {
-          progressLeft || progressRight
+          leftProgress || rightProgress
             ? <LinearProgress color="primary" />
             : (
               <Button
                 color="primary"
-                disabled={!(isLeftReady && isRightReady)}
+                disabled={!(left && right)}
                 variant="contained"
                 onClick={handleClick}
                 fullWidth
diff --git a/src/containers/PollCreation/useS3Preupload.ts b/src/containers/PollCreation/useS3Preupload.ts
new file mode 100644
index 0000000..0e2a8c4
--- /dev/null
+++ b/src/containers/PollCreation/useS3Preupload.ts
@@ -0,0 +1,29 @@
+import { useState, useCallback } from 'react';
+import uploadFileToS3 from '../../utils/uploadFileToS3';
+
+interface Hook {
+  file: File | string | undefined;
+  setFile: (value: File | string | undefined) => void;
+  resolve: () => Promise<string>;
+  progress: number;
+}
+
+export default (): Hook => {
+  const [file, setFile] = useState<File | string>();
+  const [progress, setProgress] = useState<number>(0);
+
+  const resolve = useCallback(async (quality?: number): Promise<string> => {
+    // Indicate start
+    setProgress(0.01);
+
+    if (file instanceof File) return uploadFileToS3(file, quality, setProgress);
+    return file || '';
+  }, [file]);
+
+  return {
+    file,
+    setFile,
+    resolve,
+    progress
+  };
+};