diff --git a/package-lock.json b/package-lock.json
index e0d5784..581ece4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15467,6 +15467,8 @@
       "version": "2.29.4",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
       "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": "*"
       }
@@ -31864,7 +31866,9 @@
     "moment": {
       "version": "2.29.4",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
-      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+      "optional": true,
+      "peer": true
     },
     "ms": {
       "version": "2.1.2",
diff --git a/src/App.js b/src/App.js
index ee8d8e5..990eebc 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,6 +5,7 @@ import NavigationBar from './NavigationBar';
 import AuthDialog from './AuthDialog';
 import UploadInterface from './UploadInterface';
 import ProjectForm from './ProjectForm';
+import { githubUpload } from './github-upload';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
@@ -18,8 +19,8 @@ function App() {
   const [token, setToken] = useState(null);
   const [repository, setRepository] = useState(null);
   const [show, setShow] = useState(true);
-  const isAuthorized = token && repository;
-
+  const isAuthorized = !!(token && repository); // or Boolean(...) 
+  
   return (
     <>
       <NavigationBar
@@ -33,7 +34,12 @@ function App() {
       <AuthDialog show={show} setShow={setShow} setToken={setToken} setRepository={setRepository} />
       <Stack direction={'row'}>
         <Item>
-          <UploadInterface isAuthorized={isAuthorized} />
+          <UploadInterface
+            isAuthorized={isAuthorized}
+            uploadFile={(file) => {
+              githubUpload(token, repository, file).then(console.log).catch(console.error);
+            }}
+          />
         </Item>
         <Item>
           <ProjectForm />
diff --git a/src/UploadInterface.js b/src/UploadInterface.js
index 1edbe47..222ab1d 100644
--- a/src/UploadInterface.js
+++ b/src/UploadInterface.js
@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 
 const fileTypes = ["jpg", "jpeg", "png", "bmp", "gif"];
 
-function UploadInterface({ isAuthorized }) {
+function UploadInterface({ isAuthorized, uploadFile }) {
   const [image, setImage] = useState(null);
   const imgPreviewEl = useRef(null);
 
@@ -55,6 +55,9 @@ function UploadInterface({ isAuthorized }) {
               variant="success"
               className="mt-3"
               disabled={!(isAuthorized && image)}
+              onClick={() => {
+                uploadFile(image);
+              }}
             >
               Upload
             </Button>
@@ -66,7 +69,8 @@ function UploadInterface({ isAuthorized }) {
 }
 
 UploadInterface.propTypes = {
-  isAuthorized:PropTypes.bool
+  isAuthorized:PropTypes.bool,
+  uploadFile: PropTypes.func
 }
 
-export default UploadInterface
\ No newline at end of file
+export default UploadInterface
diff --git a/github-upload.js b/src/github-upload.js
similarity index 100%
rename from github-upload.js
rename to src/github-upload.js