ekm-ui 0.3.74 → 0.3.78

package/src/file-picker/file-picker.tsx

@@ -1,37 +1,36 @@
 // @ts-nocheck
-import { useEffect, useRef, useState, useReducer } from 'react'
-import { Drawer } from '../drawer'
-import { Button } from '../button'
-import { AlertBanner } from '../alert-banner'
-import { Search } from '../search/search'
-import { DragAndDrop } from '../drag-and-drop'
-import { BsFillImageFill } from 'react-icons/bs'
-import { HiOutlineSearch } from 'react-icons/hi'
-import Listing from './file-listing'
-import PropTypes from 'prop-types'
-
-
-const apiUrl = '/admin/api/common/directoryinformation/'
+import PropTypes from "prop-types";
+import { useEffect, useReducer, useRef, useState } from "react";
+import { BsFillImageFill } from "react-icons/bs";
+import { HiOutlineSearch } from "react-icons/hi";
+import { AlertBanner } from "../alert-banner";
+import { Button } from "../button";
+import { DragAndDrop } from "../drag-and-drop";
+import { Drawer } from "../drawer";
+import { Search } from "../search/search";
+import Listing from "./file-listing";
+
+const apiUrl = "/admin/api/common/directoryinformation/";
 const Status = Object.freeze({
-  EMPTY: 'EMPTY',
-  SEARCH_LOADING: 'SEARCH-LOADING',
-  LOADING: 'LOADING',
-  LOADED: 'LOADED',
-  LOADED_NO_DRAG: 'LOADED_NO_DRAG',
-  SEARCH_RESULTS: 'SEARCH-RESULTS',
-  SEARCH_EMPTY: 'SEARCH-EMPTY',
-  UPLOAD_ERROR: 'ERROR',
-  DRAGGING: 'DRAGGING',
-})
+  EMPTY: "EMPTY",
+  SEARCH_LOADING: "SEARCH-LOADING",
+  LOADING: "LOADING",
+  LOADED: "LOADED",
+  LOADED_NO_DRAG: "LOADED_NO_DRAG",
+  SEARCH_RESULTS: "SEARCH-RESULTS",
+  SEARCH_EMPTY: "SEARCH-EMPTY",
+  UPLOAD_ERROR: "ERROR",
+  DRAGGING: "DRAGGING",
+});
 
 const initialState = Object.freeze({
   mode: Status.LOADING,
-  actionBtnTxt: 'I Accept',
-  actionBtnColor: 'success',
-  listSize: 'h-5/6',
-  listBorder: '',
+  actionBtnTxt: "I Accept",
+  actionBtnColor: "success",
+  listSize: "h-5/6",
+  listBorder: "",
   searchDisabled: false,
-})
+});
 
 function FilePickerReducer(state, action) {
   switch (action.type) {
@@ -39,51 +38,51 @@ function FilePickerReducer(state, action) {
       return {
         mode: Status.EMPTY,
         actionBtnTxt: 'Add Image',
-        actionBtnColor: 'blue',
+        actionBtnColor: 'default',
         listSize: 'h-5/6',
         listBorder: '',
         searchDisabled: true,
-      }
+      };
     case Status.LOADING:
-      return initialState
+      return initialState;
     case Status.LOADED:
       return {
         mode: Status.LOADED,
-        actionBtnTxt: 'I Accept',
-        actionBtnColor: 'success',
-        listSize: 'h-[68.666667%]',
-        listBorder: 'border',
+        actionBtnTxt: "I Accept",
+        actionBtnColor: "success",
+        listSize: "h-[68.666667%]",
+        listBorder: "border",
         searchDisabled: false,
-      }
+      };
     case Status.LOADED_NO_DRAG:
       return {
         mode: Status.LOADED_NO_DRAG,
-        actionBtnTxt: 'I Accept',
-        actionBtnColor: 'success',
-        listSize: 'h-[87.666667%]',
-        listBorder: 'border',
+        actionBtnTxt: "I Accept",
+        actionBtnColor: "success",
+        listSize: "h-[87.666667%]",
+        listBorder: "border",
         searchDisabled: false,
-      }
+      };
     case Status.SEARCH_RESULTS:
       return {
         mode: Status.SEARCH_RESULTS,
-        actionBtnTxt: 'I Accept',
-        actionBtnColor: 'success',
-        listSize: 'h-5/6',
-        listBorder: 'border',
+        actionBtnTxt: "I Accept",
+        actionBtnColor: "success",
+        listSize: "h-5/6",
+        listBorder: "border",
         searchDisabled: false,
-      }
+      };
     case Status.SEARCH_EMPTY:
       return {
         mode: Status.SEARCH_EMPTY,
-        actionBtnTxt: 'I Accept',
-        actionBtnColor: 'success',
-        listSize: 'h-5/6',
-        listBorder: '',
+        actionBtnTxt: "I Accept",
+        actionBtnColor: "success",
+        listSize: "h-5/6",
+        listBorder: "",
         searchDisabled: false,
-      }
+      };
     default:
