From 1c6caff9c17cd30123d0031e90c16538cb7827fb Mon Sep 17 00:00:00 2001 From: fung-csf <67588367+fung-csf@users.noreply.github.com> Date: Sun, 1 Aug 2021 11:56:18 +0800 Subject: [PATCH 01/31] Create FileInput.js File Upload component that display the name of the file selected by user. --- src/FileInput.js | 43 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 src/FileInput.js diff --git a/src/FileInput.js b/src/FileInput.js new file mode 100644 index 00000000..8ce7a120 --- /dev/null +++ b/src/FileInput.js @@ -0,0 +1,43 @@ +import React, { useState } from "react"; + +function FileInput({ value, ...rest }) { + const [input, setInput] = useState(false); + const [Files, setFiles] = useState([]); + + + + return ( +
+ + + {Boolean(input) && ( +
+ Selected files: {Files.map((f) => f.name).join(", ")} +
+ )} +
+ ); +} + +export default FileInput; From 1fa3116fb2f0792285e83942d1b46d7b1ceed483 Mon Sep 17 00:00:00 2001 From: fung-csf <67588367+fung-csf@users.noreply.github.com> Date: Sun, 1 Aug 2021 12:05:58 +0800 Subject: [PATCH 02/31] Update index.ts added the line: import { FileInput } from './FileInput'; Edited the line: export { UploadProps, FileInput }; --- src/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.ts b/src/index.ts index 1cbbd3ef..0f61f4af 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,6 +1,6 @@ import Upload from './Upload'; import { UploadProps } from './interface'; - -export { UploadProps }; +import { FileInput } from './FileInput'; +export { UploadProps, FileInput }; export default Upload; From cec39653b24d0ae5790423b2fd067fb958379815 Mon Sep 17 00:00:00 2001 From: fung-csf <67588367+fung-csf@users.noreply.github.com> Date: Tue, 24 Aug 2021 21:12:04 +0800 Subject: [PATCH 03/31] Update FileInput.js Change function parameters for FileInput.js for integration with UploadAlt.js --- src/FileInput.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/FileInput.js b/src/FileInput.js index 8ce7a120..f84fa19a 100644 --- a/src/FileInput.js +++ b/src/FileInput.js @@ -1,20 +1,22 @@ import React, { useState } from "react"; -function FileInput({ value, ...rest }) { +function FileInput({ value, inputFileValue, ...rest }) { const [input, setInput] = useState(false); const [Files, setFiles] = useState([]); - + function noop(input) { + setInput(true); + } return (
- {Boolean(content) && ( + {Boolean(filePresent) && (
Selected files: {Files.map((f) => f.name).join(", ")}
From cdd11eb672a311c009f36a77f4c97033792a5fa5 Mon Sep 17 00:00:00 2001 From: fung-csf <67588367+fung-csf@users.noreply.github.com> Date: Sat, 28 Aug 2021 09:35:12 +0800 Subject: [PATCH 20/31] Update index.ts Remove braces in file import --- src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.ts b/src/index.ts index 45610111..03a6b600 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,6 +1,6 @@ import Upload from './Upload'; import { UploadProps } from './interface'; -import { FileInput } from './FileInput'; +import FileInput from './FileInput'; export { UploadProps,FileInput}; From 77a354bf20b2275f6f878a272fb49fc3a06c77ba Mon Sep 17 00:00:00 2001 From: jytan9898u <87845692+jytan9898u@users.noreply.github.com> Date: Sat, 28 Aug 2021 09:42:27 +0800 Subject: [PATCH 21/31] Rename UploadAlt.js to UploadAlt.tsx --- src/{UploadAlt.js => UploadAlt.tsx} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename src/{UploadAlt.js => UploadAlt.tsx} (91%) diff --git a/src/UploadAlt.js b/src/UploadAlt.tsx similarity index 91% rename from src/UploadAlt.js rename to src/UploadAlt.tsx index c6e1d6e6..4474fa2d 100644 --- a/src/UploadAlt.js +++ b/src/UploadAlt.tsx @@ -45,4 +45,4 @@ function UploadAlt() { ); } - export default UploadAlt; \ No newline at end of file + export default UploadAlt; From 9fb3465521e83e76e225b022af1d8ede33bf00b2 Mon Sep 17 00:00:00 2001 From: jytan9898u <87845692+jytan9898u@users.noreply.github.com> Date: Sat, 28 Aug 2021 09:52:23 +0800 Subject: [PATCH 22/31] Update UploadAlt.tsx --- src/UploadAlt.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/UploadAlt.tsx b/src/UploadAlt.tsx index 4474fa2d..4fd3703a 100644 --- a/src/UploadAlt.tsx +++ b/src/UploadAlt.tsx @@ -20,7 +20,7 @@ function UploadAlt() { const [fileDataContent, setfileDataContent] = useState(" "); - function inputFileValue(file) { + function fileContent(file) { setfileData(file[0]); // console.log(file[0]); } @@ -37,7 +37,7 @@ function UploadAlt() { marginBottom: "20px" }} > - + From 77ccbb145191b3f92a39ac2b378862ef55cf661d Mon Sep 17 00:00:00 2001 From: fung-csf <67588367+fung-csf@users.noreply.github.com> Date: Sat, 28 Aug 2021 10:27:04 +0800 Subject: [PATCH 23/31] Update .eslintrc.js added the rules: "no-shadow": "off", "@typescript-eslint/no-shadow": ["error"] --- .eslintrc.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.eslintrc.js b/.eslintrc.js index 6422ba86..67448dc6 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -19,5 +19,7 @@ module.exports = { "import/no-named-as-default": 0, "import/no-extraneous-dependencies": 0, "no-underscore-dangle": 0, + "no-shadow": "off", + "@typescript-eslint/no-shadow": ["error"] }, }; From 3f26eae963d52f3bcf8dd6dd81a85e5e785d4675 Mon Sep 17 00:00:00 2001 From: fung-csf <67588367+fung-csf@users.noreply.github.com> Date: Sat, 28 Aug 2021 10:31:45 +0800 Subject: [PATCH 24/31] Update .eslintrc.js remove base rules in eslintrc.js --- .eslintrc.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.eslintrc.js b/.eslintrc.js index 67448dc6..8fbed76b 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -3,7 +3,7 @@ const base = require("@umijs/fabric/dist/eslint"); module.exports = { ...base, rules: { - ...base.rules, + "react/no-array-index-key": 0, "react/sort-comp": 0, "@typescript-eslint/no-explicit-any": 0, From bc17a1a6195c3c582cf54e7663573128b9d1559e Mon Sep 17 00:00:00 2001 From: fung-csf <67588367+fung-csf@users.noreply.github.com> Date: Sat, 28 Aug 2021 10:40:54 +0800 Subject: [PATCH 25/31] Update .eslintrc.js remove line : ...base, --- .eslintrc.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.eslintrc.js b/.eslintrc.js index 8fbed76b..db6855a0 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,7 +1,7 @@ const base = require("@umijs/fabric/dist/eslint"); module.exports = { - ...base, + rules: { "react/no-array-index-key": 0, From 40c0a907d4b5430d9a8fd76f56c08cad0d9dbfff Mon Sep 17 00:00:00 2001 From: fung-csf <67588367+fung-csf@users.noreply.github.com> Date: Sat, 28 Aug 2021 10:50:34 +0800 Subject: [PATCH 26/31] Update .eslintrc.js added new rules --- .eslintrc.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index db6855a0..135c6e98 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,9 +1,9 @@ const base = require("@umijs/fabric/dist/eslint"); module.exports = { - + ...base, rules: { - + ...base.rules, "react/no-array-index-key": 0, "react/sort-comp": 0, "@typescript-eslint/no-explicit-any": 0, @@ -19,7 +19,9 @@ module.exports = { "import/no-named-as-default": 0, "import/no-extraneous-dependencies": 0, "no-underscore-dangle": 0, - "no-shadow": "off", - "@typescript-eslint/no-shadow": ["error"] }, + "rules": { + "no-shadow": "off", + "@typescript-eslint/no-shadow": ["error"] + } }; From 3c9a7824d1f7bf914f540b109863080f62be0710 Mon Sep 17 00:00:00 2001 From: fung-csf <67588367+fung-csf@users.noreply.github.com> Date: Sat, 28 Aug 2021 10:59:38 +0800 Subject: [PATCH 27/31] Update .eslintrc.js "@typescript-eslint/no-shadow": 0, "no-shadow": 0, --- .eslintrc.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 135c6e98..f5bb36c2 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -19,9 +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, }, - "rules": { - "no-shadow": "off", - "@typescript-eslint/no-shadow": ["error"] - } + }; From 4931035720f0bb426c91a85730739740a42d593d Mon Sep 17 00:00:00 2001 From: jytan9898u <87845692+jytan9898u@users.noreply.github.com> Date: Sat, 28 Aug 2021 11:18:52 +0800 Subject: [PATCH 28/31] Update index.ts --- src/index.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/index.ts b/src/index.ts index 03a6b600..140e31dd 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,7 +1,8 @@ import Upload from './Upload'; import { UploadProps } from './interface'; -import FileInput from './FileInput'; +import FileInput from './FileInput'; +import UploadAlt from './UploadAlt'; -export { UploadProps,FileInput}; +export { UploadProps,FileInput, UploadAlt }; export default Upload; From e4c6a2a6a9685197f7544d5558d1ee80a2494df9 Mon Sep 17 00:00:00 2001 From: jytan9898u <87845692+jytan9898u@users.noreply.github.com> Date: Sat, 28 Aug 2021 11:37:35 +0800 Subject: [PATCH 29/31] Update UploadAlt.tsx --- src/UploadAlt.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/UploadAlt.tsx b/src/UploadAlt.tsx index 4fd3703a..b566c529 100644 --- a/src/UploadAlt.tsx +++ b/src/UploadAlt.tsx @@ -11,7 +11,7 @@ import { } from "antd"; -import FileInput from './FileInput.js' +import FileInput from './FileInput.tsx' function UploadAlt() { From 2c8efa15cc813b49d1d2ec7f22bfd3c7c8b3d73e Mon Sep 17 00:00:00 2001 From: jackisgood13 <88269396+jackisgood13@users.noreply.github.com> Date: Sat, 28 Aug 2021 20:53:33 +0800 Subject: [PATCH 30/31] Update UploadAlt Add Upload Button to UploadAlt.tsx --- src/UploadAlt.tsx | 55 ++++++++++++++++++++++++++++++----------------- 1 file changed, 35 insertions(+), 20 deletions(-) diff --git a/src/UploadAlt.tsx b/src/UploadAlt.tsx index b566c529..43226e5a 100644 --- a/src/UploadAlt.tsx +++ b/src/UploadAlt.tsx @@ -1,23 +1,14 @@ 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.tsx' +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) { @@ -25,9 +16,33 @@ function UploadAlt() { // console.log(file[0]); } - - - return ( + + 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 (
+ }}> - - + +
); } - export default UploadAlt; From f6872e7bdad103bf10683237940971a57e46c989 Mon Sep 17 00:00:00 2001 From: eshan25 Date: Sat, 28 Aug 2021 21:18:11 +0800 Subject: [PATCH 31/31] Added confirmation box --- src/UploadAlt.tsx | 26 +++++++++++++++++++++++--- 1 file changed, 23 insertions(+), 3 deletions(-) diff --git a/src/UploadAlt.tsx b/src/UploadAlt.tsx index 43226e5a..0f79a48c 100644 --- a/src/UploadAlt.tsx +++ b/src/UploadAlt.tsx @@ -16,7 +16,14 @@ function UploadAlt() { // console.log(file[0]); } - + const showModal = () => { + setIsModalVisible(true); + }; + + const handleCancel = () => { + setIsModalVisible(false); + }; + const handleSubmit = (e) => { const fr = new FileReader(); fr.onload = function (e) { @@ -25,6 +32,7 @@ function UploadAlt() { setfileDataContent(text); console.log(fileDataContent); }; + fr.readAsText(fileData); axios({ method: "post", @@ -55,9 +63,21 @@ function UploadAlt() { - + + style={{ + overflow: 'auto', + borderRadius: '10px', + backgroundColor: '#1890ff', + }} +

Are you sure to upload the following file?

+ {fileData &&

File: {fileData.name}

} +
); } - export default UploadAlt; + export default UploadAlt; \ No newline at end of file