Wire up file upload form

src/components/contexts/FileUploadContext.jsx

@@ -1,4 +1,5 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from "react";
+import { uploadFile, getCancelToken } from "../../services/uploadFile";
 
 const FileUploadContext = React.createContext();
 
@@ -6,16 +7,45 @@ export const FileUploadProvider = ({ children }) => {
   const [file, setFile] = useState(null);
   const [uploading, setUploading] = useState(false);
   const [progress, setProgress] = useState(0);
+  const [status, setStatus] = useState(null);
+  const [cancelUpload, setCancelUpload] = useState(null);
 
-  const upload = (file) => {
+  const cancel = async () => {
+    console.log(`cancel`);
+    if (cancelUpload) cancelUpload.cancel();
+    setCancelUpload(null);
+    setUploading(false);
+  };
 
+  const upload = async (files) => {
+    if (files.length === 0) return;
+
+    const file = files[0].file;
+    const filename = file.name;
+
+    setUploading(true);
+    setProgress(0);
+    setStatus(`Uploading ${filename}`);
+    setCancelUpload(getCancelToken());
+    try {
+      const result = await uploadFile(file, setProgress, cancelUpload);
+      console.log(result);
+      setStatus(`Uploaded ${filename}`);
+      setCancelUpload(null);
+      setProgress(101);
+    }
+    catch (e) {
+      setStatus(`Error occured ${e.message}`);
+    }
   };
 
   return (
     <FileUploadContext.Provider value={{
       uploading,
       progress,
+      status,
       upload,
+      cancel,
     }}>
       {children}
     </FileUploadContext.Provider>