-      throw new Error('Unknown file picker state: ' + action.page ?? '')
+      throw new Error("Unknown file picker state: " + action.page ?? "");
   }
 }
 
@@ -94,199 +93,237 @@ function FilePickerReducer(state, action) {
  * be handled by the parent/calling component
  */
 
-export function FilePicker({ appUrl, uri, show, hideDrag = false, onClose, callback }) {
-  const searchFieldRef = useRef()
-  const [state, dispatch] = useReducer(FilePickerReducer, { mode: Status.LOADING, footerBorder: 'border-t' })
-  const [totalPages, setTotalPages] = useState(0)
-  const currentPageRef = useRef(1)
-  const [dragging, setDragging] = useState(false)
-  const [err, setErr] = useState(false)
-  const listAttributeRef = useRef({ pages: 0, totalEntries: 0 })
-  const [fetchData, setFetchData] = useState(false)
-  const [search, setSearch] = useState(null)
-  const [selected, setSelected] = useState(null)
-  const [files, setFiles] = useState([])
-  const [uploadedImage, setUploadedImage] = useState('none')
+export function FilePicker({
+  appUrl,
+  uri,
+  show,
+  hideDrag = false,
+  onClose,
+  callback,
+}) {
+  const searchFieldRef = useRef();
+  const [state, dispatch] = useReducer(FilePickerReducer, {
+    mode: Status.LOADING,
+    footerBorder: "border-t",
+  });
+  const [totalPages, setTotalPages] = useState(0);
+  const currentPageRef = useRef(1);
+  const [dragging, setDragging] = useState(false);
+  const [err, setErr] = useState(false);
+  const listAttributeRef = useRef({ pages: 0, totalEntries: 0 });
+  const [fetchData, setFetchData] = useState(false);
+  const [search, setSearch] = useState(null);
+  const [selected, setSelected] = useState(null);
+  const [files, setFiles] = useState([]);
+  const [uploadedImage, setUploadedImage] = useState("none");
 
   useEffect(() => {
     // Workaround to ensure the drawer is cleared when it is first opened as its always on the DOM!
     if (show) {
-      dispatch({ type: Status.LOADING })
-      setSelected(null)
-      listAttributeRef.current = { pages: 0, totalEntries: 0 }
-      clearState()
-      getFiles(1)
+      dispatch({ type: Status.LOADING });
+      setSelected(null);
+      listAttributeRef.current = { pages: 0, totalEntries: 0 };
+      clearState();
+      getFiles(1);
     }
-  }, [show])
+  }, [show]);
 
   useEffect(() => {
     if (show) {
-      currentPageRef.current = 1
-      getFiles()
-      setErr(false)
+      currentPageRef.current = 1;
+      getFiles();
+      setErr(false);
     }
-  }, [search])
+  }, [search]);
 
   useEffect(() => {
-    if (selected) setSelected(null)
-    if (err) setErr(false)
-  }, [state.mode])
+    if (selected) setSelected(null);
+    if (err) setErr(false);
+  }, [state.mode]);
 
   const clearState = () => {
-    setFiles([])
-    setUploadedImage('none')
-    setFetchData(false)
-    setSelected(null)
-    setErr(false)
-  }
+    setFiles([]);
+    setUploadedImage("none");
+    setFetchData(false);
+    setSelected(null);
+    setErr(false);
+  };
 
   const getFiles = async (cp = 0) => {
     try {
-      let page = cp === 0 ? currentPageRef.current : cp
-      let searchUri = search?.length > 0 ? `&FileNameIncludesString=${search}` : `&FileNameIncludesString=`
-      const response = await fetch(`${appUrl}${apiUrl}?CurrentPage=${page}&PageSize=10&Uri=${uri}${searchUri}`, {
-        method: 'GET',
-        credentials: 'same-origin',
-        headers: { 'Content-Type': 'application/json' },
-      })
-      const data = await response.json()
-      if (search?.length > 0) dispatch({ type: Status.SEARCH_RESULTS })
+      let page = cp === 0 ? currentPageRef.current : cp;
+      let searchUri =
+        search?.length > 0
+          ? `&FileNameIncludesString=${search}`
+          : `&FileNameIncludesString=`;
+      const response = await fetch(
+        `${appUrl}${apiUrl}?CurrentPage=${page}&PageSize=10&Uri=${uri}${searchUri}`,
+        {
+          method: "GET",
+          credentials: "same-origin",
+          headers: { "Content-Type": "application/json" },
+        }
+      );
+      const data = await response.json();
+      if (search?.length > 0) dispatch({ type: Status.SEARCH_RESULTS });
       if (data.Items.Data.length > 0 && page > 1) {
-        setFiles((files) => [...files, ...data.Items.Data])
+        setFiles((files) => [...files, ...data.Items.Data]);
       } else {
-        setFiles(data.Items.Data)
+        setFiles(data.Items.Data);
       }
 
-      listAttributeRef.current = { pages: data.Items.NumberOfPages, totalEntries: data.Items.Total }
-      setTotalPages(data.Items.NumberOfPages)
+      listAttributeRef.current = {
+        pages: data.Items.NumberOfPages,
+        totalEntries: data.Items.Total,
+      };
+      setTotalPages(data.Items.NumberOfPages);
 
       if (search?.length > 0) {
-        dispatch({ type: data.Items.Data.length > 0 ? Status.SEARCH_RESULTS : Status.SEARCH_EMPTY })
+        dispatch({
+          type:
+            data.Items.Data.length > 0
+              ? Status.SEARCH_RESULTS
+              : Status.SEARCH_EMPTY,
+        });
       } else {
-        const loadedState = hideDrag ? Status.LOADED_NO_DRAG : Status.LOADED
-        dispatch({ type: data.Items.Data.length > 0 ? loadedState : Status.EMPTY })
+        const loadedState = hideDrag ? Status.LOADED_NO_DRAG : Status.LOADED;
+        dispatch({
+          type: data.Items.Data.length > 0 ? loadedState : Status.EMPTY,
+        });
       }
 
-      setUploadedImage('none')
+      setUploadedImage("none");
 
-      setFetchData(false)
-      setDragging(false)
+      setFetchData(false);
+      setDragging(false);
     } catch (error) {
-      dispatch({ type: search?.length === 0 ? Status.SEARCH_EMPTY : Status.EMPTY })
+      dispatch({
+        type: search?.length === 0 ? Status.SEARCH_EMPTY : Status.EMPTY,
+      });
     }
-  }
+  };
 
   const handleDragEnter = (e) => {
-    if (hidedrag) return
+    if (hideDrag) return
     setDragging(true)
     searchFieldRef.current.removeFocus()
     e.preventDefault()
   }
 
   const handleDragLeave = (e) => {
-    if (hidedrag) return
+    if (hideDrag) return
     setDragging(false)
   }
 
   const handleSearchRequest = (searchTerm) => {
-    const text = searchTerm.text ?? ''
-    const s = search ?? ''
-    setSearch(searchTerm.text)
-    if ((s.length > 0 && text.length === 0) || (s.length === 0 && text.length > 0 && state.mode !== Status.LOADING))
-      dispatch({ type: Status.LOADING })
-  }
+    const text = searchTerm.text ?? "";
+    const s = search ?? "";
+    setSearch(searchTerm.text);
+    if (
+      (s.length > 0 && text.length === 0) ||
+      (s.length === 0 && text.length > 0 && state.mode !== Status.LOADING)
+    )
+      dispatch({ type: Status.LOADING });
+  };
 
   const handleDropError = () => {
-    setErr(true)
-    setDragging(false)
-    setUploadedImage('none')
-  }
+    setErr(true);
+    setDragging(false);
+    setUploadedImage("none");
+  };
 
   const handleUseImage = () => {
-    callback(`https://files.ekmcdn.com/${selected.Uri}`)
-    handleClose()
-  }
+    callback(`https://files.ekmcdn.com/${selected.Uri}`);
+    handleClose();
+  };
 
   const handleClose = () => {
-    clearState()
-    onClose()
-  }
+    clearState();
+    onClose();
+  };
 
   const handleFileUpload = async (file) => {
     if (file == null) {
-      setUploadedImage('error')
-      handleDropError()
-      return
+      setUploadedImage("error");
+      handleDropError();
+      return;
     }
 
     try {
+      const newName = sanitiseFilename(file.name)
       const arr = await getAsByteArray(file)
       const payload = {
         Path: `/${uri}/`,
-        Name: file.name,
+        Name: newName,
         Bytes: getBase64(arr),
         ForceOverwriteFile: true,
-      }
+      };
       const res = await fetch(`${appUrl}${apiUrl}`, {
-        method: 'POST',
-        credentials: 'same-origin',
-        headers: { 'Content-Type': 'application/json' },
+        method: "POST",
+        credentials: "same-origin",
+        headers: { "Content-Type": "application/json" },
         body: JSON.stringify(payload),
-      })
+      });
 
       if (res.status === 200) {
-        setUploadedImage('success')
-        setSearch(null)
-        searchFieldRef.current.clear()
+        setUploadedImage("success");
+        setSearch(null);
+        searchFieldRef.current.clear();
         // dispatch({ type: Status.LOADED })
-        setFiles([])
-        setErr(false)
-        getFiles(1)
+        setFiles([]);
+        setErr(false);
+        getFiles(1);
       } else {
-        setUploadedImage('error')
+        setUploadedImage("error");
       }
     } catch (error) {
-      setUploadedImage('error')
+      setUploadedImage("error");
     }
