Transmission progress (#771)

GeoNode · Feb 1, 2022 · 4421ae3 · 4421ae3
1 parent 1a58461
commit 4421ae3
Show file tree

Hide file tree

Showing 13 changed files with 115 additions and 34 deletions.
diff --git a/geonode_mapstore_client/client/js/api/geonode/v2/index.js b/geonode_mapstore_client/client/js/api/geonode/v2/index.js
@@ -749,7 +749,8 @@ export const uploadDataset = ({
     auxiliaryFiles,
     ext,
     charset = 'UTF-8',
-    permissions = { users: { AnonymousUser: [] }, groups: {}}
+    permissions = { users: { AnonymousUser: [] }, groups: {} },
+    config
 }) => {
     const formData = new FormData();
     formData.append('base_file', file);
@@ -763,20 +764,21 @@ export const uploadDataset = ({
         .forEach((auxExt) => {
             formData.append(auxExt + '_file', auxiliaryFiles[auxExt]);
         });
-    return axios.post(`${parseDevHostname(endpoints[UPLOADS])}/upload`, formData)
+    return axios.post(`${parseDevHostname(endpoints[UPLOADS])}/upload`, formData, config)
         .then(({ data }) => (data));
 };
 
 export const uploadDocument = ({
     title,
     file,
-    permissions = { users: { AnonymousUser: [] }, groups: {}}
+    permissions = { users: { AnonymousUser: [] }, groups: {} },
+    config
 }) => {
     const formData = new FormData();
     formData.append('title', title);
     formData.append('doc_file', file);
     formData.append('permissions', JSON.stringify(permissions));
-    return axios.post(`/documents/upload?no__redirect=true`, formData)
+    return axios.post(`/documents/upload?no__redirect=true`, formData, config)
         .then(({ data }) => (data));
 };
 

diff --git a/geonode_mapstore_client/client/js/routes/UploadDataset.jsx b/geonode_mapstore_client/client/js/routes/UploadDataset.jsx
@@ -96,6 +96,7 @@ function UploadList({
     const [readyUploads, setReadyUploads] = useState({});
     const [unsupported, setUnsupported] = useState([]);
     const [loading, setLoading] = useState(false);
+    const [uploadContainerProgress, setUploadContainerProgress] = useState({});
 
     function parseUploadFiles(uploadFiles) {
         return Object.keys(uploadFiles)
@@ -170,6 +171,11 @@ function UploadList({
         setUnsupported(unsupportedFiles);
     }
 
+    const datasetUploadProgress = (fileName) => (progress) => {
+        const percentCompleted = Math.floor((progress.loaded * 100) / progress.total);
+        setUploadContainerProgress((prevFiles) => ({ ...prevFiles, [fileName]: percentCompleted }));
+    };
+
     function handleUploadProcess() {
         if (!loading) {
             setLoading(true);
@@ -179,7 +185,10 @@ function UploadList({
                 return uploadDataset({
                     file: readyUpload.files[readyUpload.mainExt],
                     ext: readyUpload.mainExt,
-                    auxiliaryFiles: readyUpload.files
+                    auxiliaryFiles: readyUpload.files,
+                    config: {
+                        onUploadProgress: datasetUploadProgress(baseName)
+                    }
                 })
                     .then((data) => ({ status: 'success', data, baseName }))
                     .catch(({ data: error }) => ({ status: 'error', error, baseName }));
@@ -215,9 +224,10 @@ function UploadList({
             supportedLabels={supportedLabels}
             onRemove={(baseName) => updateWaitingUploads(omit(waitingUploads, baseName))}
             unsupported={unsupported}
-            disabledUpload={Object.keys(waitingUploads).length === 0}
+            disabledUpload={Object.keys(readyUploads).length === 0}
             onUpload={handleUploadProcess}
             loading={loading}
+            progress={uploadContainerProgress}
         >
             {children}
         </UploadContainer>

diff --git a/geonode_mapstore_client/client/js/routes/UploadDocument.jsx b/geonode_mapstore_client/client/js/routes/UploadDocument.jsx
@@ -40,6 +40,7 @@ function UploadList({
     const [waitingUploads, setWaitingUploads] = useState({});
     const [unsupported, setUnsupported] = useState([]);
     const [loading, setLoading] = useState(false);
+    const [uploadContainerProgress, setUploadContainerProgress] = useState({});
 
 
     function updateWaitingUploads(uploadFiles) {
@@ -74,6 +75,11 @@ function UploadList({
         setUnsupported(unsupportedFiles);
     }
 
+    const documentUploadProgress = (fileName) => (progress) => {
+        const percentCompleted = Math.floor((progress.loaded * 100) / progress.total);
+        setUploadContainerProgress((prevFiles) => ({ ...prevFiles, [fileName]: percentCompleted }));
+    };
+
     function handleUploadProcess() {
         if (!loading) {
             setLoading(true);
@@ -84,24 +90,29 @@ function UploadList({
                 const file = readyUpload.files[fileExt[0]];
                 return uploadDocument({
                     title: file?.name,
-                    file
+                    file,
+                    config: {
+                        onUploadProgress: documentUploadProgress(baseName)
+                    }
                 })
                     .then((data) => ({ status: 'SUCCESS', data, file, baseName }))
                     .catch(({ data: error }) => ({ status: 'INVALID', error, file, baseName }));
             }))
                 .then((responses) => {
                     const successfulUploads = responses.filter(({ status }) => status === 'SUCCESS');
+
                     if (successfulUploads.length > 0) {
                         const successfulUploadsNames = successfulUploads.map(({ baseName }) => baseName);
                         updateWaitingUploads(omit(waitingUploads, successfulUploadsNames));
                     }
-                    onChange(responses.map(({ status, file, data }) => ({
+                    onChange(responses.map(({ status, file, data, error }) => ({
                         id: uuidv1(),
                         name: file?.name,
                         progress: 100,
                         state: status,
                         detail_url: data?.url,
-                        create_date: Date.now()
+                        create_date: Date.now(),
+                        error
                     })));
                     setLoading(false);
                 })
@@ -121,6 +132,7 @@ function UploadList({
             disabledUpload={Object.keys(waitingUploads).length === 0}
             onUpload={handleUploadProcess}
             loading={loading}
+            progress={uploadContainerProgress}
         >
             {children}
         </UploadContainer>

diff --git a/geonode_mapstore_client/client/js/routes/upload/PendingUploadCard.jsx b/geonode_mapstore_client/client/js/routes/upload/PendingUploadCard.jsx
@@ -12,12 +12,16 @@ import FaIcon from '@js/components/FaIcon';
 import Button from '@js/components/Button';
 import Badge from '@js/components/Badge';
 import Message from '@mapstore/framework/components/I18N/Message';
+import Spinner from '@js/components/Spinner';
+
 
 function PendingUploadCard({
     missingExt,
     baseName,
     onRemove,
-    filesExt
+    filesExt,
+    loading,
+    progress
 }) {
     return (
         <div className="gn-upload-card">
@@ -35,15 +39,36 @@ function PendingUploadCard({
                     <Message msgId="gnviewer.missingFiles"/>: {missingExt.join(', ')}
                 </div>
             </div>}
-            {<ul>
-                {filesExt.map(ext => {
-                    return (
-                        <li key={ext}>
-                            <Badge>.{ext}</Badge>
-                        </li>
-                    );
-                })}
-            </ul>}
+            <div className="gn-upload-card-bottom">
+                <ul>
+                    {filesExt.map(ext => {
+                        return (
+                            <li key={ext}>
+                                <Badge>.{ext}</Badge>
+                            </li>
+                        );
+                    })}
+                </ul>
+                {loading && progress && <div className="gn-upload-card-progress-read">{progress?.[baseName] ? `${progress?.[baseName]}%` : <Spinner />}</div>}
+            </div>
+            {loading && progress && <div style={{position: 'relative'}}>
+                <div
+                    className="gn-upload-card-progress"
+                    style={{
+                        width: '100%',
+                        height: 2
+                    }}
+                >
+                    <div
+                        style={{
+                            width: `${progress?.[baseName]}%`,
+                            height: 2,
+                            transition: '0.3s all'
+                        }}
+                    >
+                    </div>
+                </div>
+            </div>}
         </div>
     );
 }

diff --git a/geonode_mapstore_client/client/js/routes/upload/UploadCard.jsx b/geonode_mapstore_client/client/js/routes/upload/UploadCard.jsx
@@ -32,8 +32,18 @@ function UploadCard({
     progress,
     createDate,
     resumeUrl,
-    onRemove
+    onRemove,
+    error
 }) {
+    const exceedingSizeError = (err) => {
+        let message = err?.message?.match('File size') || '';
+        let fileExceeds = false;
+        if (message) {
+            fileExceeds = true;
+        }
+        return fileExceeds;
+    };
+
     return (
         <div className="gn-upload-card">
             <div className="gn-upload-card-header">
@@ -80,14 +90,14 @@ function UploadCard({
                         </Button>
                         : null}
                     {state === 'INVALID'
-                        ? <ErrorMessageWithTooltip tooltipId="gnviewer.invalidUploadMessageErrorTooltip"/>
+                        ? exceedingSizeError(error) ? <ErrorMessageWithTooltip tooltipId="gnviewer.fileExceeds" /> : <ErrorMessageWithTooltip tooltipId="gnviewer.invalidUploadMessageErrorTooltip" />
                         : null}
                 </div>
             </div>
             <div
                 className={`gn-upload-card-progress ${state && state.toLowerCase() || ''}`}
                 style={{
-                    width: `100%`,
+                    width: '100%',
                     height: 2
                 }}
             >

diff --git a/geonode_mapstore_client/client/js/routes/upload/UploadContainer.jsx b/geonode_mapstore_client/client/js/routes/upload/UploadContainer.jsx
@@ -11,7 +11,6 @@ import Dropzone from 'react-dropzone';
 import ViewerLayout from '@js/components/ViewerLayout';
 import FaIcon from '@js/components/FaIcon';
 import Button from '@js/components/Button';
-import Spinner from '@js/components/Spinner';
 import Message from '@mapstore/framework/components/I18N/Message';
 import { Alert } from 'react-bootstrap';
 import PendingUploadCard from '@js/routes/upload/PendingUploadCard';
@@ -25,7 +24,8 @@ function UploadContainer({
     unsupported,
     disabledUpload,
     onUpload,
-    loading
+    loading,
+    progress
 }) {
 
     const inputFile = useRef();
@@ -49,7 +49,7 @@ function UploadContainer({
                             </Button>
                         </div>
                         {waitingUploadNames.length > 0 ? (
-                            <ul>
+                            <ul style={{overflowX: 'hidden'}}>
                                 {waitingUploadNames.map((baseName) => {
                                     const { files, missingExt = [] } = waitingUploads[baseName];
                                     const filesExt = Object.keys(files);
@@ -62,6 +62,8 @@ function UploadContainer({
                                                 baseName={baseName}
                                                 onRemove={() => onRemove(baseName)}
                                                 filesExt={filesExt}
+                                                loading={loading}
+                                                progress={progress}
                                             />
                                         </li>
                                     );
@@ -102,15 +104,15 @@ function UploadContainer({
                                     width: '100%',
                                     height: '100%',
                                     display: 'flex',
-                                    alignItems: 'center',
+                                    alignItems: 'flex-end',
                                     justifyContent: 'center',
                                     padding: '1rem',
                                     textAlign: 'center',
                                     backgroundColor: 'rgba(0, 0, 0, 0.2)',
-                                    fontSize: '3rem'
+                                    paddingBottom: '3rem'
                                 }}
                             >
-                                <Spinner />
+                                <Message msgId="gnviewer.transferInProgress"/>
                             </div>
                         )}
                     </div>

diff --git a/geonode_mapstore_client/client/js/routes/upload/UploadListContainer.jsx b/geonode_mapstore_client/client/js/routes/upload/UploadListContainer.jsx
@@ -68,7 +68,8 @@ function UploadListContainer({
                                             create_date: createDate,
                                             detail_url: detailUrl,
                                             resume_url: resumeUrl,
-                                            delete_url: deleteUrl
+                                            delete_url: deleteUrl,
+                                            error
                                         }) => {
                                             return (
                                                 <li
@@ -82,6 +83,7 @@ function UploadListContainer({
                                                         createDate={createDate}
                                                         resumeUrl={resumeUrl}
                                                         onRemove={deleteUrl ? () => onDelete({ id, deleteUrl }) : null}
+                                                        error={error}
                                                     />
                                                 </li>
                                             );

diff --git a/geonode_mapstore_client/client/static/mapstore/translations/data.de-DE.json b/geonode_mapstore_client/client/static/mapstore/translations/data.de-DE.json
@@ -269,7 +269,9 @@
 
             "filterPendingUploadDocument": "Uploads nach Name filtern...",
             "filterNoMatchUploadDocument": "Filter stimmt mit keinem Upload überein",
-            "uploadDocument": "Ein Dokument hochladen"
+            "uploadDocument": "Ein Dokument hochladen",
+            "transferInProgress": "Übertragung läuft",
+            "fileExceeds": "Die Dateigröße überschreitet 100 MB. Bitte versuchen Sie es erneut mit einer kleineren Datei."
         }
     }
 }
diff --git a/geonode_mapstore_client/client/static/mapstore/translations/data.en-US.json b/geonode_mapstore_client/client/static/mapstore/translations/data.en-US.json
@@ -269,7 +269,9 @@
 
             "filterPendingUploadDocument": "Filter uploads by name...",
             "filterNoMatchUploadDocument": "Filter does not match an upload",
-            "uploadDocument": "Upload a document"
+            "uploadDocument": "Upload a document",
+            "transferInProgress": "Transfer in progress",
+            "fileExceeds": "File size size exceeds 100MB. Please try again with a smaller file."
         }
     }
 }
diff --git a/geonode_mapstore_client/client/static/mapstore/translations/data.es-ES.json b/geonode_mapstore_client/client/static/mapstore/translations/data.es-ES.json
@@ -267,7 +267,9 @@
 
             "filterPendingUploadDocument": "Filtrar cargas por nombre...",
             "filterNoMatchUploadDocument": "El filtro no coincide con una carga",
-            "uploadDocument": "Subir un documento"
+            "uploadDocument": "Subir un documento",
+            "transferInProgress": "Transferencia en progreso",
+            "fileExceeds": "El tamaño del archivo supera los 100 MB. Vuelva a intentarlo con un archivo más pequeño."
         }
     }
 }
diff --git a/geonode_mapstore_client/client/static/mapstore/translations/data.fr-FR.json b/geonode_mapstore_client/client/static/mapstore/translations/data.fr-FR.json
@@ -268,7 +268,9 @@
 
             "filterPendingUploadDocument": "Filtrer les téléchargements par nom...",
             "filterNoMatchUploadDocument": "Le filtre ne correspond pas à un téléchargement",
-            "uploadDocument": "Télécharger un document"
+            "uploadDocument": "Télécharger un document",
+            "transferInProgress": "Transfert en cours",
+            "fileExceeds": "La taille du fichier dépasse 100 Mo. Veuillez réessayer avec un fichier plus petit."
         }
     }
 }
diff --git a/geonode_mapstore_client/client/static/mapstore/translations/data.it-IT.json b/geonode_mapstore_client/client/static/mapstore/translations/data.it-IT.json
@@ -270,7 +270,9 @@
 
             "filterPendingUploadDocument": "Filtra i caricamenti per nome...",
             "filterNoMatchUploadDocument": "Il filtro non corrisponde a un caricamento",
-            "uploadDocument": "Carica un documento"
+            "uploadDocument": "Carica un documento",
+            "transferInProgress": "Trasferimento in corso",
+            "fileExceeds": "La dimensione del file supera i 100 MB. Riprova con un file più piccolo."
         }
     }
 }
diff --git a/geonode_mapstore_client/client/themes/geonode/less/_upload.less b/geonode_mapstore_client/client/themes/geonode/less/_upload.less
@@ -159,6 +159,7 @@
         display: flex;
         padding: 0.5rem;
         padding-top: 0;
+        flex-wrap: wrap;
         li + li {
             margin-left: 0.25rem;
         }
@@ -195,3 +196,10 @@
         }
     }
 }
+
+.gn-upload-card-bottom {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-right: 0.5rem;
+}