Merge pull request #565 from AI4Bharat/CL-644

added drag and drop in bulk video upload
AI4Bharat · Feb 29, 2024 · 1c4c5d7 · 1c4c5d7
2 parents ae408e5 + 3405317
commit 1c4c5d7
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 38 deletions.
diff --git a/public/expected_glossary_input.csv b/public/expected_glossary_input.csv
@@ -0,0 +1,2 @@
+Email Id,Source Text,Target Text,Source Language,Target Language
+[email protected],Python,अजगर,en,hi
diff --git a/src/containers/Organization/MyOrganization.jsx b/src/containers/Organization/MyOrganization.jsx
@@ -1,5 +1,5 @@
 //My Organization
-import { Fragment, useEffect, useRef, useState } from "react";
+import { Fragment, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate, useParams } from "react-router-dom";
 import { roles } from "utils";
@@ -36,6 +36,7 @@ import OrganizationReport from "./OrganizationReport";
 import ProjectList from "./ProjectList";
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 import { AddOrganizationMember, AlertComponent, Loader } from "common";
+import UploadFileDialog from "common/UploadFileDialog";
 
 const TabPanel = (props) => {
   const { children, value, index, ...other } = props;
@@ -58,7 +59,6 @@ const MyOrganization = () => {
   const dispatch = useDispatch();
   const classes = DatasetStyle();
   const navigate = useNavigate();
-  const csvUpload = useRef();
 
   const [value, setValue] = useState(0);
   const [addUserDialog, setAddUserDialog] = useState(false);
@@ -69,6 +69,8 @@ const MyOrganization = () => {
   const [alertMessage, setAlertMessage] = useState("");
   const [alertColumn, setAlertColumn] = useState([]);
   const [orgOwnerId, setOrgOwnerId] = useState("");
+  const [openUploadBulkVideoDialog, setOpenUploadBulkVideoDialog] =
+    useState(false);
 
   const organizationDetails = useSelector(
     (state) => state.getOrganizationDetails.data
@@ -83,6 +85,10 @@ const MyOrganization = () => {
 
     if (!progress) {
       if (success) {
+        if (apiType === "UPLOAD_CSV") {
+          setOpenUploadBulkVideoDialog(false);
+        }
+
         if (apiType === "GET_USERS_ROLES") {
           setNewMemberName([]);
           setNewMemberRole("");
@@ -95,6 +101,7 @@ const MyOrganization = () => {
           setAlertData(data.response);
           setAlertMessage(data.message);
           setAlertColumn("csvAlertColumns");
+          setOpenUploadBulkVideoDialog(false);
         }
       }
     }
@@ -242,7 +249,7 @@ const MyOrganization = () => {
                       style={{ marginLeft: "10px" }}
                       className={classes.projectButton}
                       variant="contained"
-                      onClick={() => csvUpload.current.click()}
+                      onClick={() => setOpenUploadBulkVideoDialog(true)}
                     >
                       Bulk Video Upload
                       <Tooltip title="Download sample CSV">
@@ -258,16 +265,6 @@ const MyOrganization = () => {
                           <InfoOutlinedIcon />
                         </IconButton>
                       </Tooltip>
-                      <input
-                        type="file"
-                        style={{ display: "none" }}
-                        ref={csvUpload}
-                        accept=".csv"
-                        onChange={(event) => {
-                          handeFileUpload(event.target.files);
-                          event.target.value = null;
-                        }}
-                      />
                     </Button>
                   )}
                 </Fragment>
@@ -359,6 +356,15 @@ const MyOrganization = () => {
           columns={alertColumn}
         />
       )}
+
+      {openUploadBulkVideoDialog && (
+        <UploadFileDialog
+          openDialog={openUploadBulkVideoDialog}
+          handleClose={() => setOpenUploadBulkVideoDialog(false)}
+          title={"Upload Bulk Videos"}
+          handleSubmit={handeFileUpload}
+        />
+      )}
     </Grid>
   );
 };

diff --git a/src/containers/Organization/Project/Project.jsx b/src/containers/Organization/Project/Project.jsx
@@ -1,5 +1,5 @@
 //My Organization
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate, useParams } from "react-router-dom";
 import moment from "moment/moment";
@@ -48,6 +48,7 @@ import {
   CreateVideoDialog,
   Loader,
 } from "common";
+import UploadFileDialog from "common/UploadFileDialog";
 
 const TabPanel = (props) => {
   const { children, value, index, ...other } = props;
@@ -70,7 +71,6 @@ const Project = () => {
   const dispatch = useDispatch();
   const classes = DatasetStyle();
   const navigate = useNavigate();
-  const csvUpload = useRef();
 
   const [addmembers, setAddmembers] = useState([]);
   const [addUserDialog, setAddUserDialog] = useState(false);
@@ -102,6 +102,8 @@ const Project = () => {
   const [alertColumn, setAlertColumn] = useState("");
   const [orgOwnerId, setOrgOwnerId] = useState("");
   const [tabIndex, setTabIndex] = useState(0);
+  const [openUploadBulkVideoDialog, setOpenUploadBulkVideoDialog] =
+    useState(false);
 
   const projectInfo = useSelector((state) => state.getProjectDetails.data);
   const projectvideoList = useSelector(
@@ -130,6 +132,10 @@ const Project = () => {
           getProjectMembers();
         }
 
+        if (apiType === "UPLOAD_CSV") {
+          setOpenUploadBulkVideoDialog(false);
+        }
+
         if (apiType === "CREATE_NEW_VIDEO") {
           dispatch(setSnackBar({ open: false }));
           setShowAlert(true);
@@ -145,6 +151,7 @@ const Project = () => {
           setAlertMessage(data.message);
           setAlertData(data.response);
           setAlertColumn("csvAlertColumns");
+          setOpenUploadBulkVideoDialog(false);
         }
       }
     }
@@ -397,7 +404,7 @@ const Project = () => {
                   style={{ marginLeft: "10px" }}
                   className={classes.projectButton}
                   variant="contained"
-                  onClick={() => csvUpload.current.click()}
+                  onClick={() => setOpenUploadBulkVideoDialog(true)}
                 >
                   Bulk Video Upload
                   <Tooltip title="Download sample CSV">
@@ -413,16 +420,6 @@ const Project = () => {
                       <InfoOutlinedIcon />
                     </IconButton>
                   </Tooltip>
-                  <input
-                    type="file"
-                    style={{ display: "none" }}
-                    ref={csvUpload}
-                    accept=".csv"
-                    onChange={(event) => {
-                      handeFileUpload(event.target.files);
-                      event.target.value = null;
-                    }}
-                  />
                 </Button>
               </Box>
             )}
@@ -543,6 +540,15 @@ const Project = () => {
           columns={alertColumn}
         />
       )}
+
+      {openUploadBulkVideoDialog && (
+        <UploadFileDialog
+          openDialog={openUploadBulkVideoDialog}
+          handleClose={() => setOpenUploadBulkVideoDialog(false)}
+          title={"Upload Bulk Videos"}
+          handleSubmit={handeFileUpload}
+        />
+      )}
     </Grid>
   );
 };

diff --git a/src/containers/UserManagement/MyGlossary.jsx b/src/containers/UserManagement/MyGlossary.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { getColumns, getOptions } from "utils";
 import MUIDataTable from "mui-datatables";
@@ -22,13 +22,13 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import { DatasetStyle, TableStyles } from "styles";
 import GlossaryDialog from "common/GlossaryDialog";
 import UploadFileDialog from "common/UploadFileDialog";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 
 const MyGlossary = () => {
   const classes = DatasetStyle();
   const tableClasses = TableStyles();
 
   const dispatch = useDispatch();
-  const csvUpload = useRef();
 
   const [openGlossaryDialog, setOpenGlossaryDialog] = useState(false);
   const [openUploadGlossaryDialog, setOpenUploadGlossaryDialog] =
@@ -155,6 +155,20 @@ const MyGlossary = () => {
     reader.readAsBinaryString(file[0]);
   };
 
+  const handleSampleDownload = (event) => {
+    event.stopPropagation();
+
+    const link = document.createElement("a");
+
+    link.href = "expected_glossary_input.csv";
+    link.download = "expected_glossary_input.csv";
+
+    document.body.appendChild(link);
+
+    link.click();
+    document.body.removeChild(link);
+  };
+
   return (
     <Grid container direction="row" justifyContent="center" alignItems="center">
       <Card className={classes.workspaceCard}>
@@ -191,17 +205,15 @@ const MyGlossary = () => {
                 onClick={() => setOpenUploadGlossaryDialog(true)}
               >
                 Upload Glossary
+                <Tooltip title="Download sample CSV">
+                  <IconButton
+                    onClick={(e) => handleSampleDownload(e)}
+                    sx={{ color: "white" }}
+                  >
+                    <InfoOutlinedIcon />
+                  </IconButton>
+                </Tooltip>
               </Button>
-              <input
-                type="file"
-                style={{ display: "none" }}
-                ref={csvUpload}
-                accept=".csv"
-                onChange={(event) => {
-                  uploadGlossary(event.target.files);
-                  event.target.value = null;
-                }}
-              />
             </Grid>
           )}
         </Grid>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		Email Id,Source Text,Target Text,Source Language,Target Language
		[email protected],Python,अजगर,en,hi