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 type="primary">
-      </Button>
+        //       <UploadOutlined />
-    </Upload>
+        //     </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);

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

@@ -66,67 +66,77 @@ function JobsDocumentsComponent({
 
   return (
     <div className="clearfix">
-      <DocumentsUploadComponent
+      <div>
-        jobId={jobId}
+        <Space>
-        billId={billId}
+          <JobsDocumentsGallerySelectAllComponent
-        callbackAfterUpload={billsCallback || refetch}
+            galleryImages={galleryImages}
-        tagsArray={["test"]}
+            setGalleryImages={setgalleryImages}
-      />
+          />
-      <Space>
+          <JobsDocumentsDownloadButton galleryImages={galleryImages} />
-        <JobsDocumentsGallerySelectAllComponent
+          <JobsDocumentsDeleteButton
-          galleryImages={galleryImages}
+            galleryImages={galleryImages}
-          setGalleryImages={setgalleryImages}
+            deletionCallback={billsCallback || refetch}
-        />
+          />
-        <JobsDocumentsDownloadButton galleryImages={galleryImages} />
+        </Space>
-        <JobsDocumentsDeleteButton
+      </div>
-          galleryImages={galleryImages}
-          deletionCallback={billsCallback || refetch}
-        />
-      </Space>
       <div style={{ marginTop: "2rem" }}>
         <Card title={t("jobs.labels.documents-images")}>
-          <Gallery
+          <DocumentsUploadComponent
-            images={galleryImages.images}
+            jobId={jobId}
-            backdropClosesModal={true}
+            billId={billId}
-            onClickImage={(props) => {
+            callbackAfterUpload={billsCallback || refetch}
-              window.open(
+            tagsArray={["test"]}
-                props.target.src,
+          >
-                "_blank",
+            <Gallery
-                "toolbar=0,location=0,menubar=0"
+              images={galleryImages.images}
-              );
+              backdropClosesModal={true}
-            }}
+              onClickImage={(props) => {
-            onSelectImage={(index, image) => {
+                window.open(
-              setgalleryImages({
+                  props.target.src,
-                ...galleryImages,
+                  "_blank",
-                images: galleryImages.images.map((g, idx) =>
+                  "toolbar=0,location=0,menubar=0"
-                  index === idx ? { ...g, isSelected: !g.isSelected } : g
+                );
-                ),
+              }}
-              });
+              onSelectImage={(index, image) => {
-            }}
+                setgalleryImages({
-          />
+                  ...galleryImages,
+                  images: galleryImages.images.map((g, idx) =>
+                    index === idx ? { ...g, isSelected: !g.isSelected } : g
+                  ),
+                });
+              }}
+            />
+          </DocumentsUploadComponent>
         </Card>
 
         <Card title={t("jobs.labels.documents-other")}>
-          <Gallery
+          <DocumentsUploadComponent
-            images={galleryImages.other}
+            jobId={jobId}
-            backdropClosesModal={true}
+            billId={billId}
-            enableLightbox={false}
+            callbackAfterUpload={billsCallback || refetch}
-            onClickThumbnail={(index) => {
+            tagsArray={["test"]}
-              window.open(
+          >
-                galleryImages.other[index].src,
+            <Gallery
-                "_blank",
+              images={galleryImages.other}
-                "toolbar=0,location=0,menubar=0"
+              backdropClosesModal={true}
-              );
+              enableLightbox={false}
-            }}
+              onClickThumbnail={(index) => {
-            onSelectImage={(index) => {
+                window.open(
-              setgalleryImages({
+                  galleryImages.other[index].src,
-                ...galleryImages,
+                  "_blank",
-                other: galleryImages.other.map((g, idx) =>
+                  "toolbar=0,location=0,menubar=0"
-                  index === idx ? { ...g, isSelected: !g.isSelected } : g
+                );
-                ),
+              }}
-              });
+              onSelectImage={(index) => {
-            }}
+                setgalleryImages({
-          />
+                  ...galleryImages,
+                  other: galleryImages.other.map((g, idx) =>
+                    index === idx ? { ...g, isSelected: !g.isSelected } : g
+                  ),
+                });
+              }}
+            />
+          </DocumentsUploadComponent>
         </Card>
       </div>
     </div>