diff --git a/src/pages/Product/Product.js b/src/pages/Product/Product.js
index 8319da3..ee4fd07 100644
--- a/src/pages/Product/Product.js
+++ b/src/pages/Product/Product.js
@@ -1,22 +1,19 @@
-import React, { useContext, useEffect } from "react";
-import { Button, Card, Col, Input, message, Row, Upload } from "antd";
-import {
-  FilterOutlined,
-  PlusSquareOutlined,
-  UploadOutlined,
-} from "@ant-design/icons";
-import { BreadcumbComponent } from "../../component/BreadcumbComponent";
-import { useStore } from "../../utils/useStore";
-import { observer } from "mobx-react-lite";
-import { ProductComponent } from "../../component/ProductComponent";
-import { LINKS } from "../../routes/app";
-import { ModalLoaderContext } from "../../utils/modal";
+import React, {useContext, useEffect, useState} from "react";
+import {Button, Card, Col, Input, message, Row, Upload} from "antd";
+import {FilterOutlined, LoadingOutlined, UploadOutlined,} from "@ant-design/icons";
+import {BreadcumbComponent} from "../../component/BreadcumbComponent";
+import {useStore} from "../../utils/useStore";
+import {observer} from "mobx-react-lite";
+import {ProductComponent} from "../../component/ProductComponent";
+import {LINKS} from "../../routes/app";
+import {ModalLoaderContext} from "../../utils/modal";
 
