fix(upload-form; file-uploads): More UI improvements to file upload w…

assets/js/invenio_app_rdm/overridableRegistry/fields/file_uploader_components/FileUploader.js

@@ -53,6 +53,8 @@ export const FileUploaderComponent = ({
   importButtonText,
   isFileImportInProgress,
   decimalSizeDisplay,
+  helpText,
+  description,
   ...uiProps
 }) => {
   // We extract the working copy of the draft stored as `values` in formik
@@ -195,6 +197,8 @@ export const FileUploaderComponent = ({
       dropzoneParams={dropzoneParams}
       warningMsg={warningMsg}
       setWarningMsg={setWarningMsg}
+      helpText={helpText}
+      description={description}
       {...uiProps}
     >
       <>
@@ -206,6 +210,13 @@ export const FileUploaderComponent = ({
           {label}
         </label>
         <Grid>
+
+          {description && description !== " " && (
+            <div className="helptext label top" id={`${fieldPath}.helptext`}>
+              {i18next.t(description)}
+            </div>
+          )}
+
           <Overridable
             id="ReactInvenioDeposit.FileUploader.ImportButton.container"
             importButtonIcon={importButtonIcon}
@@ -215,6 +226,7 @@ export const FileUploaderComponent = ({
             displayImportBtn={displayImportBtn}
             {...uiProps}
           >
+
             {displayImportBtn && (
               <Grid.Row className="">
                 <Grid.Column width={16}>
@@ -334,7 +346,14 @@ export const FileUploaderComponent = ({
                 </Grid.Column>
               </Grid.Row>
             )}
+
           </Overridable>
+
+          {helpText && helpText !== " " && (
+            <div className="helptext label bottom" id={`${fieldPath}.helptext`}>
+              {i18next.t(helpText)}
+            </div>
+          )}
         </Grid>
         <Overridable
           id="ReactInvenioDeposit.FileUploader.Modal.container"

assets/js/invenio_app_rdm/overridableRegistry/fields/file_uploader_components/FileUploaderArea.js

@@ -19,12 +19,14 @@ import {
   Grid,
   Header,
   Icon,
+  Label,
   Popup,
   Progress,
   Segment,
   Table,
 } from "semantic-ui-react";
 import { humanReadableBytes } from "react-invenio-forms";
+import { supportedExtensions } from "./index";
 
 const FileTableHeader = ({ isDraftRecord }) => (
   <Table.Header>
@@ -68,14 +70,20 @@ const FileTableRow = ({
   const [isCancelling, setIsCancelling] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
   const isDefaultPreview = defaultPreview === file.name;
+  const fileExtension = file.name.split('.').pop().toLowerCase();
+  console.log("file", file);
+  console.log("fileExtension", fileExtension);
+  const isSupportedFile = Object.values(supportedExtensions).some(
+    extensions => extensions.includes(fileExtension)
+  );
 
   // This is a workaround to prevent the pending label from flashing as "failed"
   // when a new row first appears.
   const [showPendingLabel, setShowPendingLabel] = useState(false);
   useEffect(() => {
     const timer = setTimeout(() => {
       setShowPendingLabel(true);
-    }, 1000);
+    }, 3000);
     return () => clearTimeout(timer);
   }, []);
 
@@ -98,15 +106,15 @@ const FileTableRow = ({
 
   return (
     <Table.Row key={file.name}>
-      <Table.Cell data-label={i18next.t("Default preview")} width={2}>
+      <Table.Cell data-label={i18next.t("Default preview")} width={1}>
         {/* TODO: Investigate if react-deposit-forms optimized Checkbox field
                   would be more performant */}
         <Checkbox
           checked={isDefaultPreview}
           onChange={() => setDefaultPreview(isDefaultPreview ? "" : file.name)}
         />
       </Table.Cell>
-      <Table.Cell data-label={i18next.t("Filename")} width={6}>
+      <Table.Cell data-label={i18next.t("Filename")} width={7}>
         <div>
           {file.uploadState.isPending ? (
             file.name
@@ -122,8 +130,8 @@ const FileTableRow = ({
           )}
           <br />
           {file.checksum && (
-            <div className="ui text-muted">
-              <span style={{ fontSize: "10px" }}>{file.checksum}</span>{" "}
+            <div className="ui text-muted mt-5">
+              <small>{file.checksum}</small>{" "}
               <Popup
                 content={i18next.t(
                   "This is the file fingerprint (MD5 checksum), which can be used to verify the file integrity."
@@ -133,6 +141,12 @@ const FileTableRow = ({
               />
             </div>
           )}
+          {!isSupportedFile && (
+            <Popup
+              content={i18next.t("Visitors will be able to download this file and view it with external applications, but will not be able to preview it in KCWorks.")}
+              trigger={(<Label icon="warning sign" size="small" content={<span>{i18next.t("File type not supported for previews.")}</span>}/>)}
+            />
+          )}
         </div>
       </Table.Cell>
       <Table.Cell data-label={i18next.t("Size")} width={2}>

docker/nginx_local/conf.d/default.conf

@@ -110,6 +110,9 @@ server {
     include uwsgi_params;
     uwsgi_buffering off;
     uwsgi_request_buffering off;
+    uwsgi_read_timeout 180s;
+    uwsgi_send_timeout 180s;
+    uwsgi_connect_timeout 180s;
     uwsgi_param Host $host;
     uwsgi_param X-Forwarded-For $proxy_add_x_forwarded_for;
     uwsgi_param X-Forwarded-Proto $scheme;

docker/nginx_production/conf.d/default.conf

@@ -74,7 +74,6 @@ server {
     include uwsgi_params;
     uwsgi_buffering off;
     uwsgi_request_buffering off;
-
     # Max upload size (except for files) is set to 100mb as default.
     client_max_body_size 100m;
   }
@@ -84,7 +83,6 @@ server {
     include uwsgi_params;
     uwsgi_buffering off;
     uwsgi_request_buffering off;
-
     # Max upload size (except for files) is set to 100mb as default.
     client_max_body_size 100m;
   }
@@ -98,9 +96,9 @@ server {
     include uwsgi_params;
     uwsgi_buffering off;
     uwsgi_request_buffering off;
-    uwsgi_read_timeout 900s;
-    uwsgi_send_timeout 900s;
-    uwsgi_connect_timeout 900s;
+    uwsgi_read_timeout 180s;
+    uwsgi_send_timeout 180s;
+    uwsgi_connect_timeout 180s;
 
     # Max upload size for files is set to 50GB (configure as needed).
     client_max_body_size 500G;

docker/uwsgi/uwsgi_rest.ini

@@ -12,9 +12,9 @@ wsgi-disable-file-wrapper = true
 single-interpreter = true
 buffer-size = 65535
 pidfile = /tmp/uwsgi_rest.pid
-socket-timeout = 900
-so-write-timeout = 900
-socket-write-timeout = 900
-so-send-timeout = 900
-socket-send-timeout = 900
-harakiri = 900
+socket-timeout = 180
+so-write-timeout = 180
+socket-write-timeout = 180
+so-send-timeout = 180
+socket-send-timeout = 180
+harakiri = 180

invenio.cfg

@@ -2118,6 +2118,11 @@ INVENIO_MODULAR_DEPOSIT_FORM_COMMON_FIELDS = [
                         "label": "Upload Files",
                         "component": "FilesUploadComponent",
                         "wrapped": True,
+                        "description": (
+                            "Very large files (200MB and larger) should be uploaded "
+                            "one at a time. Multiple smaller files may safely be "
+                            "uploaded at once."
+                        ),
                     },
                     # {
                     #     "section": "metadata_only",