From 0df98afbed52b166d3eb82ddf30e945857e6dc2c Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Tue, 18 May 2021 16:29:08 -0700
Subject: [PATCH] IO-1104 UI update for bills upload.

---
 .../bill-form/bill-form.component.jsx         | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/client/src/components/bill-form/bill-form.component.jsx b/client/src/components/bill-form/bill-form.component.jsx
index 8cb3259ce..b5cfb9322 100644
--- a/client/src/components/bill-form/bill-form.component.jsx
+++ b/client/src/components/bill-form/bill-form.component.jsx
@@ -1,6 +1,6 @@
+import { UploadOutlined } from "@ant-design/icons";
 import { useApolloClient } from "@apollo/client";
 import {
-  Button,
   Divider,
   Form,
   Input,
@@ -316,9 +316,21 @@ export function BillFormComponent({
           return e && e.fileList;
         }}
       >
-        <Upload name="logo" beforeUpload={() => false} listType="picture">
-          <Button>Click to upload</Button>
-        </Upload>
+        <Upload.Dragger
+          multiple={true}
+          name="logo"
+          beforeUpload={() => false}
+          listType="picture"
+        >
+          <>
+            <p className="ant-upload-drag-icon">
+              <UploadOutlined />
+            </p>
+            <p className="ant-upload-text">
+              Click or drag files to this area to upload.
+            </p>
+          </>
+        </Upload.Dragger>
       </Form.Item>
     </div>
   );