add fileUpload

Components/DocViewer/index.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import DocViewer, { DocViewerRenderers }  from "react-doc-viewer";
+
+
+
+interface DocViewer{
+    paragraphs:string[]
+    error: string;
+    variants: string[]
+}
+
+export const MyDocViewer : React.FC<DocViewer> = () =>{
+
+
+    return(
+        <div>
+        </div>
+    );
+}

Components/FileUploader/index.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from "react";
+import  {  Button, message, Upload  } from "antd"
+import Icon, { UploadOutlined } from '@ant-design/icons';
+import 'antd/dist/antd.css';
+
+
+interface FileUploaderIE{
+    onResponse: (response:any)=>void
+}
+
+export const FileUploader:React.FC<FileUploaderIE> = (data) =>{
+
+    const props = {
+        name: 'file',
+        action: 'http://192.168.9.152:8000/api/docx/',
+        headers: {
+          authorization: 'authorization-text',
+        },
+      
+        onChange(info:any) {
+          if (info.file.status !== 'uploading') {
+            console.log(info.file, info.fileList);
+          }
+      
+          if (info.file.status === 'done') {
+            data.onResponse(info.file.response)
+            message.success(`${info.file.name} file uploaded successfully`);
+          } else if (info.file.status === 'error') {
+            message.error(`${info.file.name} file upload failed.`);
+          }
+        },
+      };
+      
+    return (
+            <Upload {...props}>
+              <Button icon={<UploadOutlined></UploadOutlined>}>Click to Upload</Button>
+            </Upload>
+      );
+}

Components/header/index.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import styles from "./header.module.css"
+
+export const Header:React.FC = () =>{
+    return(
+        <div className={styles.header}>
+            <div className={styles.item}>
+
+            </div>
+        </div>
+    );
+}