-  }
+  };
 
   const handleListActions = (action) => {
     switch (action.type) {
-      case 'FETCH_DATA':
-        setFetchData(action.payload)
-        if (currentPageRef.current < listAttributeRef.current.pages && !fetchData) {
+      case "FETCH_DATA":
+        setFetchData(action.payload);
+        if (
+          currentPageRef.current < listAttributeRef.current.pages &&
+          !fetchData
+        ) {
           // pass in the current page + 1 to get the next page of data then change state as the state is not updated immediately
-          setFetchData(true)
-          currentPageRef.current = currentPageRef.current + 1
-          getFiles()
+          setFetchData(true);
+          currentPageRef.current = currentPageRef.current + 1;
+          getFiles();
         }
-        break
-      case 'SELECTION':
-        setSelected(action.payload)
-        setErr(false)
-        break
+        break;
+      case "SELECTION":
+        setSelected(action.payload);
+        setErr(false);
+        break;
       default:
-        break
+        break;
     }
-  }
+  };
 
   const calculateListSize = () => {
-    if (!err) return state.listSize
-
-    if (state.mode === Status.LOADED) return 'h-2/4'
-    if (state.mode === Status.SEARCH_RESULTS || state.mode === Status.LOADED_NO_DRAG) {
-      return 'h-2/3'
+    if (!err) return state.listSize;
+
+    if (state.mode === Status.LOADED) return "h-2/4";
+    if (
+      state.mode === Status.SEARCH_RESULTS ||
+      state.mode === Status.LOADED_NO_DRAG
+    ) {
+      return "h-2/3";
     } else {
-      return state.listSize
+      return state.listSize;
     }
-  }
+  };
 
   const renderList = () => {
     switch (state.mode) {
       case Status.EMPTY:
-        return <EmptyPlaceholder />
+        return <EmptyPlaceholder />;
       case Status.LOADING:
-        return <LoadingPlaceholder />
+        return <LoadingPlaceholder />;
       case Status.SEARCH_RESULTS:
       case Status.LOADED:
       case Status.LOADED_NO_DRAG:
@@ -300,65 +337,96 @@ export function FilePicker({ appUrl, uri, show, hideDrag = false, onClose, callb
             pages={totalPages}
             callback={handleListActions}
           />
-        )
+        );
       case Status.SEARCH_EMPTY:
-        return <SearchEmptyPlaceholder />
+        return <SearchEmptyPlaceholder />;
       default:
-        break
+        break;
     }
-  }
+  };
 
   const renderContent = () => (
     <>
-      <Search id="file-search" ref={searchFieldRef} placeholder="Search your images" disabled={state.searchDisabled} callback={handleSearchRequest} />
-      <div className="mt-4 mb-4">
+      <Search
+        id="file-search"
+        ref={searchFieldRef}
+        placeholder="Search your images"
+        disabled={state.searchDisabled}
+        callback={handleSearchRequest}
+      />
+      <div className="mb-4 mt-4">
         {err && (
           <AlertBanner
             type="danger"
             onDismiss={() => {
-              setErr(false)
+              setErr(false);
             }}
           >
             <p className="font-semibold">File could not be uploaded</p>
             <p>There was an error uploading the file. Please try again.</p>
           </AlertBanner>
         )}
-        {state.mode !== Status.SEARCH_RESULTS && state.mode !== Status.SEARCH_EMPTY && !hideDrag && (
-          <div className="h-68">
-            <DragAndDrop uploaded={uploadedImage} callback={handleFileUpload} errorCallback={handleDropError} />
-          </div>
-        )}
-        {(state.mode === Status.SEARCH_RESULTS || state.mode === Status.SEARCH_EMPTY) && search?.length > 0 && (
-          <span className="ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400">{`Showing results for..."${search}"`}</span>
-        )}
+        {state.mode !== Status.SEARCH_RESULTS &&
+          state.mode !== Status.SEARCH_EMPTY &&
+          !hideDrag && (
+            <div className="h-68">
+              <DragAndDrop
+                uploaded={uploadedImage}
+                callback={handleFileUpload}
+                errorCallback={handleDropError}
+              />
+            </div>
+          )}
+        {(state.mode === Status.SEARCH_RESULTS ||
+          state.mode === Status.SEARCH_EMPTY) &&
+          search?.length > 0 && (
+            <span className="ms-1 text-sm font-medium text-gray-500 dark:text-gray-400 md:ms-2">{`Showing results for..."${search}"`}</span>
+          )}
       </div>
 
       {renderList()}
     </>
-  )
+  );
 
   const renderOversizedDropZone = () => (
-    <div className="h-[90.666667%] w-[93.666667%] z-50 absolute">
-      <DragAndDrop uploaded={uploadedImage} exitCallback={handleDragLeave} callback={handleFileUpload} errorCallback={handleDropError} />
+    <div className="absolute z-50 h-[90.666667%] w-[93.666667%]">
+      <DragAndDrop
+        uploaded={uploadedImage}
+        exitCallback={handleDragLeave}
+        callback={handleFileUpload}
+        errorCallback={handleDropError}
+      />
     </div>
-  )
+  );
 
   return (
-    <Drawer show={show} onClose={handleClose} title="File Picker" onHide={() => {}}>
+    <Drawer
+      show={show}
+      onClose={handleClose}
+      title="File Picker"
+      onHide={() => {}}
+    >
       <div className="h-full" onDragEnter={handleDragEnter}>
-        {show && dragging && !hidedrag && renderOversizedDropZone()}
+        {show && dragging && !hideDrag && renderOversizedDropZone()}
         {show && renderContent()}
       </div>
-      <div className={`grid grid-cols-2 grid-flow-col gap-4 bottom-0 mt-0 pt-2 bg-white  dark:border-gray-600`} style={{ marginTop: '-50px' }}>
+      <div
+        className={`bottom-0 mt-0 grid grid-flow-col grid-cols-2 gap-4 bg-white pt-2  dark:border-gray-600`}
+        style={{ marginTop: "-50px" }}
+      >
         <Button color="light" onClick={handleClose}>
           Close
         </Button>
-        <Button color={state.actionBtnColor} onClick={handleUseImage} disabled={selected == null}>
+        <Button
+          color={state.actionBtnColor}
+          onClick={handleUseImage}
+          disabled={selected == null}
+        >
           {state.actionBtnTxt}
         </Button>
       </div>
     </Drawer>
-  )
+  );
 }
 
 FilePicker.propTypes = {
@@ -368,55 +436,67 @@ FilePicker.propTypes = {
   uri: PropTypes.string.isRequired,
   /** Show the drawer */
   show: PropTypes.bool.isRequired,
-  /** Hides the the drag and drop and assosiated functionality */
+  /** Hides the the drag and drop and associated functionality */
   hideDrag: PropTypes.bool,
   /** Callback to close the drawer */
   onClose: PropTypes.func.isRequired,
   /** Callback to return the selected image */
   callback: PropTypes.func.isRequired,
-}
+};
 
