Updated document upload component IO-526

client/src/components/documents-upload/documents-upload.component.jsx

@@ -15,6 +15,7 @@ const mapStateToProps = createStructuredSelector({
 });
 
 export function DocumentsUploadComponent({
+  children,
   currentUser,
   bodyshop,
   jobId,
@@ -23,7 +24,7 @@ export function DocumentsUploadComponent({
   callbackAfterUpload,
 }) {
   return (
-    <Upload
+    <Upload.Dragger
       multiple={true}
       customRequest={(ev) =>
         handleUpload(ev, {
@@ -36,12 +37,28 @@ export function DocumentsUploadComponent({
         })
       }
       accept="audio/*, video/*, image/*, .pdf, .doc, .docx, .xls, .xlsx"
-      showUploadList={false}
+      // showUploadList={false}
     >
-      <Button type="primary">
-        <UploadOutlined />
-      </Button>
-    </Upload>
+      {
+        // <Button type="primary">
+        //       <UploadOutlined />
+        //     </Button>
+      }
+      {children || (
+        <>
+          <p className="ant-upload-drag-icon">
+            <UploadOutlined />
+          </p>
+          <p className="ant-upload-text">
+            Click or drag file to this area to upload
+          </p>
+          <p className="ant-upload-hint">
+            Support for a single or bulk upload. Strictly prohibit from
+            uploading company data or other band files
+          </p>
+        </>
+      )}
+    </Upload.Dragger>
   );
 }
 export default connect(mapStateToProps, null)(DocumentsUploadComponent);