diff --git a/src/components/form/UploadFileInput.js b/src/components/form/UploadFileInput.js
new file mode 100644
index 00000000..d812f724
--- /dev/null
+++ b/src/components/form/UploadFileInput.js
@@ -0,0 +1,42 @@
+import React, { useCallback } from 'react';
+import styled from 'styled-components';
+
+import { UploadIcon, SuccessIcon } from '..';
+
+const StyledDiv = styled('div')`
+ border: 1px dotted #d9d9d9;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 120px;
+ & label {
+ cursor: pointer;
+ }
+`;
+
+const StyledInput = styled('input')`
+ visibility: hidden;
+ width: 0px;
+ height: 0px;
+`;
+
+const UploadFileInput = ({ file, onChange }) => {
+ const onFileInputChange = useCallback(e => {
+ if (e.target.value && e.target.value !== '') {
+ const file = e.target.files[0];
+ onChange(file);
+ }
+ }, []);
+
+ return (
+
+
+
+
+ );
+};
+
+export { UploadFileInput };
diff --git a/src/components/form/index.js b/src/components/form/index.js
index 6b9c2c52..bec6b0ea 100644
--- a/src/components/form/index.js
+++ b/src/components/form/index.js
@@ -9,3 +9,4 @@ export * from './SimpleSelect';
export * from './FormikError';
export * from './SelectCreatable';
export * from './UploadPngInput';
+export * from './UploadFileInput';
diff --git a/src/components/forms/FileUploadModal.js b/src/components/forms/FileUploadModal.js
new file mode 100644
index 00000000..e7e16604
--- /dev/null
+++ b/src/components/forms/FileUploadModal.js
@@ -0,0 +1,121 @@
+/* eslint-disable */
+import React, { useEffect, useState } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { useSelector, useDispatch } from 'react-redux';
+
+import {
+ Modal,
+ Body,
+ InputSizeEnum,
+ StandardInput,
+ InputVariantEnum,
+ modalTypeEnum,
+ InputContainer,
+ StyledFieldContainer,
+ StyledLabelContainer,
+ ModalFormContainerStyle,
+ UploadFileInput,
+} from '..';
+import { isValidFileName } from '../../utils/stringUtils';
+
+const FileUploadModal = ({ onClose }) => {
+ const intl = useIntl();
+ const dispatch = useDispatch();
+ const { notification } = useSelector(state => state.app);
+ const [formData, setFormData] = useState({
+ fileName: '',
+ file: null,
+ });
+
+ const fileNameIsValid = isValidFileName(formData.fileName);
+ const fileIsValid = formData?.file != null;
+
+ const onSubmit = async () => {
+ if (fileNameIsValid && fileIsValid) {
+ // TO DO IMPLEMENT STORE ACTION
+ // dispatch(editExistingOrg(formData));
+ }
+ };
+
+ const orgWasSuccessfullyCreated =
+ notification && notification.id === 'file-uploaded';
+ useEffect(() => {
+ if (orgWasSuccessfullyCreated) {
+ onClose();
+ }
+ }, [notification]);
+
+ return (
+ <>
+
+
+
+
+ *
+
+
+
+
+ setFormData(prevState => ({
+ ...prevState,
+ fileName: value,
+ }))
+ }
+ />
+
+ {!fileNameIsValid && (
+
+ {intl.formatMessage({
+ id: 'add-valid-filename',
+ })}
+
+ )}
+
+
+
+
+ *
+
+
+
+
+ setFormData(prevState => ({
+ ...prevState,
+ file: file,
+ }))
+ }
+ file={formData.file}
+ />
+
+ {!fileNameIsValid && (
+
+ {intl.formatMessage({
+ id: 'add-valid-file',
+ })}
+
+ )}
+
+
+ }
+ />
+
+ );
+};
+
+export { FileUploadModal };
diff --git a/src/components/forms/index.js b/src/components/forms/index.js
index 001d3e4d..0a79a7d7 100644
--- a/src/components/forms/index.js
+++ b/src/components/forms/index.js
@@ -22,3 +22,4 @@ export * from './FormikRepeater';
export * from './UnitEditStagingModal';
export * from './UnitSplitEditStagingFormModal';
export * from './OrgEditFormModal';
+export * from './FileUploadModal';
diff --git a/src/pages/Files/index.js b/src/pages/Files/index.js
index c9123f11..2a34abf2 100644
--- a/src/pages/Files/index.js
+++ b/src/pages/Files/index.js
@@ -12,6 +12,7 @@ import {
H3,
DownloadIcon,
UploadIcon,
+ FileUploadModal,
} from '../../components';
import { getFileList } from '../../store/actions/climateWarehouseActions';
@@ -97,6 +98,8 @@ const Files = () => {
const { fileList } = useSelector(store => store.climateWarehouse);
const [filteredFileList, setFilteredFileList] = useState(fileList ?? []);
const [sortOrder, setSortOrder] = useState(SortEnum.aToZ);
+ const [shaToDownload, setShaToDownload] = useState(null);
+ const [isUploadModalVisible, setIsUploadModalVisible] = useState(false);
useEffect(() => dispatch(getFileList()), []);
useEffect(() => setFilteredFileList(fileList), [fileList]);
@@ -143,6 +146,19 @@ const Files = () => {
});
}, [setSortOrder, filteredFileList]);
+ useEffect(() => {
+ if (shaToDownload) {
+ //TO DO IMPLEMENT FILE DOWNLOAD HERE
+ console.log(shaToDownload);
+ }
+ setShaToDownload(null);
+ }, [shaToDownload]);
+
+ const toggleUploadModal = useCallback(
+ () => setIsUploadModalVisible(prev => !prev),
+ [setIsUploadModalVisible],
+ );
+
if (!fileList) {
return null;
}
@@ -174,7 +190,7 @@ const Files = () => {
)}
-
+
{filteredFileList?.length === 0 && (
@@ -204,9 +220,7 @@ const Files = () => {
{
- console.log('click');
- }}
+ onClick={() => setShaToDownload(file.SHA256)}
>
@@ -223,6 +237,7 @@ const Files = () => {
)}
+ {isUploadModalVisible && }
);
};
diff --git a/src/translations/tokens/en-US.json b/src/translations/tokens/en-US.json
index d5f45a6d..c2791761 100644
--- a/src/translations/tokens/en-US.json
+++ b/src/translations/tokens/en-US.json
@@ -426,10 +426,16 @@
"filter-by-filename": "Filter by filename",
"filename": "Filename",
"upload": "Upload",
- "browse": "Browser",
+ "browse": "Browse",
"submit": "Submit",
"no-files-found": "No files have been found",
"could-not-retrieve-file-list": "The file list could not be retrieved.",
"sort-a-to-z": "Sort A to Z",
- "sort-z-to-a": "Sort Z to A"
+ "sort-z-to-a": "Sort Z to A",
+ "file": "File",
+ "file-upload": "File upload",
+ "file-uploaded": "Your file was uploaded successfully.",
+ "file-not-uploaded": "Your file could not be uploaded.",
+ "add-valid-filename": "Add a valid filename",
+ "add-valid-file": "Add a valid file"
}
diff --git a/src/utils/stringUtils.js b/src/utils/stringUtils.js
index 4607928c..a6848dc3 100644
--- a/src/utils/stringUtils.js
+++ b/src/utils/stringUtils.js
@@ -23,3 +23,8 @@ export const formatValidationError = error => {
return errorStringArray.join(' ');
};
+
+export const isValidFileName = fileName => {
+ const expression = /^[0-9a-zA-Z_-]+$/;
+ return expression.test(fileName);
+};