-FilePicker.displayName = "FilePicker"
+FilePicker.displayName = "FilePicker";
 
 // HELPER FUNCTIONAL COMPONENTS FOR FILE PICKER
 function EmptyPlaceholder() {
   return (
-    <div className="flex flex-col items-center justify-center mt-5">
+    <div className="mt-5 flex flex-col items-center justify-center">
       <h1>
         <BsFillImageFill className="text-9xl text-gray-700" />
       </h1>
-      <p className="mt-4 font-semibold text-2xl text-gray-900">You Have No Images</p>
-      <p className="mt-4 text-sm text-gray-500">Images will appear here when you upload them</p>
+      <p className="mt-4 text-2xl font-semibold text-gray-900">
+        You Have No Images
+      </p>
+      <p className="mt-4 text-sm text-gray-500">
+        Images will appear here when you upload them
+      </p>
     </div>
-  )
+  );
 }
 
 function LoadingPlaceholder() {
   return (
-    <div className="h-2/3 overflow-y-auto flex items-center justify-center">
+    <div className="flex h-2/3 items-center justify-center overflow-y-auto">
       <div className="flex flex-col items-center justify-center">
         <h1>
           <Spinner />
         </h1>
-        <p className="mt-4 font-semibold text-2xl text-gray-900">Loading Files</p>
-        <p className="mt-4 text-sm text-gray-500">Don't worry, this won't take long...</p>
+        <p className="mt-4 text-2xl font-semibold text-gray-900">
+          Loading Files
+        </p>
+        <p className="mt-4 text-sm text-gray-500">
+          Don't worry, this won't take long...
+        </p>
       </div>
     </div>
-  )
+  );
 }
 
 function SearchEmptyPlaceholder() {
   return (
-    <div className="h-5/6 overflow-y-auto flex items-center justify-center">
+    <div className="flex h-5/6 items-center justify-center overflow-y-auto">
       <div className="flex flex-col items-center justify-center">
         <h1>
           <HiOutlineSearch className="text-9xl text-gray-700" />
         </h1>
-        <p className="mt-4 font-semibold text-2xl text-gray-900">No Files Found</p>
-        <p className="mt-4 text-sm text-gray-500">No files were found matching your search</p>
+        <p className="mt-4 text-2xl font-semibold text-gray-900">
+          No Files Found
+        </p>
+        <p className="mt-4 text-sm text-gray-500">
+          No files were found matching your search
+        </p>
       </div>
     </div>
-  )
+  );
 }
 
 function Spinner() {
@@ -424,7 +504,7 @@ function Spinner() {
     <div role="status">
       <svg
         aria-hidden="true"
-        className="inline w-14 h-14 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600"
+        className="inline h-14 w-14 animate-spin fill-blue-600 text-gray-200 dark:text-gray-600"
         viewBox="0 0 100 101"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -440,22 +520,22 @@ function Spinner() {
       </svg>
       <span className="sr-only">Loading...</span>
     </div>
-  )
+  );
 }
 
 // HELPER FUNCTIONS FOR FILE PICKER
 
 async function getAsByteArray(file) {
-  return new Uint8Array(await readFile(file))
+  return new Uint8Array(await readFile(file));
 }
 
 function readFile(file) {
   return new Promise((resolve, reject) => {
-    const reader = new FileReader()
-    reader.onloadend = (event) => resolve(event.target.result)
-    reader.onerror = (err) => reject(err)
-    reader.readAsArrayBuffer(file)
-  })
+    const reader = new FileReader();
+    reader.onloadend = (event) => resolve(event.target.result);
+    reader.onerror = (err) => reject(err);
+    reader.readAsArrayBuffer(file);
+  });
 }
 
 function getBase64(data) {
@@ -463,6 +543,10 @@ function getBase64(data) {
   return btoa(
     Array.from(data)
       .map((b) => String.fromCharCode(b))
-      .join(''),
-  )
+      .join("")
+  );
+}
+
+function sanitiseFilename(fileName) {
+  return fileName.replace(/[^a-z0-9_\.-]/gi, '_').toLowerCase()
 }