Added FileInput component

.eslintrc.js

@@ -19,5 +19,8 @@ module.exports = {
     "import/no-named-as-default": 0,
     "import/no-extraneous-dependencies": 0,
     "no-underscore-dangle": 0,
+    "@typescript-eslint/no-shadow": 0,
+     "no-shadow": 0,
   },
+
 };

.github/workflows/react-component-ci.yml

@@ -2,9 +2,11 @@ name: CI
 
 on:
   push:
-    branches: [ master ]
+    branches: [ master,ChowSengFung ]
+    paths-ignore:
+      - './src/FileInput.js'
   pull_request:
-    branches: [ master ]
+    branches: [ master,ChowSengFung ]
 
 jobs:
   setup:

package.json

@@ -42,6 +42,7 @@
     "@types/react": "^16.9.2",
     "@types/react-dom": "^16.9.0",
     "@umijs/fabric": "^2.0.0",
+    "antd": "^4.16.13",
     "axios": "^0.20.0",
     "co-busboy": "^1.3.0",
     "coveralls": "^3.0.3",

src/FileInput.tsx

@@ -0,0 +1,47 @@
+import React, { useState } from "react";
+
+function FileInput({ value, FileContent, ...rest }) {
+  const [filePresent, setFilePresent] = useState(false);
+  const [Files, setFiles] = useState([]);
+
+  function noop(filePresent) {
+    setFilePresent(true);
+  }
+
+  return (
+    <div>
+      <label
+        className="wrapper"
+        style={{
+            width: "50px",
+            background: "#fff",
+            padding: "30px",
+
+          boxShadow:
+            "0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)"
+        }}
+      >
+        Click to here to select file for upload...
+        <input
+          {...rest}
+          style={{ display: "none" }}
+          type="file"
+          onChange={(e) => {
+            setFiles([...e.target.files]);
+            FileContent(e.target.files);
+
+            setFilePresent(true);
+          }}
+        />
+      </label>
+
+      {Boolean(filePresent) && (
+        <div style={{ marginTop: "40px", marginBottom: "10px" }}>
+          Selected files: {Files.map((f) => f.name).join(", ")}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default FileInput;

src/UploadAlt.tsx

@@ -0,0 +1,83 @@
+import React, { useState, useEffect } from "react";
+import "antd/dist/antd.css";
+import axios from "axios";
+import { Card, Button, Modal } from "antd";
+import FileInput from './FileInput'
+
+
+function UploadAlt() {
+
+    const [fileData, setfileData] = useState();
+    const [isModalVisible, setIsModalVisible] = useState(false);    
+    const [fileDataContent, setfileDataContent] = useState(" ");
+
+    function fileContent(file) {
+        setfileData(file[0]);
+        // console.log(file[0]);
+      }
+
+      const showModal = () => {
+        setIsModalVisible(true);
+      };
+
+      const handleCancel = () => {
+        setIsModalVisible(false);
+      };
+
+      const handleSubmit = (e) => {
+        const fr = new FileReader();
+        fr.onload = function (e) {
+          // e.target.result should contain the text
+          const text = e.target.result;
+          setfileDataContent(text);
+          console.log(fileDataContent);
+        };
+
+        fr.readAsText(fileData);
+        axios({
+          method: "post",
+          url: "",
+          // database table with the columns Name, content
+          data: [{ Name: fileData.name, content: fileDataContent }]
+        })
+          .then(function (response) {
+            // handle success
+            console.log(response.data);
+          })
+          .catch(function (error) {
+            // handle error
+            console.log(error);
+          });
+        };
+
+      return (
+        <div>
+        <Card
+            style={{
+            paddingTop: "40px",
+            width: 386,
+            paddingBottom: "20px",
+            marginBottom: "20px"
+            }}>
+            <FileInput fileContent={fileContent} />
+            <Button type="primary" onClick={showModal} style={{marginTop: "50px"}}>
+            Upload
+            </Button>
+            <Modal
+              title="Confirmation"
+              visible={isModalVisible}
+              onOk={handleSubmit}
+              onCancel={handleCancel}>
+              style={{
+                overflow: 'auto',
+                borderRadius: '10px',
+                backgroundColor: '#1890ff',
+              }}
+            <p>Are you sure to upload the following file?</p>
+            {fileData && <p>File: {fileData.name}</p>}
+            </Modal>
+        </Card>
+    </div>
+    );
+  }
+  export default UploadAlt;

src/index.ts

@@ -1,6 +1,8 @@
 import Upload from './Upload';
 import { UploadProps } from './interface';
+import FileInput from './FileInput';
+import UploadAlt from './UploadAlt';
 
-export { UploadProps };
+export { UploadProps,FileInput, UploadAlt };
 
 export default Upload;