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">
+      {
+        // <Button type="primary">
+        //       <UploadOutlined />
+        //     </Button>
+      }
+      {children || (
+        <>
+          <p className="ant-upload-drag-icon">
             <UploadOutlined />
-      </Button>
+          </p>
-    </Upload>
+          <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);

client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx

@@ -66,12 +66,7 @@ function JobsDocumentsComponent({
 
   return (
     <div className="clearfix">
-      <DocumentsUploadComponent
+      <div>
-        jobId={jobId}
-        billId={billId}
-        callbackAfterUpload={billsCallback || refetch}
-        tagsArray={["test"]}
-      />
         <Space>
           <JobsDocumentsGallerySelectAllComponent
             galleryImages={galleryImages}
@@ -83,8 +78,15 @@ function JobsDocumentsComponent({
             deletionCallback={billsCallback || refetch}
           />
         </Space>
+      </div>
       <div style={{ marginTop: "2rem" }}>
         <Card title={t("jobs.labels.documents-images")}>
+          <DocumentsUploadComponent
+            jobId={jobId}
+            billId={billId}
+            callbackAfterUpload={billsCallback || refetch}
+            tagsArray={["test"]}
+          >
             <Gallery
               images={galleryImages.images}
               backdropClosesModal={true}
@@ -104,9 +106,16 @@ function JobsDocumentsComponent({
                 });
               }}
             />
+          </DocumentsUploadComponent>
         </Card>
 
         <Card title={t("jobs.labels.documents-other")}>
+          <DocumentsUploadComponent
+            jobId={jobId}
+            billId={billId}
+            callbackAfterUpload={billsCallback || refetch}
+            tagsArray={["test"]}
+          >
             <Gallery
               images={galleryImages.other}
               backdropClosesModal={true}
@@ -127,6 +136,7 @@ function JobsDocumentsComponent({
                 });
               }}
             />
+          </DocumentsUploadComponent>
         </Card>
       </div>
     </div>