-const { Search } = Input;
+const {Search} = Input;
 
 export const Product = observer(() => {
   const store = useStore();
   const modalLoader = useContext(ModalLoaderContext);
+  const [loading, setLoading] = useState(false);
 
   useEffect(() => {
     const init = async () => {
@@ -49,36 +46,97 @@ export const Product = observer(() => {
     },
     {
       route: LINKS.PRODUCT,
-      name: <span style={{ fontWeight: "bold" }}>Product</span>,
+      name: <span style={{fontWeight: "bold"}}>Product</span>,
     },
   ];
 
+  const beforeUpload = (file) => {
+    let isLt2M;
+    let allowedFile = [
+      "text/csv", "application/csv",
+      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+      "application/vnd.ms-excel.sheet.binary.macroEnabled.12",
+      "application/vnd.ms-excel",
+      "application/vnd.ms-excel.sheet.macroEnabled.12"
+    ];
+    let isValid = allowedFile.includes(file.type);
+    if (!isValid) {
+      message.error("You can only upload Excel file!");
+    }
+    isLt2M = file.size / 1024 / 1024 < 10;
+    if (!isLt2M) {
+      message.error("File must smaller than 10MB!");
+    }
+    return isValid && isLt2M ? true : Upload.LIST_IGNORE;
+  };
+
+  const uploadHandler = async (args) => {
+    const file = args.file;
+    const responseUpload = await store.product.uploadExcel(file);
+
+    if (responseUpload.status === 201) {
+      message.success("Success upload excel!");
+    } else {
+      message.error("Failed upload excel!");
+      setLoading(false);
+    }
+
+    const responseUploadProduct = await handleUploadProduct(responseUpload);
+    setLoading(false);
+  };
+
+  const handleChange = (info) => {
+    if (info.file.status === 'uploading') {
+      setLoading(true);
+    } else {
+      setLoading(false)
+    }
+  };
+
+  const handleUploadProduct = async (data) => {
+    const response = await store.product.uploadProduct({fileName: data.body.filename});
+
+    if (response.status === 201) {
+      message.success("Success Create Product by Excel!");
+    } else {
+      message.error("Failed Create Product by Excel!");
+      setLoading(false);
+    }
+    return response;
+  }
+
+  const loadingState = (
+      <div>
+        {loading ? <LoadingOutlined/> : null}
+      </div>
+  );
+
   return (
-    <div className={["ppob-container"].join(" ")}>
-      <BreadcumbComponent data={routeData} />
-      <Card>
-        {store.authentication.userData.role !== "Admin" && (
-          <div>
-            <Row style={{ marginBottom: 20 }}>
-              <Col span={12}>
-                <Button
-                  onClick={() => {
-                    store.product.visibleModalFilterProduct = true;
-                  }}
-                >
-                  <FilterOutlined />
-                  Filter
-                </Button>
-              </Col>
-              <Col span={12}>
-                <div
-                  style={{
-                    display: store.ui.mediaQuery.isMobile ? "" : "flex",
-                    justifyContent: "flex-end",
-                    textAlign: "right",
-                  }}
-                >
-                  {/* <Search
+      <div className={["ppob-container"].join(" ")}>
+        <BreadcumbComponent data={routeData}/>
+        <Card>
+          {store.authentication.userData.role !== "Admin" && (
+              <div>
+                <Row style={{marginBottom: 20}}>
+                  <Col span={12}>
+                    <Button
+                        onClick={() => {
+                          store.product.visibleModalFilterProduct = true;
+                        }}
+                    >
+                      <FilterOutlined/>
+                      Filter
+                    </Button>
+                  </Col>
+                  <Col span={12}>
+                    <div
+                        style={{
+                          display: store.ui.mediaQuery.isMobile ? "" : "flex",
+                          justifyContent: "flex-end",
+                          textAlign: "right",
+                        }}
+                    >
+                      {/* <Search
                     placeholder="input search text"
                     style={{
                       width: store.ui.mediaQuery.isMobile ? 160 : 200,
@@ -87,32 +145,36 @@ export const Product = observer(() => {
                     }}
                   /> */}
 
-                  <div
-                    style={{
-                      display: store.ui.mediaQuery.isMobile ? "" : "flex",
-                      justifyContent: "flex-end",
-                      textAlign: "right",
-                    }}
-                  >
-                    <Upload>
-                      <Button
-                        disabled={store.product.uploadBtnProduct}
-                        style={{
-                          marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
-                          marginBottom: store.ui.mediaQuery.isMobile ? 10 : 10,
-                        }}
-                        icon={<UploadOutlined />}
+                      <div
+                          style={{
+                            display: store.ui.mediaQuery.isMobile ? "" : "flex",
+                            justifyContent: "flex-end",
+                            textAlign: "right",
+                          }}
                       >
-                        Upload Product
-                      </Button>
-                    </Upload>
-                    {/* <Button
-                      onClick={() => (store.product.visibleModalProduct = true)}
-                    >
-                      <PlusSquareOutlined /> New
-                    </Button> */}
-                  </div>
-                </div>
+                        <Upload
+                            showUploadList={false}
+                            onChange={handleChange}
+                            beforeUpload={(file) => beforeUpload(file)}
+                            customRequest={(args) => uploadHandler(args)}
+                            onRemove={(file) => {
+                              setLoading(false);
+                            }}
+                        >
+                          <Button
+                              disabled={loading}
+                              style={{
+                                marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
+                                marginBottom: store.ui.mediaQuery.isMobile ? 10 : 10,
+                              }}
+                              icon={<UploadOutlined/>}
+                          >
+                            Upload Product
+                          </Button>
+                        </Upload>
+                        {loadingState}
+                      </div>
+                    </div>
               </Col>
             </Row>
           </div>
diff --git a/src/store/product.js b/src/store/product.js
index 5881c38..af5f1d9 100644
--- a/src/store/product.js
+++ b/src/store/product.js
@@ -107,6 +107,24 @@ export class Product {
             console.error(e);
         }
     }
+
+    async uploadExcel(data) {
+        try {
+            const response = await http.upload(data);
+            return response;
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
+    async uploadProduct(data) {
+        try {
+            const response = await http.post('/product/upload-product').send(data);
+            return response;
+        } catch (e) {
+            console.error(e);
+        }
+    }
 }