Testing Mobile Image

2 files changed, 35 insertions, 8 deletions

diff --git a/src/mobile/ImageUpload.scss b/src/mobile/ImageUpload.scss
new file mode 100644
index 000000000..0663b977b
--- /dev/null
+++ b/src/mobile/ImageUpload.scss
@@ -0,0 +1,20 @@
+.imgupload_cont{
+    height: 100%;
+    width: 100%;
+    align-content: center;
+  
+   
+    .button_file{
+        text-align: center; 
+        height: 50%; 
+        width: 50%; 
+        background-color: paleturquoise; 
+        color: grey; 
+        font-size: 3em; 
+    }
+    .input_file{
+        background-color: transparent; 
+        display: none; 
+    }
+
+}
\ No newline at end of file
diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx
index a43e6e365..6e15b0802 100644
--- a/src/mobile/ImageUpload.tsx
+++ b/src/mobile/ImageUpload.tsx
@@ -1,14 +1,21 @@
 import * as ReactDOM from 'react-dom'; 
 import React = require('react');
+import "./ImageUpload.scss"
+
+
+
+const onPointerDown = (e: React.TouchEvent) => {
+    let imgInput = document.getElementById("input_image_file"); 
+    if (imgInput){
+        imgInput.click(); 
+    }
+}
 
 ReactDOM.render((
-    <div
-        style={{
-            position: "absolute",
-            width: "100%",
-            height: "100%",
-            background: "yellow"
-        }}
-    ></div>),
+    <div className = "imgupload_cont">
+        <button className = "button_file" onTouchStart = {onPointerDown}> Open Image </button>
+        <input type= "file" accept = "image/*" capture="camera" className = "input_file" id = "input_image_file"></input>
+        
+    </div>),
     document.getElementById('root')
 );
\ No newline at end of file