From d5af00a80f04e55998ea1cba7b395120e2db05f5 Mon Sep 17 00:00:00 2001
From: Spencer Rose <spencerrose@uvic.ca>
Date: Fri, 3 Nov 2023 13:10:38 -0700
Subject: [PATCH 1/3] Download tools update, selective downloads and fixes to
 API download endpoints.

---
 client/src/_components/common/download.js     |   5 +-
 client/src/_components/common/icon.js         |   9 +-
 client/src/_components/common/table.js        |   5 +-
 .../src/_components/content/explorer.help.js  |  18 +-
 .../_components/{common => content}/footer.js |   2 +-
 .../src/_components/content/toolkit.help.js   |  36 +-
 client/src/_components/menus/editor.menu.js   |  36 +-
 client/src/_components/menus/header.menu.js   |   2 +-
 client/src/_components/menus/main.menu.js     |   8 +-
 .../src/_components/menus/navigator.menu.js   | 122 +++++++
 client/src/_components/menus/viewer.menu.js   | 117 ++----
 .../_components/navigator/search.navigator.js |  24 +-
 .../_components/selectors/dialog.selector.js  |   8 +
 .../_components/selectors/file.selector.js    |  40 +-
 .../_components/styles/download.module.css    |  18 +
 client/src/_components/styles/menu.module.css |   5 +
 .../toolkit/canvas/default.canvas.toolkit.js  |   2 +-
 .../src/_components/toolkit/menu.toolkit.js   |   4 +-
 .../toolkit/panel/controller.panel.toolkit.js |  16 +-
 .../toolkit/panel/info.panel.toolkit.js       |   4 +-
 client/src/_components/toolkit/toolkit.js     |   2 +-
 .../toolkit/tools/comparator.toolkit.js       |   4 +-
 .../toolkit/tools/loader.toolkit.js           |   4 +-
 .../toolkit/utils/align.utils.toolkit.js      |   4 +-
 .../toolkit/utils/loader.utils.toolkit.js     |   2 +-
 .../toolkit/utils/tiff.utils.toolkit.js       |   2 +-
 .../src/_components/tools/download.tools.js   | 341 +++++++++++-------
 client/src/_components/views/admin.view.js    |   1 -
 client/src/_components/views/capture.view.js  |   2 +-
 client/src/_components/views/editor.view.js   |   2 +-
 client/src/_components/views/files.view.js    |  14 +-
 client/src/_components/views/help.view.js     |   2 +-
 client/src/_components/views/visitor.view.js  |   2 +-
 client/src/_providers/nav.provider.client.js  |  50 ++-
 .../src/_services/session.services.client.js  |  78 +++-
 client/src/_utils/data.utils.client.js        |   1 +
 client/src/index.css                          |   4 +-
 client/src/schema.js                          |   2 +-
 queue/app.js                                  |   2 +-
 queue/images.services.js                      |   2 +-
 src/controllers/files.controller.js           | 158 ++------
 src/lib/file.utils.js                         |   3 +-
 src/queries/files.queries.js                  |  11 +-
 src/routes/files.routes.js                    |   4 +-
 src/services/files.services.js                | 177 +++++++--
 45 files changed, 867 insertions(+), 488 deletions(-)
 rename client/src/_components/{common => content}/footer.js (96%)
 create mode 100644 client/src/_components/menus/navigator.menu.js
 create mode 100644 client/src/_components/styles/download.module.css
 create mode 100644 client/src/_components/styles/menu.module.css

diff --git a/client/src/_components/common/download.js b/client/src/_components/common/download.js
index bcb97f2..548492d 100644
--- a/client/src/_components/common/download.js
+++ b/client/src/_components/common/download.js
@@ -107,6 +107,7 @@ const Download = ({
                 router.online,
                 save
             ).catch(_handleError);
+            callback();
         }
         catch (err) {
             _handleError(err)
@@ -130,9 +131,7 @@ const Download = ({
             title={
                 message && message.hasOwnProperty('msg')
                     ? message.msg
-                    : `Download ${route.indexOf('raw') > 0 
-                        ? 'Original (Raw) Version:' 
-                        : 'Scaled Version:'} ${filename || `file_${id}.${format}`}.`
+                    : `Download ${filename || `file_${id}.${format}`}.`
             }
             onClick={_handleDownload}>
         </Button>
diff --git a/client/src/_components/common/icon.js b/client/src/_components/common/icon.js
index 74b6351..1c04372 100644
--- a/client/src/_components/common/icon.js
+++ b/client/src/_components/common/icon.js
@@ -10,6 +10,7 @@ import React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import {
+    faPaperclip,
     faLocationArrow,
     faChartBar,
     faGripVertical,
@@ -234,6 +235,7 @@ library.add(
     faExclamationTriangle,
     faArrowAltCircleRight,
     faLock,
+    faPaperclip
 );
 
 
@@ -275,9 +277,10 @@ const getIconClass = (iconType) => {
         delete: 'trash-alt',
         import: 'file-import',
         export: 'file-export',
+        attach: 'paperclip',
         scroll: 'location-arrow',
         externalLink: 'external-link-square-alt',
-        align: 'images',
+        align: 'crosshairs',
         overlay: 'columns',
         filter: 'filter',
         filterNavigation: 'filter',
@@ -324,7 +327,7 @@ const getIconClass = (iconType) => {
         vopen: 'chevron-circle-down',
         vclose: 'chevron-circle-right',
         upload: 'upload',
-        download: 'download',
+        download: 'file-download',
         bulk_download: 'download',
         image: 'image',
         images: 'images',
@@ -353,7 +356,7 @@ const getIconClass = (iconType) => {
         photographers: 'users',
         field_notes_authors: 'users',
         comparisons: 'images',
-        iat: 'images',
+        iat: 'crosshairs',
         jpg: 'file-image',
         jpeg: 'file-image',
         png: 'file-image',
diff --git a/client/src/_components/common/table.js b/client/src/_components/common/table.js
index de93896..e704de0 100644
--- a/client/src/_components/common/table.js
+++ b/client/src/_components/common/table.js
@@ -46,17 +46,18 @@ const TableHeader = ({ tableID, cols }) => {
  */
 
 const TableBody = ({tableID, rows, cols}) => {
+    const noop = ()=>{};
     return <tbody>{
             rows.map((row, index) => {
                 return (
-                    <tr key={`${tableID}_row_${index}`}>
+                    <tr key={`${tableID}_row_${index}`} onClick={row.onClick || noop}>
                         {
                             cols
                                 .filter(col => row.hasOwnProperty(col.name))
                                 .map(col =>
                                     <td
                                         key={`td_${index}_${col.name}`}
-                                        className={col.className}>
+                                        className={row.className}>
                                         {row[col.name]}
                                     </td>
                                 )
diff --git a/client/src/_components/content/explorer.help.js b/client/src/_components/content/explorer.help.js
index 42a6d66..024c1c0 100644
--- a/client/src/_components/content/explorer.help.js
+++ b/client/src/_components/content/explorer.help.js
@@ -63,8 +63,7 @@ const explorerHelp = (gotoPage) => {
         </p>
         <h5>About this Guide</h5>
         <p>
-            This guide covers usage of features available in both the Explorer, and the Image Alignment Tool
-            image alignment tool, as well as documentation for the MLE Editor management tool. Click on the
+            This guide covers usage of features available in both the Explorer, and the Alignment Tool as well as documentation for the MLE Editor management tool. Click on the
             tabs at the top to switch between tools, and the tabs to the left for tool topics.
         </p>
     </>;
@@ -83,7 +82,7 @@ const explorerHelp = (gotoPage) => {
         <p>The viewer is where <Button icon={'help'} label={'Capture Images'} onClick={() => {gotoPage(0, 2)}} />
             and <Button icon={'help'} label={'Metadata'} onClick={() => {gotoPage(0, 1)}} /> are
             loaded for an indepth look at things. For example, navigate to surveyor
-            <a href={"http://localhost:3000/surveyors/show/5"} target={'_blank'}>Morrison Parsons Bridgland</a> to see
+            <a href={"http://localhost:3000/surveyors/show/5"} target={'_blank'} rel={"noreferrer"}>Morrison Parsons Bridgland</a> to see
             an extensive list of surveys undertaken in the last century. Each survey in the list can be expanded to
             show metadata for that item, as well as any attached dependent items -- in this case, survey seasons.
             You can also click on the item label to go to open the page for that item.</p>
@@ -172,7 +171,7 @@ const explorerHelp = (gotoPage) => {
                 <td>
                     <p>
                         A project is a container for Stations that do not fit into the surveyor model listed below.
-                        The <a href={'https://explore.mountainlegacy.ca/projects/show/1'} target={'_blank'}>Alberta
+                        The <a href={'https://explore.mountainlegacy.ca/projects/show/1'} target={'_blank'} rel={"noreferrer"}>Alberta
                             Fire Lookout Towers</a> project, for example, is organized by lookout tower, rather than
                         survey, where each tower listing contain a set of historic photographs that have been repeated.
                     </p>
@@ -504,6 +503,13 @@ const explorerHelp = (gotoPage) => {
 
         <table className={'help'}>
             <tbody>
+            <tr>
+                <th><Icon type={'download'} /></th>
+                <th className={'active'}>Download Package</th>
+                <td>
+                    <p>Download images selected as 'attached' files.</p>
+                </td>
+            </tr>
             <tr>
                 <th><Icon type={'sync'} /></th>
                 <th>Refresh</th>
@@ -513,9 +519,9 @@ const explorerHelp = (gotoPage) => {
             </tr>
             <tr>
                 <th><Icon type={'iat'} /></th>
-                <th>Image Alignment Tool</th>
+                <th>Alignment Tool</th>
                 <td>
-                    <p>Navigate to the <Button icon={'iat'} label={'Image Alignment Tools'} onClick={() => {gotoPage(2, 0)}} /></p>
+                    <p>Navigate to the <Button icon={'iat'} label={'Alignment Tool'} onClick={() => {gotoPage(2, 0)}} /></p>
                 </td>
             </tr>
             <tr>
diff --git a/client/src/_components/common/footer.js b/client/src/_components/content/footer.js
similarity index 96%
rename from client/src/_components/common/footer.js
rename to client/src/_components/content/footer.js
index 3d899df..84999d3 100644
--- a/client/src/_components/common/footer.js
+++ b/client/src/_components/content/footer.js
@@ -8,7 +8,7 @@
 
 import React from 'react';
 import {getInfo} from "../../_services/schema.services.client";
-import {MLPLogo} from "./logo";
+import {MLPLogo} from "../common/logo";
 
 /**
  * Render .page footer
diff --git a/client/src/_components/content/toolkit.help.js b/client/src/_components/content/toolkit.help.js
index dc69847..a95b515 100644
--- a/client/src/_components/content/toolkit.help.js
+++ b/client/src/_components/content/toolkit.help.js
@@ -20,7 +20,7 @@ import Icon from '../common/icon';
 import Button from '../common/button';
 
 /**
- * Image Alignment Tool tooltip selector
+ * Alignment Tool tooltip selector
  *
  * @public
  */
@@ -30,14 +30,14 @@ export const getTooltip = (key) => {
 }
 
 /**
- * Image Alignment Tool instructions
+ * Alignment Tool instructions
  *
  * @public
  */
 
 const tooltips = {
     loadMLPImage: <div>
-        <p>To load an image from the MLP Library to the Image Alignment Tool:</p>
+        <p>To load an image from the MLP Library to the Alignment Tool:</p>
         <ol className={'list'}>
             <li>Locate the capture image in the navigator tree</li>
             <li>Click the <Icon type={'iat'}/> icon to open the Toolkit loader dialog</li>
@@ -47,7 +47,7 @@ const tooltips = {
         </ol>
     </div>,
     loadLocalImage: <div>
-        <div>To load an image from a local directory to the Image Alignment Tool:</div>
+        <div>To load an image from a local directory to the Alignment Tool:</div>
         <ol className={'list'}>
             <li>Click the <Icon type={'load'} /> open file button in the panel controls, or
                 click 'Click to load' button on the centre of the panel.
@@ -58,7 +58,7 @@ const tooltips = {
         </ol>
     </div>,
     uploadMLPImage: <div>
-        <p>To upload an image to the MLP Library from the Image Alignment Tool:</p>
+        <p>To upload an image to the MLP Library from the Alignment Tool:</p>
         <ol className={'list'}>
             <li>Locate the capture image in the navigator tree</li>
             <li>Click the <Icon type={'iat'}/> icon to open the Toolkit Loader tool</li>
@@ -102,7 +102,7 @@ const tooltips = {
         </ol>
     </div>,
     alignImages: <div>
-        <p>To align and master two images in the Image Alignment Tool:</p>
+        <p>To align and master two images in the Alignment Tool:</p>
         <ol className={'list'}>
             <li>Load images into the left and right panels</li>
             <li>Correct differences in image size by resizing an image such that the largest height/width
@@ -127,7 +127,7 @@ const tooltips = {
             <li>Once four control point pairs have been selected, from the panel of the 'target' image to be transformed,
                 click the green "Align" button on the Align tool. The image will be transformed
                 using perspective transformation
-                (See <a target={'_blank'} href={'https://docs.opencv.org/4.x/da/d54/group__imgproc__transform.html'}>OpenCV documentation</a>).
+                (See <a target={'_blank'} rel={"noreferrer"} href={'https://docs.opencv.org/4.x/da/d54/group__imgproc__transform.html'}>OpenCV documentation</a>).
             </li>
             <li>To validate the alignment, click the <Icon type={'images'} /> <b>Compare</b> button in the centre menu to
                 load the images into the <b>Compare Tool</b>. The images will appear superimposed. Use the opacity slider to compare
@@ -140,7 +140,7 @@ const tooltips = {
 }
 
 /**
- * Image Alignment Tool "Getting Started" help page.
+ * Alignment Tool "Getting Started" help page.
  *
  * @public
  */
@@ -149,9 +149,9 @@ const toolkitHelp = (gotoPage) => {
 
 
     const gettingStarted = <>
-        <h4>Image Alignment Tool: Getting Started</h4>
+        <h4>Alignment Tool: Getting Started</h4>
         <p>
-            The Image Alignment Tool is a basic image viewer, editor and alignment tool that allows you to work directly
+            The Alignment Tool is a basic image viewer, editor and alignment tool that allows you to work directly
             with the images from the Mountain Legacy collection, or with other images loaded from your computer.
         </p>
 
@@ -163,7 +163,7 @@ const toolkitHelp = (gotoPage) => {
         </ol>
 
         <h5>Image Panels</h5>
-        <p>Image Alignment Tool has left and right image panels each with a canvas where the image is displayed, and a
+        <p>Alignment Tool has left and right image panels each with a canvas where the image is displayed, and a
             control menu with different image operations. Panels have multiple canvases
             or layers that allow you to view and interact with images:
         </p>
@@ -206,7 +206,7 @@ const toolkitHelp = (gotoPage) => {
     </>;
 
     /**
-     * Image Alignment Tool "Basic Features" help page.
+     * Alignment Tool "Basic Features" help page.
      *
      * @public
      */
@@ -235,7 +235,7 @@ const toolkitHelp = (gotoPage) => {
 
 
     /**
-     * Image Alignment Tool "Panel Info" help page.
+     * Alignment Tool "Panel Info" help page.
      *
      * @public
      */
@@ -345,7 +345,7 @@ const toolkitHelp = (gotoPage) => {
 
 
     /**
-     * Image Alignment Tool "Panel Controls" help page.
+     * Alignment Tool "Panel Controls" help page.
      *
      * @public
      */
@@ -449,13 +449,13 @@ const toolkitHelp = (gotoPage) => {
     </>
 
     /**
-     * Image Alignment Tool "Modes" help page.
+     * Alignment Tool "Modes" help page.
      *
      * @public
      */
 
     const toolkitModes = <>
-        <h4>Image Alignment Tool Modes</h4>
+        <h4>Alignment Tool Modes</h4>
         <p>Toolkit operations are available in four modes:</p>
 
         <table className={'help'}>
@@ -501,7 +501,7 @@ const toolkitHelp = (gotoPage) => {
     </>
 
     /**
-     * Image Alignment Tool "Image Alignment" help page.
+     * Alignment Tool "Image Alignment" help page.
      *
      * @public
      */
@@ -521,7 +521,7 @@ const toolkitHelp = (gotoPage) => {
             changes over time.
         </p>
         <p>
-            Images can be aligned and mastered in the Image Alignment Tool using the 'Control Point' tool to select coordinates for
+            Images can be aligned and mastered in the Alignment Tool using the 'Control Point' tool to select coordinates for
             four matching features found in both images. These four paired features are marked in the images as
             'control points' (coordinates on the image) that are used to estimate the transformation parameters
             used to align the images.
diff --git a/client/src/_components/menus/editor.menu.js b/client/src/_components/menus/editor.menu.js
index f76dca5..0abde11 100644
--- a/client/src/_components/menus/editor.menu.js
+++ b/client/src/_components/menus/editor.menu.js
@@ -13,6 +13,7 @@
  * ---------
  * Revisions
  * - 22-07-2023 Include core node data as parameter.
+ * - 21-10-2023 Add option to attach capture image for selective download
  */
 
 import React from 'react';
@@ -24,6 +25,8 @@ import {genID} from "../../_utils/data.utils.client";
 import {createNodeRoute, redirect} from "../../_utils/paths.utils.client";
 import Download from "../common/download";
 import {useDialog} from "../../_providers/dialog.provider.client";
+import {useNav} from "../../_providers/nav.provider.client";
+import styles from '../styles/menu.module.css';
 
 /**
  * [Inline and Standalone] General node menu component for selecting view/edit options.
@@ -59,13 +62,16 @@ const EditorMenu = ({
                                attached={},
                                files={},
                                size= 'lg',
-                               visible=['show', 'edit', 'remove', 'new'],
+                               visible=['show', 'edit', 'remove', 'new', 'attach', 'download'],
                                callback=()=>{},
                                className=''
                            }) => {
     // dialog provider
     const dialog = useDialog();
 
+    // nav provider
+    const nav = useNav();
+
     // get user role
     const user = useUser();
     const {isAdmin=false, isEditor=false} = user || {};
@@ -125,6 +131,8 @@ const EditorMenu = ({
         ])
         .filter(item => !!item);
 
+    if (String(id) === '81234') console.log('>>>', id, metadata, visible)
+
     return <div className={`h-menu ${className}`}>
         <ul>
             {
@@ -158,17 +166,31 @@ const EditorMenu = ({
                 ( ( id && isCaptureType(model) ) || visible.includes('iat')) &&
                 <li key={`${menuID}_node_menuitem_iat`}>
                     <Button
-                        label={compact ? '' : 'Align Image'}
+                        label={!compact && 'Align Tool'}
                         size={size}
                         icon={'iat'}
-                        title={`Use Image Aligner dialog.`}
+                        title={`Open capture image in Alignment Tool.`}
                         onClick={() => { _handleDialog('iat') }}
                     />
                 </li>
             }
+            {
+                ( id && isImageType(model) && visible.includes('attach') ) &&
+                <li key={`${menuID}_menuitem_attach`}>
+                    <Button
+                        icon={'attach'}
+                        label={!compact && 'Attach'}
+                        title={`Attach image to selected downloads.`}
+                        className={(nav.downloads || []).includes(id) ? styles.active : ''}
+                        onClick={() => {
+                            nav.addDownload(id);
+                        }}
+                    />
+                </li>
+            }
             {
                 // Download bulk images for station
-                isEditor && id && model === 'stations' &&
+                id && model === 'stations' &&  visible.includes('download') &&
                 <li key={`${menuID}_node_menuitem_download_bulk`}>
                     <Button
                         label={compact ? '' : 'Bulk Download'}
@@ -211,7 +233,7 @@ const EditorMenu = ({
             }
             {
                 // Download raw media file
-                isEditor && id && (isImageType(model) || visible.includes('download')) &&
+                isEditor && id && isImageType(model) && visible.includes('download') &&
                 <li key={`${menuID}_node_menuitem_download_raw_file`}>
                     <Download
                         label={compact ? '' : 'Download'}
@@ -225,14 +247,14 @@ const EditorMenu = ({
             }
             {
                 // Download public media file
-                !isEditor && id && (isImageType(model) || visible.includes('download')) &&
+                !isEditor && id && isImageType(model) && visible.includes('download') &&
                 <li key={`${menuID}_node_menuitem_download_file`}>
                     <Download
                         label={compact ? '' : 'Download'}
                         size={size}
                         filename={`${filename}.zip`}
                         format={'zip'}
-                        route={`/files/download/bulk/${id}`}
+                        route={`/files/download/bulk?${model}=${id}`}
                         callback={callback}
                     />
                 </li>
diff --git a/client/src/_components/menus/header.menu.js b/client/src/_components/menus/header.menu.js
index 7065ac4..a2db157 100644
--- a/client/src/_components/menus/header.menu.js
+++ b/client/src/_components/menus/header.menu.js
@@ -1,7 +1,7 @@
 /*!
  * MLE.Client.Components.Menus.Header
  * File: header.menu.js
- * Copyright(c) 2022 Runtime Software Development Inc.
+ * Copyright(c) 2023 Runtime Software Development Inc.
  * Version 2.0
  * MIT Licensed
  */
diff --git a/client/src/_components/menus/main.menu.js b/client/src/_components/menus/main.menu.js
index 57915fc..9999c2a 100644
--- a/client/src/_components/menus/main.menu.js
+++ b/client/src/_components/menus/main.menu.js
@@ -1,7 +1,7 @@
 /*!
  * MLE.Client.Components.Menus.Main
  * File: main.menu.js
- * Copyright(c) 2022 Runtime Software Development Inc.
+ * Copyright(c) 2023 Runtime Software Development Inc.
  * Version 2.0
  * MIT Licensed
  */
@@ -16,9 +16,9 @@ const MenuItems = () => {
     const rootURL = getRoot();
     return <ul>
         <li><a href={rootURL}>Dashboard</a></li>
-        <li><a rel={"noreferrer"} target={'_blank'} href={getInfo().mlp_url}>MLP Website</a></li>
-        <li><a href={'/toolkit'}>Image Alignment Tool</a></li>
-        <li><a href={"mailto:mntnlgcy@uvic.ca"}>Contact</a></li>
+        <li><a rel={"noreferrer"} target={'_blank'} href={getInfo().mlp_url} title={'Navigate to main MLP website'}>MLP Website</a></li>
+        <li><a href={'/toolkit'} title={'Open Alignment Tool'}>Alignment Tool</a></li>
+        <li><a href={"mailto:mntnlgcy@uvic.ca"} title={'Open email client'}>Contact</a></li>
     </ul>
 }
 
diff --git a/client/src/_components/menus/navigator.menu.js b/client/src/_components/menus/navigator.menu.js
new file mode 100644
index 0000000..a29de5e
--- /dev/null
+++ b/client/src/_components/menus/navigator.menu.js
@@ -0,0 +1,122 @@
+/*!
+ * MLE.Client.Components.Menus.Navigator
+ * File: navigator.menu.js
+ * Copyright(c) 2023 Runtime Software Development Inc.
+ * Version 2.0
+ * MIT Licensed
+ *
+ * Description
+ *
+ * The Navigator Menu is used to manage navigation and dialog-related functionality of the Navigator component.
+ * - The setMode function is defined within the component. This function takes a navView parameter, which
+ *   represents the desired navigation mode (e.g., 'tree', 'map', 'search'). When this function is called,
+ *   it performs the following actions:
+ *      - It toggles the visibility of the navigator (presumably a navigation panel or sidebar).
+ *      - It sets the navigation mode (e.g., 'tree', 'map') using the nav.setMode function.
+ *      - It sets a resize flag to indicate a change in the navigator's size.
+ *      - It appears to update some internal state with setNavView.
+ *
+ * Inside the component's return statement:
+ * - A div element with the class name viewer-menu is rendered.
+ * - Within this div, there is another div element with the class name h-menu.
+ * - Inside the inner div, there is an unordered list (ul) containing a list of navigation-related items.
+ * - Each list item (li) contains a Button component that represents a navigation option. These buttons
+ *   have various icons, labels, and tooltips. Each button has an onClick handler that calls specific
+ *   functions when clicked. These functions include:
+ * - Toggling the visibility of the navigator (icon: 'hopenleft' or 'hcloseleft').
+ * - Changing the navigation mode to 'tree', 'map', 'search', etc.
+ * - Opening a dialog box related to filtering or searching.
+ *
+ */
+
+
+/**
+ * Navigator menu component.
+ *
+ * View options for the navigator component.
+ *
+ * @public
+ * @return {JSX.Element}
+ */
+import {useNav} from "../../_providers/nav.provider.client";
+import {useDialog} from "../../_providers/dialog.provider.client";
+import {setNavView, setPref} from "../../_services/session.services.client";
+import Button from "../common/button";
+import React from "react";
+
+export const NavigatorMenu = () => {
+
+    const nav = useNav();
+    const dialog = useDialog();
+
+    // Sets the current navigation mode (tree/map/search/etc.)
+    // - set in state and user session storage
+    const setMode = (navView) => {
+        // toggle navigator visibility
+        nav.setToggle(true);
+        // set navigator view
+        nav.setMode(navView);
+        nav.setResize(true);
+        setNavView(navView);
+    }
+
+    return (
+        <>
+            <div className={'viewer-menu'}>
+                <div className={'h-menu'}>
+                    <ul>
+                        <li>
+                            <Button
+                                className={'nav-toggle'}
+                                disabled={nav.mode === 'iat'}
+                                icon={nav.toggle ? 'hopenleft' : 'hcloseleft'}
+                                title={nav.toggle ? 'Minimize navigator.' : 'Maximize navigator'}
+                                onClick={() => {
+                                    setPref('navToggle', !nav.toggle);
+                                    nav.setToggle(!nav.toggle);
+                                    nav.setResize(true);
+                                }}
+                            />
+                        </li>
+                        <li>
+                            <Button
+                                icon={'tree'}
+                                label={!nav.compact && 'List'}
+                                title={`View navigation tree.`}
+                                onClick={() => {
+                                    setMode('tree')
+                                    nav.scroll(true);
+                                }}
+                            />
+                        </li>
+                        <li>
+                            <Button
+                                icon={'map'}
+                                label={!nav.compact && 'Map'}
+                                title={`View navigation map.`}
+                                onClick={() => setMode('map')}
+                            />
+                        </li>
+                        <li>
+                            <Button
+                                icon={'filter'}
+                                label={!nav.compact && 'Filter'}
+                                title={`Filter map stations.`}
+                                className={nav.hasFilter ? 'active' : ''}
+                                onClick={() => dialog.setCurrent({dialogID: 'filter'})}
+                            />
+                        </li>
+                        <li>
+                            <Button
+                                icon={'search'}
+                                label={!nav.compact && 'Search'}
+                                title={`Full-text search of metadata.`}
+                                onClick={() => setMode('search')}
+                            />
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/client/src/_components/menus/viewer.menu.js b/client/src/_components/menus/viewer.menu.js
index 5ff8269..f67be4b 100644
--- a/client/src/_components/menus/viewer.menu.js
+++ b/client/src/_components/menus/viewer.menu.js
@@ -1,9 +1,17 @@
 /*!
  * MLE.Client.Components.Menus.Viewer
  * File: viewer.menu.js
- * Copyright(c) 2022 Runtime Software Development Inc.
+ * Copyright(c) 2023 Runtime Software Development Inc.
  * Version 2.0
  * MIT Licensed
+ *  * ----------
+ * Description
+ *
+ * Viewer menu component
+ *
+ * ---------
+ * Revisions
+ * - 22-07-2023 Added new download selection button.
  */
 
 import React from 'react';
@@ -15,94 +23,10 @@ import Button from "../common/button";
 import {redirect} from "../../_utils/paths.utils.client";
 import Dropdown from "../common/dropdown";
 import {genID} from "../../_utils/data.utils.client";
-import {setNavView, setPref} from "../../_services/session.services.client";
 import {useDialog} from "../../_providers/dialog.provider.client";
+import styles from '../styles/menu.module.css';
+import {NavigatorMenu} from "./navigator.menu";
 
-/**
- * Navigator menu component.
- *
- * View options for the navigator component.
- *
- * @public
- * @return {JSX.Element}
- */
-
-export const NavigatorMenu = () => {
-
-    const nav = useNav();
-    const dialog = useDialog();
-
-    // Sets the current navigation mode (tree/map/search/etc)
-    // - set in state and user session storage
-    const setMode = (navView) => {
-        // toggle navigator visibility
-        nav.setToggle(true);
-        // set navigator view
-        nav.setMode(navView);
-        nav.setResize(true);
-        setNavView(navView);
-    }
-
-    return (
-        <>
-            <div className={'viewer-menu'}>
-                <div className={'h-menu'}>
-                    <ul>
-                        <li>
-                            <Button
-                                className={'nav-toggle'}
-                                disabled={nav.mode === 'iat'}
-                                icon={nav.toggle ? 'hopenleft' : 'hcloseleft'}
-                                title={nav.toggle ? 'Minimize navigator.' : 'Maximize navigator'}
-                                onClick={() => {
-                                    setPref('navToggle', !nav.toggle);
-                                    nav.setToggle(!nav.toggle);
-                                    nav.setResize(true);
-                                }}
-                            />
-                        </li>
-                        <li>
-                            <Button
-                                icon={'tree'}
-                                label={!nav.compact && 'List'}
-                                title={`View navigation tree.`}
-                                onClick={() => {
-                                    setMode('tree')
-                                    nav.scroll(true);
-                                }}
-                            />
-                        </li>
-                        <li>
-                            <Button
-                                icon={'map'}
-                                label={!nav.compact &&'Map'}
-                                title={`View navigation map.`}
-                                onClick={() => setMode('map')}
-                            />
-                        </li>
-                        <li>
-                            <Button
-                                icon={'filter'}
-                                label={!nav.compact &&'Filter'}
-                                title={`Filter map stations.`}
-                                className={nav.hasFilter ? 'active' : ''}
-                                onClick={() => dialog.setCurrent({dialogID: 'filter'})}
-                            />
-                        </li>
-                        <li>
-                            <Button
-                                icon={'search'}
-                                label={!nav.compact &&'Search'}
-                                title={`Full-text search of metadata.`}
-                                onClick={() => setMode('search')}
-                            />
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </>
-    )
-}
 
 /**
  *
@@ -118,6 +42,7 @@ const ViewerPanelMenu = () => {
     const dialog = useDialog();
     const api = useData();
 
+
     // get roles
     const {isAdmin=false} = user || {};
 
@@ -151,6 +76,18 @@ const ViewerPanelMenu = () => {
                             }]} />
                     </li>
                 }
+                {
+                    (nav.downloads || []).length > 0 &&
+                    <li key={`${menuID}_menuitem_attached_downloads`}>
+                        <Button
+                            icon={'download'}
+                            label={!nav.compact && 'Download Package'}
+                            className={styles.active}
+                            title={`Bulk download selected files.`}
+                            onClick={() => {dialog.setCurrent({dialogID: 'bulk_download_selections'})}}
+                        />
+                    </li>
+                }
                 <li className={'push'}>
                     <Button
                         icon={'sync'}
@@ -161,10 +98,10 @@ const ViewerPanelMenu = () => {
                 <li className={user ? '' : 'push'} key={`${menuID}_menuitem_iat`}>
                     <Button
                         icon={'iat'}
-                        label={!nav.compact && 'Image Alignment Tool'}
-                        title={`Image Alignment Toolkit`}
+                        label={!nav.compact && 'Alignment Tool'}
+                        title={`Go to Alignment Tool.`}
                         onClick={() => {
-                            // redirect to Image Alignment Tool in viewer/editor
+                            // redirect to Alignment Tool in viewer/editor
                             redirect('/toolkit');
                         }}
                     />
diff --git a/client/src/_components/navigator/search.navigator.js b/client/src/_components/navigator/search.navigator.js
index 99e41f0..99701d5 100644
--- a/client/src/_components/navigator/search.navigator.js
+++ b/client/src/_components/navigator/search.navigator.js
@@ -1,9 +1,19 @@
 /*!
  * MLE.Client.Components.Navigator.Search
  * File: search.navigator.js
- * Copyright(c) 2022 Runtime Software Development Inc.
+ * Copyright(c) 2023 Runtime Software Development Inc.
  * Version 2.0
  * MIT Licensed
+ *
+ * ----------
+ * Description
+ *
+ * General full-text search component. Returns search results in the Navigator panel grouped
+ * by semantic node (Survey, Station, Capture, etc.)
+ *
+ * ---------
+ * Revisions
+ * - 21-10-2023     Added search field input focus on mount of component.
  */
 
 import React from 'react'
@@ -36,6 +46,9 @@ const SearchNavigator = ({limit=5, offset=0, hidden=true}) => {
 
     const router = useRouter();
 
+    // search field reference
+    const searchRef = React.useRef(null);
+
     // create search data state
     const [loading, setLoading] = React.useState(false);
     const [searchQuery, setSearchQuery] = React.useState('');
@@ -49,6 +62,12 @@ const SearchNavigator = ({limit=5, offset=0, hidden=true}) => {
     // window dimensions
     const [, winHeight] = useWindowSize();
 
+    // input focus on search field
+    React.useEffect(() => {
+        if (!hidden) searchRef.current.focus();
+        return () => {};
+    }, [hidden]);
+
     // update query string value
     const updateQuery = (e) => {
 
@@ -174,9 +193,10 @@ const SearchNavigator = ({limit=5, offset=0, hidden=true}) => {
                 className={'search-query'}
                 type={'search'}
                 id={'searchbar'}
+                ref={searchRef}
                 name={'q'}
                 aria-label={'Search the site content.'}
-                placeholder={'Search..'}
+                placeholder={'Enter search terms'}
                 onChange={updateQuery}
                 onKeyPress={(e) => {
                     if (e.key === 'Enter' || e.keyCode === 13) {
diff --git a/client/src/_components/selectors/dialog.selector.js b/client/src/_components/selectors/dialog.selector.js
index fd56201..e97778c 100644
--- a/client/src/_components/selectors/dialog.selector.js
+++ b/client/src/_components/selectors/dialog.selector.js
@@ -288,6 +288,14 @@ const DialogSelector = () => {
             >
                 <Downloader id={id} />
             </Dialog>,
+            bulk_download_selections: <Dialog
+                key={_key}
+                title={`Bulk Download Selected Images`}
+                callback={_handleDialogClose}
+                className={index > 0 ? 'hidden' : ''}
+            >
+                <Downloader />
+            </Dialog>,
             new_surveyor: <Dialog
                 key={_key}
                 title={'Add New Surveyor'}
diff --git a/client/src/_components/selectors/file.selector.js b/client/src/_components/selectors/file.selector.js
index 72504b4..2f0e9ad 100644
--- a/client/src/_components/selectors/file.selector.js
+++ b/client/src/_components/selectors/file.selector.js
@@ -8,38 +8,39 @@
 
 import React from 'react';
 import Image from '../common/image';
-import Download from '../common/download';
 import {redirect} from "../../_utils/paths.utils.client";
 import {createNodeRoute} from "../../_utils/paths.utils.client";
-import {useUser} from "../../_providers/user.provider.client";
 import {useDialog} from "../../_providers/dialog.provider.client";
+import Download from "../common/download";
 
 /**
  * Render general file component.
  *
  * @public
  * @param {Object} data
- * @param {String} callback
  * @param {String} scale
  * @return {JSX.Element}
  */
 
-const FileSelector = ({ data, callback=()=>{}, scale='thumb' }) => {
+const FileSelector = ({ data, scale='thumb' }) => {
 
-    const user = useUser();
     const dialog = useDialog();
 
     // destructure file data
     const {label='', file={}, url={}, metadata={} } = data || {};
-    const {id='', file_type='', filename='', file_size='', mimetype='' } = file || {};
+    const {id='', owner_id='', file_type='', filename='', file_size='', mimetype='' } = file || {};
     let itemMetadata = metadata
     // include file metadata in details
     itemMetadata.filename = filename;
     itemMetadata.file_size = file_size;
     itemMetadata.mimetype = mimetype;
 
-    // handle dialog view
-    // - sets image metadata in provider to load in dialog view
+    /**
+     * handle dialog view
+     * - sets image metadata in provider to load in dialog view
+     *
+     * @param {Event} e
+    */
     const _handleDialog = (e) => {
         e.stopPropagation();
 
@@ -56,6 +57,14 @@ const FileSelector = ({ data, callback=()=>{}, scale='thumb' }) => {
             : redirect(createNodeRoute(file_type, 'show', id));
     }
 
+    /**
+     * handle download response
+     * - sets image metadata in provider to load in dialog view
+     *
+     * @param {Event} e
+     */
+    const _handleDownload = () => {}
+
     // file components indexed by render type
     // - historic images link to their corresponding historic captures
     // - modern images link to their corresponding modern captures
@@ -84,12 +93,12 @@ const FileSelector = ({ data, callback=()=>{}, scale='thumb' }) => {
             onClick={_handleDialog}
         />,
         default: () => <Download
-            filename={`${filename}.zip`}
-            label={label}
+            filename={`${filename}`}
+            label={''}
             type={file_type}
             format={'zip'}
-            route={user ? `/files/download/raw?${file_type}=${id}` : `/files/download/${id}`}
-            callback={callback}
+            route={`/files/download/${id}`}
+            callback={_handleDownload}
         />
     }
 
@@ -101,12 +110,7 @@ const FileSelector = ({ data, callback=()=>{}, scale='thumb' }) => {
                     ? renders.hasOwnProperty(file_type)
                         ? renders[file_type]()
                         : renders.default()
-                    : <Image
-                        scale={'thumb'}
-                        title={'No File'}
-                        caption={'No File'}
-                        onClick={_handleDialog}
-                    />}
+                    : <Image scale={'thumb'} title={'No File'} caption={'No File'} onClick={_handleDialog} />}
         </div>
     )
 }
diff --git a/client/src/_components/styles/download.module.css b/client/src/_components/styles/download.module.css
new file mode 100644
index 0000000..b803630
--- /dev/null
+++ b/client/src/_components/styles/download.module.css
@@ -0,0 +1,18 @@
+
+/* Selected download image */
+.active {
+    background-color: #00A652;
+    border: 2px solid #222222;
+    cursor: pointer;
+}
+
+.inactive {
+    cursor: pointer;
+    background-color: #222222;
+    border: 2px solid #222222;
+}
+
+.thumbnail {
+    display: inline-block;
+    vertical-align: middle;
+}
diff --git a/client/src/_components/styles/menu.module.css b/client/src/_components/styles/menu.module.css
new file mode 100644
index 0000000..6c0cd87
--- /dev/null
+++ b/client/src/_components/styles/menu.module.css
@@ -0,0 +1,5 @@
+
+/* Active or activated menu item */
+.active {
+    background-color: #00C6BB !important;
+}
\ No newline at end of file
diff --git a/client/src/_components/toolkit/canvas/default.canvas.toolkit.js b/client/src/_components/toolkit/canvas/default.canvas.toolkit.js
index 269b69f..16f8fb2 100644
--- a/client/src/_components/toolkit/canvas/default.canvas.toolkit.js
+++ b/client/src/_components/toolkit/canvas/default.canvas.toolkit.js
@@ -8,7 +8,7 @@
  * ----------
  * Description
  *
- * Canvas component for Image Alignment Tool. Allows for state-controlled interactions using Canvas API.
+ * Canvas component for Alignment Tool. Allows for state-controlled interactions using Canvas API.
  *
  * ---------
  * Revisions
diff --git a/client/src/_components/toolkit/menu.toolkit.js b/client/src/_components/toolkit/menu.toolkit.js
index eb611c6..093f135 100644
--- a/client/src/_components/toolkit/menu.toolkit.js
+++ b/client/src/_components/toolkit/menu.toolkit.js
@@ -125,8 +125,8 @@ export const MenuToolkit = () => {
                         }}
                     /></li>
                     <li style={{width: '140px'}}><Badge label={'Shortcuts'} /></li>
-                    <li style={{width: '140px'}}>Use <code>shift</code> key to switch to alignment mode</li>
-                    <li style={{width: '140px'}}>Use <code>ctrl</code> key to magnify image</li>
+                    <li style={{width: '140px'}}>Use <code>shift</code> key to magnify region</li>
+                    <li style={{width: '140px'}}>Use <code>alt/option</code> key for alignment mode</li>
                 </ul>
             </div>
         </div>;
diff --git a/client/src/_components/toolkit/panel/controller.panel.toolkit.js b/client/src/_components/toolkit/panel/controller.panel.toolkit.js
index 63d9276..6c17300 100644
--- a/client/src/_components/toolkit/panel/controller.panel.toolkit.js
+++ b/client/src/_components/toolkit/panel/controller.panel.toolkit.js
@@ -90,12 +90,12 @@ export const useController = (id) => {
     const _handleOnKeyDown = (e) => {
         const {keyCode = ''} = e || {};
         const _methods = {
-            // disable control point selection
-            16: () => {
+            // disable control point selection (uses [ALT] key)
+            18: () => {
                 iat.setMode('select');
             },
-            // enable magnifier
-            17: () => {
+            // enable magnifier (uses [SHIFT] key)
+            16: () => {
                 iat.panel1.pointer.magnifyOn();
                 iat.panel2.pointer.magnifyOn();
             }
@@ -119,12 +119,12 @@ export const useController = (id) => {
     const _handleOnKeyUp = (e) => {
         const {keyCode = ''} = e || [];
         const _methods = {
-            // disable control point selection
-            16: () => {
+            // disable control point selection (uses [ALT] key)
+            18: () => {
                 iat.setMode('pan');
             },
-            // disable magnifier
-            17: () => {
+            // disable magnifier (uses [SHIFT] key)
+            16: () => {
                 iat.panel1.pointer.magnifyOff();
                 iat.panel2.pointer.magnifyOff();
             }
diff --git a/client/src/_components/toolkit/panel/info.panel.toolkit.js b/client/src/_components/toolkit/panel/info.panel.toolkit.js
index bb65d89..05242ca 100644
--- a/client/src/_components/toolkit/panel/info.panel.toolkit.js
+++ b/client/src/_components/toolkit/panel/info.panel.toolkit.js
@@ -98,9 +98,9 @@ const PanelInfo = ({ panel }) => {
                                     })}}
                                 /><a href={
                                     createNodeRoute(panel.properties.owner_type, 'show', panel.properties.owner_id)
-                                }
-                                     target={'_blank'}
+                                } target={'_blank'}
                                     title={'Open capture information in new window.'}
+                                     rel={"noreferrer"}
                                 ><Icon type={'externalLink'} /></a></li>
                             }
                         </ul>
diff --git a/client/src/_components/toolkit/toolkit.js b/client/src/_components/toolkit/toolkit.js
index 4df4a81..3455ccd 100644
--- a/client/src/_components/toolkit/toolkit.js
+++ b/client/src/_components/toolkit/toolkit.js
@@ -8,7 +8,7 @@
  * ----------
  * Description
  *
- * Main Image Alignment Tool component. The toolkit makes extensive use of the Canvas API
+ * Main Alignment Tool component. The toolkit makes extensive use of the Canvas API
  * for image rendering and markup. Image transformations use the OpenCV.js
  * JavaScript libraries.
  *
diff --git a/client/src/_components/toolkit/tools/comparator.toolkit.js b/client/src/_components/toolkit/tools/comparator.toolkit.js
index 019b596..2f3b76b 100644
--- a/client/src/_components/toolkit/tools/comparator.toolkit.js
+++ b/client/src/_components/toolkit/tools/comparator.toolkit.js
@@ -8,7 +8,7 @@
  * ----------
  * Description
  *
- * Dialog to compare panel images loaded in Image Alignment Tool.
+ * Dialog to compare panel images loaded in Alignment Tool.
  *
  * ---------
  * Revisions
@@ -30,7 +30,7 @@ import Badge from "../../common/badge";
 import Overlay from "../canvas/overlay.canvas.toolkit";
 
 /**
- * Comparator component for comparing and overlaying Image Alignment Tool panel images
+ * Comparator component for comparing and overlaying Alignment Tool panel images
  *
  * @public
  * @param callback
diff --git a/client/src/_components/toolkit/tools/loader.toolkit.js b/client/src/_components/toolkit/tools/loader.toolkit.js
index 3554d14..2d7bba3 100644
--- a/client/src/_components/toolkit/tools/loader.toolkit.js
+++ b/client/src/_components/toolkit/tools/loader.toolkit.js
@@ -15,9 +15,9 @@ import {useUser} from "../../../_providers/user.provider.client";
 /**
  * Image selector widget. Used to select an image
  * - from the MLP library via the API to load into IAT
- * - from IAT canvase to upload to MLP library
+ * - from IAT canvas to upload to MLP library
  *
- *  * - Input columns (cols) must be object of form:
+ *  Input columns (cols) must be object of form:
  *   [...{name: <column name>, label: <column label>}]
  * - Input rows (rows) must be object of form:
  *   [...{[name]: {...[column name]: <row data>}]
diff --git a/client/src/_components/toolkit/utils/align.utils.toolkit.js b/client/src/_components/toolkit/utils/align.utils.toolkit.js
index 0528bd9..0ef6142 100644
--- a/client/src/_components/toolkit/utils/align.utils.toolkit.js
+++ b/client/src/_components/toolkit/utils/align.utils.toolkit.js
@@ -139,7 +139,7 @@ export const alignImages = (cv = null, srcPanel, dstPanel, canvas, targetImage,
 
     // use OpenCV library for image transformations
     if (cv) {
-        console.log('Applying OpenCV perspective transformation');
+        console.log('Applying OpenCV perspective transformation...');
         let initDstImage = cv.matFromImageData(targetImage);
         let dstImage = new cv.Mat();
         let dsize = new cv.Size(initDstImage.cols, initDstImage.rows);
@@ -230,7 +230,7 @@ export const alignImages = (cv = null, srcPanel, dstPanel, canvas, targetImage,
  * ----------
  * Description
  *
- * Image Alignment Tool image alignment utilities. Alternative functions to OpenCV.
+ * Alignment Tool image alignment utilities. Alternative functions to OpenCV.
  *
  * ---------
  * Revisions
diff --git a/client/src/_components/toolkit/utils/loader.utils.toolkit.js b/client/src/_components/toolkit/utils/loader.utils.toolkit.js
index 624961a..b645f77 100644
--- a/client/src/_components/toolkit/utils/loader.utils.toolkit.js
+++ b/client/src/_components/toolkit/utils/loader.utils.toolkit.js
@@ -8,7 +8,7 @@
  * ----------
  * Description
  *
- * Image Alignment Tool image loader utilities. Loads image data from local file, MLE API library download
+ * Alignment Tool image loader utilities. Loads image data from local file, MLE API library download
  * or from a URL.
  *
  * ---------
diff --git a/client/src/_components/toolkit/utils/tiff.utils.toolkit.js b/client/src/_components/toolkit/utils/tiff.utils.toolkit.js
index c032166..5d84efc 100644
--- a/client/src/_components/toolkit/utils/tiff.utils.toolkit.js
+++ b/client/src/_components/toolkit/utils/tiff.utils.toolkit.js
@@ -8,7 +8,7 @@
  * ----------
  * Description
  *
- * Image Alignment Tool image alignment utilities. Alternative functions to OpenCV.
+ * Alignment Tool image alignment utilities. Alternative functions to OpenCV.
  *
  * ----------
  * References
diff --git a/client/src/_components/tools/download.tools.js b/client/src/_components/tools/download.tools.js
index d0c978c..6378823 100644
--- a/client/src/_components/tools/download.tools.js
+++ b/client/src/_components/tools/download.tools.js
@@ -1,58 +1,43 @@
 /*!
  * MLE.Client.Components.Tools.Downloader
  * File: download.tools.js
- * Copyright(c) 2022 Runtime Software Development Inc.
+ * Copyright(c) 2023 Runtime Software Development Inc.
  * Version 2.0
  * MIT Licensed
+ *
+ * ----------
+ * Description
+ *
+ * Selective downloader component.
+ *
+ * ---------
+ * Revisions
+ * - 10-21-2023   Changed to user-selected images.
  */
 
 import React from "react";
 import { UserMessage } from '../common/message';
-import InputSelector from '../selectors/input.selector';
+import Accordion from '../common/accordion'
 import Button from '../common/button';
 import Download from "../common/download";
+import Badge from "../common/badge";
 import {useRouter} from "../../_providers/router.provider.client";
 import {useDialog} from "../../_providers/dialog.provider.client";
-import {FilesList} from "../views/files.view";
+import {useNav} from "../../_providers/nav.provider.client";
 import Loading from "../common/loading";
-
-/**
- * Image selector.
- *
- * @public
- */
-
-// const Selector = () => {
-
-// return <Button
-//     icon={(getPref('bulk_img_download') || []).includes(id) ? 'minus_bulk' : 'add_bulk'}
-//     label={!compact ? 'Add to Bulk Download' : ''}
-//     title={`Add to bulk download.`}
-//     onClick={(e) => {
-//         e.preventDefault()
-//         let bulkDownloads = getPref('bulk_img_download')
-//         if (Array.isArray(bulkDownloads)) {
-//             if (bulkDownloads.includes(id)) {
-//                 bulkDownloads = bulkDownloads.filter(function (value) {
-//                     return value !== id;
-//                 });
-//             } else {
-//                 bulkDownloads.push(id)
-//             }
-//             setPref('bulk_img_download', [...new Set(bulkDownloads)])
-//             console.log(bulkDownloads)
-//         } else {
-//             setPref('bulk_img_download', [])
-//         }
-//     }}
-// />
-//     return null
-// }
+import Image from "../common/image";
+import {groupBy, humanize, sanitize} from "../../_utils/data.utils.client";
+import {
+    getDownloads
+} from "../../_services/session.services.client";
+import styles from '../styles/download.module.css';
+import {useUser} from "../../_providers/user.provider.client";
+import Table from "../common/table";
 
 /**
  * Bulk downloader
- * all historical captures, all modern captures; best available historical,
- * best available moderns; field note data; station details; location images.
+ * all historical captures, all modern captures; available historical,
+ * available moderns; field note data; station details; location images.
  *
  * @public
  * @param id
@@ -63,15 +48,30 @@ const Downloader = ({id}) => {
 
     const router = useRouter();
     const dialog = useDialog();
+    const nav = useNav();
+
+    // get user role
+    const user = useUser();
+    const {isEditor=false} = user || {};
 
     // create dynamic data states
     const [loadedData, setLoadedData] = React.useState(null);
+    const [selected, setSelected] = React.useState(getDownloads() || []);
+    const [size, setSize] = React.useState(0);
     const [isEmpty, setIsEmpty] = React.useState(false);
     const [error, setError] = React.useState(null);
-    const [imageFilter, setImageFilter] = React.useState([]);
     const [message, setMessage] = React.useState(null);
     const _isMounted = React.useRef(true);
 
+    // prepare image table columns
+    const cols = [
+        {name: 'thumbnail', label: 'Image'},
+        {name: 'filename', label: 'Filename'},
+        {name: 'mime_type', label: 'Format'},
+        {name: 'size', label: 'File Size'},
+        {name: 'details', label: 'Details'}
+    ];
+
     // retrieve capture images for node
     // API call to retrieve node data (if not yet loaded)
     React.useEffect(() => {
@@ -88,17 +88,56 @@ const Downloader = ({id}) => {
                         const { data = {} } = response || {};
                         // check if empty of downloadables
                         setIsEmpty(Object.keys(data).filter(key => data[key].length > 0).length === 0);
-                        // console.log('Images available for download:', data)
                         setLoadedData(data);
                     }
                 })
                 .catch(err => console.error(err),
                 );
         }
+        // handle selected images option
+        if (!error && !loadedData && !id) {
+            const fileIDs = getDownloads() || [];
+            // set selected to 'all'
+            setSelected(fileIDs);
+            // query files by filtered id array
+            router.get(`/files/filter?ids=${fileIDs.join('+')}`)
+                .then(res => {
+                    // update state with response data
+                    if (_isMounted.current) {
+                        if (res.error) return setError(res.error);
+                        const { response = {} } = res || {};
+                        const { data = {} } = response || {};
+                        // set empty flag
+                        setIsEmpty(data.length === 0);
+                        // group file results by file type
+                        const filtered = groupBy(data, 'file_type');
+                        // put file metadata into state
+                        setLoadedData(filtered);
+                    }
+                })
+                .catch(err => console.error(err),
+                );
+
+        }
         return () => {
             _isMounted.current = false;
         };
-    }, [error, loadedData, setLoadedData, id, router, imageFilter]);
+    }, [error, loadedData, setLoadedData, id, router]);
+
+    /**
+     * Compute package download size
+     * @param selected
+     * @param loadedData
+     * @private
+     */
+    React.useEffect(() => {
+        const total = (selected || []).map(id => {
+            const {files} = (options || []).find(opt => opt.data.includes(id)) || {};
+            const {file_size} = (files || []).find(f => f.id === id) || {};
+            return parseInt(file_size);
+        }).reduce((partialSum, a) => partialSum + a, 0);
+        setSize(total);
+    }, [selected, loadedData]);
 
     /**
      * Flatten capture object to collect file IDs
@@ -121,7 +160,29 @@ const Downloader = ({id}) => {
     const _getFileList = (images) => {
         return [].concat.apply([], images)
             .map(img => {
-                return {label: img.filename, file: img, url: img.url}
+                const {id, filename, url, file_size, mimetype, updated_at, created_at, image_type, image_state} = img || {};
+                return {
+                    className: selected.includes(id) ? styles.active : styles.inactive,
+                    onClick: () => {_handleSelect(id)},
+                    id: id,
+                    file_size: file_size,
+                    thumbnail: <div className={'h-menu centred'}>
+                        <ul style={{margin : 'auto', justifyContent: 'center'}} className={'centred'}><li><Image
+                            url={url}
+                            scale={'thumb'}
+                            title={`Add ${sanitize(file_size, 'filesize')} image.`}
+                            onClick={() => {_handleSelect(id)}}
+                        /></li></ul>
+                    </div>,
+                    filename: String(filename).substring(0, 20),
+                    mime_type: mimetype || 'n/a',
+                    size: sanitize(file_size, 'filesize') || 'n/a',
+                    details: <div>
+                        <div>{humanize(image_type || image_state)} Image</div>
+                        <div>Updated: {sanitize(updated_at, 'datetime')}</div>
+                        <div>Created: {sanitize(created_at, 'datetime')}</div>
+                    </div>
+                }
             });
     }
 
@@ -132,9 +193,18 @@ const Downloader = ({id}) => {
      * @return string
      */
     const _getFileQuery = () => {
-        return options
-            .filter(opt => imageFilter.includes(opt.value))
-            .map(opt => {return `${opt.value}=${opt.data.join('+')}`})
+        // group selected IDs by image file type (dict)
+        const filtered = selected.reduce((o, id) => {
+            const {value} = (options || []).find(opt => opt.data.includes(id)) || {};
+            if (value) {
+                if (o.hasOwnProperty(value) && Array.isArray(o[value]) && o[value].length > 0) o[value].push(id)
+                else o[value] = [id];
+            }
+            return o;
+        }, {});
+        // construct query string grouped by image file types
+        return Object.keys(filtered)
+            .map(key => {return `${key}=${filtered[key].join('+')}`})
             .join('&');
     }
 
@@ -142,47 +212,53 @@ const Downloader = ({id}) => {
     const options = [
         {
             value: 'historic_images',
-            label: 'All historical capture images',
+            label: 'Historic Capture Images',
             files: loadedData && loadedData.hasOwnProperty('historic_images')
                 ? _getFileList(loadedData.historic_images)
                 : [],
             data: loadedData && loadedData.hasOwnProperty('historic_images')
                 ? _getFileIDs(loadedData.historic_images)
-                : []
+                : [],
         },
         {
             value: 'modern_images',
-            label: 'All modern capture images',
+            label: 'Modern Capture Images',
             files: loadedData && loadedData.hasOwnProperty('modern_images')
                 ? _getFileList(loadedData.modern_images)
                 : [],
             data: loadedData && loadedData.hasOwnProperty('modern_images')
                 ? _getFileIDs(loadedData.modern_images)
-                : []
+                : [],
         },
         {
             value: 'unsorted_images',
-            label: 'All unsorted capture images',
+            label: 'Unsorted Capture Images',
             files: loadedData && loadedData.hasOwnProperty('unsorted_images')
                 ? _getFileList(loadedData.unsorted_images)
                 : [],
             data: loadedData && loadedData.hasOwnProperty('unsorted_images')
                 ? _getFileIDs(loadedData.unsorted_images)
-                : []
+                : [],
         },
-        // {
-        //     value: 'supplemental_images',
-        //     label: 'All supplemental images',
-        //     files: loadedData && loadedData.hasOwnProperty('supplemental_images')
-        //         ? _getFileList(loadedData.supplemental_images)
-        //         : [],
-        //     data: loadedData && loadedData.hasOwnProperty('supplemental_images')
-        //         ? _getFileIDs(loadedData.supplemental_images)
-        //         : []
-        // }
+        {
+            value: 'supplemental_images',
+            label: 'Supplemental Images',
+            files: loadedData && loadedData.hasOwnProperty('supplemental_images')
+                ? _getFileList(loadedData.supplemental_images)
+                : [],
+            data: loadedData && loadedData.hasOwnProperty('supplemental_images')
+                ? _getFileIDs(loadedData.supplemental_images)
+                : [],
+        }
     ];
 
+    /**
+     * Callback for download operation.
+     * @private
+     * @param {Event} err
+     */
     const _handleCallback = (err) => {
+        if (!id) nav.clearDownloads();
         err ? setMessage(err) : dialog.cancel();
     }
 
@@ -194,86 +270,77 @@ const Downloader = ({id}) => {
         dialog.cancel();
     }
 
-    // Handler for image filter select all
-    // - ensure image filter only includes options with data
-    const _handleSelectAll = () => {
-        setImageFilter(
-            options
-                .filter(opt => opt.data.length > 0)
-                .map(opt => {return opt.value})
-        );
-    };
-
-    // Handler for image filter select none
-    const _handleDeselectAll = () => {
-        setImageFilter([]);
+    /**
+     * Handler to reset image selection
+     * @private
+     */
+    const _handleReset = () => {
+        setSelected([]);
     };
 
-    // Handler for image filter selections
-    const _handleSelect = (opt) => {
-        // toggle inclusion of selected files
-        imageFilter.includes(opt)
-            ? setImageFilter(data => {return data.filter(o => o !== opt)})
-            : setImageFilter(data => ([ ...data, opt ]));
+    /**
+     * Handler for clearing selected downloads (when selected)
+     * @private
+     */
+    const _handleClearDownloads = () => {
+        nav.clearDownloads();
+        dialog.cancel();
+    }
 
-        // reset form if no options selected
-        // if (imageFilter.includes(opt) && imageFilter.length === 1) _handleDeselectAll()
+    /**
+     * Handler for image download selection
+     *
+     * @param id
+     * @private
+     */
+    const _handleSelect = (id) => {
+        // toggle inclusion of selected id
+        selected.includes(id)
+            ? setSelected(data => {return data.filter(o => o !== id)})
+            : setSelected(data => ([ ...data, id ]));
     };
 
     // render download-as button
     return <fieldset className={'submit'}>
+        {
+            !isEditor && <p>Note that low-resolution versions of selected images will be downloaded.</p>
+        }
         { !loadedData && <Loading label={'Loading...'}/> }
         { isEmpty && <UserMessage message={{msg: 'No downloads available', type: 'warning'}} closeable={false} /> }
         <UserMessage message={message} closeable={true} />
         <div>
-            {
-                !isEmpty && loadedData &&
-                    <fieldset>
-                        <InputSelector
-                            id={'deselect_all_images'}
-                            disabled={isEmpty}
-                            key={`bulk_download_filter_option_select_none`}
-                            label={'Deselect All Images'}
-                            type={'checkbox'}
-                            value={Array.isArray(imageFilter) && imageFilter.length === 0}
-                            onChange={() => _handleDeselectAll()}
-                        />
-                        <InputSelector
-                            id={'select_all_images'}
-                            disabled={isEmpty}
-                            key={`bulk_download_filter_option_select_all`}
-                            label={'Select All Images'}
-                            type={'checkbox'}
-                            value={Array.isArray(imageFilter) && options.filter(
-                                opt => !imageFilter.includes(opt.value) && opt.data.length > 0).length === 0
-                            }
-                            onChange={() => _handleSelectAll()}
-                        />
-                        {
-                            options.map((opt, index) => {
-                                return Array.isArray(opt.data) && opt.data.length > 0 && <InputSelector
-                                    id={`select_images_${index}`}
-                                    key={`bulk_download_filter_option_${index}`}
-                                    label={opt.label}
-                                    type={'checkbox'}
-                                    value={Array.isArray(imageFilter) && imageFilter.includes(opt.value)}
-                                    onChange={() => _handleSelect(opt.value)}
-                                />
-                            })
-                        }
-                    </fieldset>
-            }
+            <div>
+                {
+                    options.map((filegroup, index) => {
+                        return Array.isArray(filegroup.files) && filegroup.files.length > 0 &&
+                            <Accordion open={true} label={filegroup.label} type={filegroup.value} key={`download-filelist-${index}`}>
+                                <Table rows={filegroup.files} cols={cols} className={'files'}/>
+                            </Accordion>
+                    })
+                }
+            </div>
+            <Badge
+                className={'active'}
+                label={isEditor
+                    ? `${selected.length} images selected for download. Package Size: ${sanitize(size, 'filesize')}`
+                    : `${selected.length} images selected for download.`}
+                icon={selected.length > 1 ? 'images' : 'image'}
+            />
             <div className={'h-menu'}>
                 <ul>
                     {
-                        Array.isArray(imageFilter) && imageFilter.length > 0 &&
+                        Array.isArray(selected) && selected.length > 0 &&
                         <li>
                             <Download
                                 className={'submit'}
                                 filename ={`mlp_download.zip`}
                                 format={'zip'}
                                 label={`Download`}
-                                route={`/files/download/raw?${_getFileQuery()}`}
+                                route={
+                                    isEditor
+                                        ? `/files/download/raw?${_getFileQuery()}`
+                                        : `/files/download/bulk?${_getFileQuery()}`
+                                }
                                 callback={_handleCallback}
                             />
                         </li>
@@ -286,21 +353,27 @@ const Downloader = ({id}) => {
                             onClick={_handleCancel}
                         />
                     </li>
+                    <li>
+                        <Button
+                            icon={'reset'}
+                            label={'Reset'}
+                            className={'reset'}
+                            onClick={_handleReset}
+                        />
+                    </li>
+                    {
+                        !id &&
+                        <li>
+                            <Button
+                                icon={'delete'}
+                                label={'Clear Downloads'}
+                                className={'reset'}
+                                onClick={_handleClearDownloads}
+                            />
+                        </li>
+                    }
                 </ul>
-            </div>
 
-            <div>
-                {
-                    options
-                        .filter(opt => imageFilter.includes(opt.value))
-                        .map((filegroup, index) => {
-                            return Array.isArray(filegroup.files) && filegroup.files.length > 0 &&
-                                <div className={''} key={`download-filelist-${index}`}>
-                                    <h3>{filegroup.label}</h3>
-                                    <FilesList files={filegroup.files} />
-                                </div>
-                        })
-                }
             </div>
         </div>
     </fieldset>;
diff --git a/client/src/_components/views/admin.view.js b/client/src/_components/views/admin.view.js
index ef64422..ac20a86 100644
--- a/client/src/_components/views/admin.view.js
+++ b/client/src/_components/views/admin.view.js
@@ -23,7 +23,6 @@ const AdminView = () => {
     // load log files
     useEffect(() => {
         const {roles} = user || {};
-        console.log(roles)
     }, [user]);
 
 
diff --git a/client/src/_components/views/capture.view.js b/client/src/_components/views/capture.view.js
index 0b6bfc7..157686f 100644
--- a/client/src/_components/views/capture.view.js
+++ b/client/src/_components/views/capture.view.js
@@ -98,7 +98,7 @@ export const CaptureImagesTable = ({type, owner, files=[], callback=()=>{}}) =>
             label={label}
             metadata={metadata}
             callback={callback}
-            visible={['show', 'iat', 'edit', 'remove']}
+            visible={['show', 'attach', 'iat', 'edit', 'remove']}
         />;
         return row;
     });
diff --git a/client/src/_components/views/editor.view.js b/client/src/_components/views/editor.view.js
index 760b679..0467689 100644
--- a/client/src/_components/views/editor.view.js
+++ b/client/src/_components/views/editor.view.js
@@ -13,7 +13,7 @@ import StaticView from '../selectors/static.selector';
 import { useRouter } from '../../_providers/router.provider.client';
 import HeaderMenu from '../menus/header.menu';
 import {useWindowSize} from "../../_utils/events.utils.client";
-import Footer from "../common/footer";
+import Footer from "../content/footer";
 import AdminView from "./admin.view";
 
 /**
diff --git a/client/src/_components/views/files.view.js b/client/src/_components/views/files.view.js
index bd6b8ae..e478454 100644
--- a/client/src/_components/views/files.view.js
+++ b/client/src/_components/views/files.view.js
@@ -31,7 +31,8 @@ export const
 
         // prepare capture images columns
         const cols = [
-            {name: 'file', label: 'File'},
+            {name: 'download', label: 'Download'},
+            {name: 'filename', label: 'Filename'},
             {name: 'mime_type', label: 'Format'},
             {name: 'details', label: 'Details'},
             {name: 'file_size', label: 'File Size'},
@@ -67,14 +68,15 @@ export const
 
             // return files row
             return {
-                file: <FileSelector data={fileData}/>,
+                download: <FileSelector data={fileData} scale={'medium'} />,
+                filename: String(filename).substring(0, 12) || 'n/a',
                 mime_type: mimetype || ext,
                 details: metadata_type && metadata_type.hasOwnProperty('label')
                     ? metadata_type.label
                     : image_type,
                 file_size: sanitize(file.file_size, 'filesize') || 'n/a',
-                updated_at: metadata.updated_at,
-                created_at: metadata.created_at,
+                updated_at: sanitize(metadata.updated_at, 'datetime'),
+                created_at: sanitize(metadata.created_at, 'datetime'),
                 menu: menu && <EditorMenu
                     size={user ? 'sm' : 'lg'}
                     className={'right-aligned'}
@@ -100,7 +102,7 @@ export const
      * @param {Object} owner
      * @return
      */
-    FilesList = ({files, owner}) => {
+    FilesList = ({files}) => {
         return Array.isArray(files) && files.length > 0 &&
             <div className={'gallery h-menu'}>
                 <ul>
@@ -108,7 +110,7 @@ export const
                         files
                             .map((fileData, index) =>
                                 <li key={`gallery_file_${index}`}>
-                                    <FileSelector data={fileData} scale={'thumb'} owner={owner}/>
+                                    <FileSelector data={fileData} scale={'thumb'} />
                                 </li>
                             )
                     }
diff --git a/client/src/_components/views/help.view.js b/client/src/_components/views/help.view.js
index 5a645ba..99f3f88 100644
--- a/client/src/_components/views/help.view.js
+++ b/client/src/_components/views/help.view.js
@@ -138,7 +138,7 @@ const HelpView = ({ section = 0, page = 0 }) => {
             />,
         },
         {
-            label: 'Image Alignment Tool',
+            label: 'Alignment Tool',
             data: <HelpTabs
                 orientation={'vertical'}
                 items={iatHelp}
diff --git a/client/src/_components/views/visitor.view.js b/client/src/_components/views/visitor.view.js
index 53fda5c..8b0f613 100644
--- a/client/src/_components/views/visitor.view.js
+++ b/client/src/_components/views/visitor.view.js
@@ -12,7 +12,7 @@ import DataView from '../selectors/view.selector';
 import StaticView from '../selectors/static.selector';
 import { useRouter } from '../../_providers/router.provider.client';
 import HeaderMenu from '../menus/header.menu';
-import Footer from "../common/footer";
+import Footer from "../content/footer";
 import {useWindowSize} from "../../_utils/events.utils.client";
 
 /**
diff --git a/client/src/_providers/nav.provider.client.js b/client/src/_providers/nav.provider.client.js
index 9a20afa..6e9641a 100644
--- a/client/src/_providers/nav.provider.client.js
+++ b/client/src/_providers/nav.provider.client.js
@@ -14,9 +14,15 @@
 
 import * as React from 'react'
 import { useRouter } from './router.provider.client';
-import {getNavView} from "../_services/session.services.client";
+import {
+    getDownloads,
+    addDownload,
+    checkDownload,
+    clearDownloads,
+    getNavView,
+    removeDownload
+} from "../_services/session.services.client";
 import kmlData from '../_components/kml/example-2.kml';
-import {useWindowSize} from "../_utils/events.utils.client";
 
 /**
  * Global navigation data provider.
@@ -51,6 +57,9 @@ function NavProvider(props) {
     // IAT data states
     const [iatSettings, setIATSettings] = React.useState(null);
 
+    // Attached downloads
+    const [downloadData, setDownloadData] = React.useState(null);
+
     // initialize navigation view settings
     const [navView, setNavView] = React.useState(getNavView() || 'map');
     const [navToggle, setNavToggle] = React.useState(true);
@@ -79,6 +88,33 @@ function NavProvider(props) {
         setScrollToView(toggle);
     }
 
+    // toggle selected download
+    const _toggleAttachedDownload = (id) => {
+        checkDownload(id) ? removeDownload(id) : addDownload(id);
+        setDownloadData(getDownloads());
+    }
+
+    // clear all attached downloads
+    const _clearAttachedDownloads = () => {
+        clearDownloads();
+        setDownloadData(null);
+    }
+
+    // clear all attached downloads
+    const _checkAttachedDownload = (id) => {
+        return checkDownload(id);
+    }
+
+    /**
+     * Update download selection state.
+     *
+     * @public
+     */
+
+    React.useEffect(() => {
+        setDownloadData(getDownloads());
+    }, []);
+
     /**
      * Load API global node tree data.
      * - uses current Window location path as default endpoint.
@@ -94,7 +130,7 @@ function NavProvider(props) {
         // - navigator route is defined
         // - node data not yet loaded
         if (!error && (!nodeData || Object.keys(nodeData).length === 0)) {
-            console.log('Load Nav Tree')
+            console.log('Load Nav Tree...')
             // load API data
             router.get('/nodes/tree')
                 .then(res => {
@@ -134,7 +170,7 @@ function NavProvider(props) {
         // - navigator route is defined
         // - node data not yet loaded
         if (!error && (!mapData || Object.keys(mapData).length === 0)) {
-            console.log('Load Nav Map')
+            console.log('Loading Nav Map...')
             // load API data
             router.get('/nodes/map')
                 .then(res => {
@@ -222,7 +258,11 @@ function NavProvider(props) {
                 resize: resize,
                 setResize: setResize,
                 compact,
-                setCompact
+                setCompact,
+                downloads: downloadData,
+                addDownload: _toggleAttachedDownload,
+                checkDownload: _checkAttachedDownload,
+                clearDownloads: _clearAttachedDownloads
             }
         } {...props} />
     )
diff --git a/client/src/_services/session.services.client.js b/client/src/_services/session.services.client.js
index 4293df6..c8c6a5d 100644
--- a/client/src/_services/session.services.client.js
+++ b/client/src/_services/session.services.client.js
@@ -1,9 +1,21 @@
 /*!
  * MLE.Client.Services.Session
  * File: session.services.client.js
- * Copyright(c) 2022 Runtime Software Development Inc.
+ * Copyright(c) 2023 Runtime Software Development Inc.
  * Version 2.0
  * MIT Licensed
+ *
+ * ----------
+ * Description
+ *
+ * Local session storage service module handles client storage variables:
+ * - Current nodes in navigation path
+ * - Current session view preferences
+ * - User-selected download IDs
+ *
+ * ---------
+ * Revisions
+ * - 10-21-2023   Added user-selected downloads session storage.
  */
 
 /**
@@ -59,9 +71,9 @@ export const removeNode = (node) => {
  * @public
  */
 
-export const clearNodes = () => {
-    sessionStorage.setItem('nodes', JSON.stringify([]));
-}
+// export const clearNodes = () => {
+//     sessionStorage.setItem('nodes', JSON.stringify([]));
+// }
 
 /**
  * Retrieve messages from session storage.
@@ -165,3 +177,61 @@ export const setPref = (name, value) => {
 export const clearPrefs = () => {
     sessionStorage.setItem('prefs', JSON.stringify([]));
 }
+
+/**
+ * Get list of downloads selected by user.
+ *
+ * @public
+ */
+
+export const getDownloads = () => {
+    const downloads = sessionStorage.getItem('downloads') || ''
+    return downloads ? JSON.parse(downloads) : '';
+}
+
+/**
+ * Add download selection to data session storage.
+ *
+ * @public
+ * @param {integer} id
+ */
+
+export const addDownload = (id) => {
+    const downloads = (getDownloads() || []).filter(d => d !== id);
+    downloads.push(id);
+    sessionStorage.setItem('downloads', JSON.stringify(downloads));
+}
+
+/**
+ * Remove download selection from session storage.
+ *
+ * @public
+ * @param {int} id
+ */
+
+export const removeDownload = (id) => {
+    let downloads = getDownloads();
+    sessionStorage.setItem('downloads', JSON.stringify(
+        downloads.filter(d => d !== id))
+    );
+}
+
+/**
+ * Clear all downloads from session storage.
+ *
+ * @public
+ */
+
+export const clearDownloads = () => {
+    sessionStorage.setItem('downloads', null);
+}
+
+/**
+ * Check if download attached to downloads in session storage.
+ *
+ * @public
+ */
+
+export const checkDownload = (id) => {
+    return (getDownloads() || []).includes(id);
+}
\ No newline at end of file
diff --git a/client/src/_utils/data.utils.client.js b/client/src/_utils/data.utils.client.js
index 3830eac..09ffd1d 100644
--- a/client/src/_utils/data.utils.client.js
+++ b/client/src/_utils/data.utils.client.js
@@ -52,6 +52,7 @@ export const toSnake = (str) => {
  */
 
 export function humanize(str) {
+    if (!str || str === '') return '';
     str = toSnake(str);
     let i, frags = str.split('_');
     for (i = 0; i < frags.length; i++) {
diff --git a/client/src/index.css b/client/src/index.css
index d4aa072..5b129a2 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -2234,7 +2234,7 @@ Messages
 }
 
 /*
-Image Alignment Tool
+Alignment Tool
 */
 
 canvas {
@@ -2264,7 +2264,7 @@ canvas {
 }
 
 /*
-Define Canvas Layers of Panel (Image Alignment Tool)
+Define Canvas Layers of Panel (Alignment Tool)
 */
 
 .canvas-placeholder {
diff --git a/client/src/schema.js b/client/src/schema.js
index 38a0b53..b7e89c9 100644
--- a/client/src/schema.js
+++ b/client/src/schema.js
@@ -30,7 +30,7 @@ export const schema = {
         },
         '/toolkit': {
             name: 'imageToolkit',
-            label: 'Image Alignment Tool'
+            label: 'Alignment Tool'
         },
         '/admin': {
             name: 'admin',
diff --git a/queue/app.js b/queue/app.js
index d35b8b4..6328547 100644
--- a/queue/app.js
+++ b/queue/app.js
@@ -87,7 +87,7 @@ try {
             .catch(console.error)
             .finally(() => {
                 console.log('Garbage Collection ...')
-                // force garbage collection
+                // force garbage collection to prevent heap memory leaks
                 if (typeof global.gc != "undefined") {
                     const gcRes = global.gc();
                     console.log('\t- [Node] Force GC:', gcRes);
diff --git a/queue/images.services.js b/queue/images.services.js
index bdd7575..52b2a37 100644
--- a/queue/images.services.js
+++ b/queue/images.services.js
@@ -19,7 +19,7 @@
 
 import pool from "../src/services/db.services.js";
 import {deleteFiles, insertFile} from "../src/services/files.services.js";
-import * as stream from 'stream';
+import * as stream from "stream";
 import {mkdir, stat} from 'fs/promises';
 import fs from 'fs';
 import {ExifTool} from 'exiftool-vendored';
diff --git a/src/controllers/files.controller.js b/src/controllers/files.controller.js
index f674a07..ad86db5 100644
--- a/src/controllers/files.controller.js
+++ b/src/controllers/files.controller.js
@@ -21,6 +21,7 @@ import { sanitize } from '../lib/data.utils.js';
 import * as importer from '../services/import.services.js';
 import { humanize } from '../lib/data.utils.js';
 import {getFilePath} from "../services/files.services.js";
+import {getImageURL} from "../services/images.services.js";
 
 /**
  * Export controller constructor.
@@ -145,6 +146,15 @@ export default function FilesController(modelType) {
             const owner = await nserve.select(owner_id, client);
             let files = await fserve.selectAllByOwner(owner_id) || [];
 
+            // check if files are present in request data
+            if (
+                Array.isArray(files.historic_images) && files.historic_images.length === 0
+                && Array.isArray(files.modern_images) && files.modern_images.length === 0
+                && Array.isArray(files.unsorted_images) && files.unsorted_images.length === 0
+            ) {
+                return next(new Error('noFiles'));
+            }
+
             // send response
             res.status(200).json(
                 prepare({
@@ -176,10 +186,13 @@ export default function FilesController(modelType) {
 
     this.filter = async (req, res, next) => {
 
+        // NOTE: client undefined if connection fails.
+        const client = await pool.connect();
+
         try {
 
             // get query parameters
-            const { ids='', offset=0, limit=10 } = req.query || {};
+            const { ids=''} = req.query || {};
 
             // sanitize + convert query string to node id array
             const fileIDs = ids
@@ -189,7 +202,15 @@ export default function FilesController(modelType) {
                 });
 
             // get filtered results
-            const resultData = await fserve.filterFilesByID(fileIDs, offset, limit);
+            const resultData = await Promise.all((
+                fileIDs || []).map(async (id) => {
+                    const {file_type} = await fserve.select(id, client);
+                    const {results} = await fserve.filterFilesByID([id], file_type, 0, 100);
+                    const rs = results[0];
+                    // include image urls
+                    rs.url = getImageURL(file_type, rs);
+                    return rs;
+            }))
 
             res.status(200).json(
                 prepare({
@@ -198,7 +219,10 @@ export default function FilesController(modelType) {
                 }));
 
         } catch (err) {
+            console.error(err)
             return next(err);
+        } finally {
+            await client.release(true);
         }
     };
 
@@ -435,14 +459,14 @@ export default function FilesController(modelType) {
         try {
 
             // get requested file ID
-            const fileID = this.getId(req);
+            const {id} = req.params || {};
 
             // get owner node; check that node exists in database
             // and corresponds to requested owner type.
-            const fileData = await fserve.get(fileID, client);
-            const { file={}, metadata={} } = fileData || {};
-            const { file_type='', filename='', mime_type='' } = file || {};
-            const filePath = getFilePath(file_type, file, metadata);
+            const fileData = await fserve.get(id, client);
+            const { file={} } = fileData || {};
+            const { filename='', mime_type='' } = file || {};
+            const filePath = getFilePath(file);
 
             // file does not exist
             if (!file) return next(new Error('invalidRequest'));
@@ -461,7 +485,8 @@ export default function FilesController(modelType) {
 
 
     /**
-     * Bulk download files (for unauthenticated downloads).
+     * Bulk download files (compressed folder downloads).
+     * - File IDs are passed in query string by file type
      *
      * @param req
      * @param res
@@ -474,24 +499,7 @@ export default function FilesController(modelType) {
         const client = await pool.connect();
 
         try {
-
-            // get requested file ID
-            const fileID = this.getId(req);
-
-            // get owner node; check that node exists in database
-            // and corresponds to requested owner type.
-            const fileData = await fserve.get(fileID, client);
-            const { file={}, metadata={} } = fileData || {};
-            const { file_type='' } = file || {};
-
-            // file does not exist
-            if (!file) return next(new Error('invalidRequest'));
-
-            const buffer = await fserve.compress( {[file_type]: [file]}, file_type, metadata);
-
-            // push buffer to download stream
-            fserve.streamDownload(res, buffer);
-
+            await fserve.bulkDownload(req, res, next, 'full', client);
         } catch (err) {
             return next(err);
         } finally {
@@ -500,8 +508,8 @@ export default function FilesController(modelType) {
     };
 
     /**
-     * Download single/bulk raw files (compressed folder downloads).
-     * - File IDs are passed in query string by capture image type
+     * Bulk download raw files (compressed folder downloads).
+     * - File IDs are passed in query string by file type
      *
      * @param req
      * @param res
@@ -514,99 +522,7 @@ export default function FilesController(modelType) {
         const client = await pool.connect();
 
         try {
-
-            // get query parameters
-            const {
-                file_id='',
-                id='',
-                historic_images='',
-                modern_images='',
-                metadata_files='',
-                supplemental_images='',
-                unsorted_images=''
-            } = req.query || {};
-
-            if (
-                !file_id &&
-                !id &&
-                !historic_images &&
-                !modern_images &&
-                !metadata_files &&
-                !supplemental_images &&
-                !unsorted_images)
-                return next(new Error('invalidRequest'));
-
-            // stream single raw image file without compression
-            if (file_id) {
-                // get owner node; check that node exists in database
-                // and corresponds to requested owner type.
-                const fileData = await fserve.get(sanitize(file_id, 'integer'), client);
-                const { file={}, metadata={} } = fileData || {};
-                const { filename='', mime_type='' } = file || {};
-                const filePath = getFilePath('raw', file, metadata);
-
-                // file does not exist
-                if (!file) return next(new Error('invalidRequest'));
-
-                res.setHeader('Content-disposition', 'attachment; filename=' + filename);
-                res.setHeader('Content-type', mime_type);
-
-                return await fserve.download(res, filePath);
-            }
-
-            // sanitize single file ID
-            const singleFileId = sanitize(id);
-
-            // sanitize + convert query string to node id array
-            const historicFileIDs = historic_images
-                .split(' ')
-                .map(id => {
-                    return sanitize(id, 'integer');
-                });
-
-            const modernFileIDs = modern_images
-                .split(' ')
-                .map(id => {
-                    return sanitize(id, 'integer');
-                });
-
-            const unsortedFileIDs = unsorted_images
-                .split(' ')
-                .map(id => {
-                    return sanitize(id, 'integer');
-                });
-
-            const metadataFileIDs = metadata_files
-                .split(' ')
-                .map(id => {
-                    return sanitize(id, 'integer');
-                });
-
-            const supplementalFileIDs = supplemental_images
-                .split(' ')
-                .map(id => {
-                    return sanitize(id, 'integer');
-                });
-
-            // get filtered files by ID
-            const singleFile = await fserve.select(singleFileId, client);
-            const historicFiles = await fserve.filterFilesByID(historicFileIDs, 0, 100);
-            const modernFiles = await fserve.filterFilesByID(modernFileIDs, 0, 100);
-            const metadataFiles = await fserve.filterFilesByID(metadataFileIDs, 0, 100);
-            const supplementalFiles = await fserve.filterFilesByID(supplementalFileIDs, 0, 100);
-            const unsortedFiles = await fserve.filterFilesByID(unsortedFileIDs, 0, 100);
-
-            // stream archive data for either single raw file or compressed image folder
-            return singleFile
-                ? await fserve.streamArchive(res, {file: [singleFile]}, 'raw')
-                : await fserve.streamArchive(res, {
-                    'historic_images': historicFiles.results,
-                    'modern_images': modernFiles.results,
-                    'unsorted_images': unsortedFiles.results,
-                    'metadata_files': metadataFiles.results,
-                    'supplemental_files': supplementalFiles.results,
-                }, 'raw');
-
+            await fserve.bulkDownload(req, res, next, 'raw');
         } catch (err) {
             return next(err);
         } finally {
diff --git a/src/lib/file.utils.js b/src/lib/file.utils.js
index 5f188b0..d476237 100644
--- a/src/lib/file.utils.js
+++ b/src/lib/file.utils.js
@@ -1,7 +1,7 @@
 /*!
  * MLP.API.Utilities.Files
  * File: files.utils.js
- * Copyright(c) 2021 Runtime Software Development Inc.
+ * Copyright(c) 2023 Runtime Software Development Inc.
  * MIT Licensed
  */
 
@@ -73,6 +73,7 @@ export const imageMIMETypes = {
     'tif': 'image/tiff',
     'tiff': 'image/tiff',
     'x-png': 'image/png',
+    '3FR': 'image/x-hasselblad-3fr',
     'ARW': 'image/x-sony-arw',
     'CR2': 'image/x-canon-cr2',
     'CRW': 'image/x-canon-crw',
diff --git a/src/queries/files.queries.js b/src/queries/files.queries.js
index ed2d008..00a4823 100644
--- a/src/queries/files.queries.js
+++ b/src/queries/files.queries.js
@@ -46,15 +46,24 @@ export function getFilesByType(fileType, limit=10) {
 /**
  * Generate query: Retrieve files by id array.
  *
+ * @param ids
+ * @param file_type
+ * @param offset
+ * @param limit
  * @return {Function} query function
  * @public
  */
 
-export function filterByIDArray(ids, offset, limit) {
+export function filterByIDArray(ids, file_type, offset, limit) {
+
+    // get metadata for given file type
+    const fileTypeTbl = `INNER JOIN ${file_type} ON id = ${file_type}.files_id`;
+
     const sql = `SELECT 
             *, 
             (SELECT COUNT(*) FROM files WHERE id = ANY($1)) as total
             FROM files 
+            ${file_type ? fileTypeTbl : ''}
             WHERE id = ANY($1)
             OFFSET ${offset}
             LIMIT ${limit}`;
diff --git a/src/routes/files.routes.js b/src/routes/files.routes.js
index 1dc3c36..d1dd4b7 100644
--- a/src/routes/files.routes.js
+++ b/src/routes/files.routes.js
@@ -81,14 +81,14 @@ function FilesRoutes(modelType) {
             delete: null,
         },
         export: {
-            path: path.join('/files/download/bulk', ':' + this.key),
+            path: '/files/download/bulk',
             get: this.controller.bulk,
             put: null,
             post: null,
             delete: null,
         },
         download: {
-            path: path.join('/files/download', ':' + this.key),
+            path: path.join('/files/download/:id'),
             get: this.controller.download,
             put: null,
             post: null,
diff --git a/src/services/files.services.js b/src/services/files.services.js
index 7473170..cf53c8f 100644
--- a/src/services/files.services.js
+++ b/src/services/files.services.js
@@ -58,13 +58,14 @@ export const select = async function(id, client ) {
  * Get list of requested files by IDs.
  *
  * @public
- * @params {Array} filesID
- * @params {int} offset
- * @params {int} limit
  * @return {Promise} result
+ * @param fileIDs
+ * @param file_type
+ * @param offset
+ * @param limit
  */
 
-export const filterFilesByID = async (fileIDs, offset, limit) => {
+export const filterFilesByID = async (fileIDs, file_type, offset, limit) => {
 
     if (!fileIDs) return null;
 
@@ -76,7 +77,7 @@ export const filterFilesByID = async (fileIDs, offset, limit) => {
         await client.query('BEGIN');
 
         // get filtered nodes
-        let { sql, data } = queries.files.filterByIDArray(fileIDs, offset, limit);
+        let { sql, data } = queries.files.filterByIDArray(fileIDs, file_type, offset, limit);
         let files = await client.query(sql, data)
             .then(res => {
                 return res.rows
@@ -168,20 +169,24 @@ export const get = async (id, client ) => {
     // get associated file metadata
     const metadata = await selectByFile(file, client) || {};
     const { type = '', secure_token = '' } = metadata || {};
-    const { file_type = '', filename = '', owner_id=0 } = file || {};
+    const { file_type = '', filename = '', owner_id=0, file_size=0 } = file || {};
     const owner = await nserve.select(owner_id, client) || {};
+    const label = await getFileLabel(file, client);
 
     // include alternate extracted filename (omit the security token)
     return {
+        id: id,
         file: file,
         owner: owner,
-        label: await getFileLabel(file, client),
+        file_type: file_type,
+        file_size: file_size,
+        label: label,
         filename: (filename || '').replace(`_${secure_token}`, ''),
         metadata: metadata,
         metadata_type: await metaserve.selectByName('metadata_file_types', type, client),
         url: getImageURL(file_type, metadata),
         status: await metaserve.getStatus(owner, client),
-    };
+    }
 
 };
 
@@ -276,7 +281,15 @@ export const selectAllByOwner = async (id) => {
                 row.url = getImageURL('modern_images', row);
                 return row
             });
-        }
+        },
+        // supplemental_images: async () => {
+        //     const {sql, data} = queries.files.getUnsortedImageFilesByStationID(id);
+        //     const {rows = []} = await client.query(sql, data);
+        //     return rows.map(row => {
+        //         row.url = getImageURL('modern_images', row);
+        //         return row
+        //     });
+        // }
     }
 
     try {
@@ -526,12 +539,11 @@ export const download = async (res, src) => {
  *
  * @param {Object} files
  * @param {String} version
- * @param {Object} metadata
  * @return Response data
  * @public
  */
 
-export const compress = async (files={}, version, metadata={}) => {
+export const compress = async (files={}, version) => {
 
     // creating new archive (ADM-ZIP)
     let zip = new AdmZip();
@@ -542,7 +554,7 @@ export const compress = async (files={}, version, metadata={}) => {
             await Promise.all(
                 files[fileType].map(async (file) => {
                     // get file path for given version type
-                    const filePath = getFilePath(version, file, metadata);
+                    const filePath = getFilePath(file, version);
                     // places file in a subfolder labelled by image/file type
                     // - only include files that exist
                     if (fs.existsSync(filePath)) zip.addLocalFile(filePath, fileType);
@@ -561,40 +573,44 @@ export const compress = async (files={}, version, metadata={}) => {
  * from file data.
  *
  * @public
- * @param {String} version
  * @param file
- * @param metadata
+ * @param version
  * @return {String} result
  */
 
-export const getFilePath = (version, file, metadata = {}) => {
+export const getFilePath = (file, version='medium' ) => {
 
-    const { fs_path = '' } = file || {};
-    const { secure_token = '' } = metadata || {};
-    const rootURI = process.env.LOWRES_PATH;
-    const imgPrefix = 'medium';
+    const { fs_path = '', secure_token = '', file_type='' } = file || {};
+    const lowResPath = process.env.LOWRES_PATH;
+    const defaultPath = process.env.UPLOAD_DIR;
 
     // handle image source URLs differently than metadata files
     // - images use scaled versions of raw files
     // - metadata uses PDF downloads
     const fileHandlers = {
         historic_images: () => {
-            return path.join(rootURI, `${imgPrefix}_${secure_token}.jpeg`);
+            return version === 'raw'
+                ? path.join(path.join(defaultPath, fs_path))
+                : path.join(lowResPath, `${version}_${secure_token}.jpeg`);
         },
         modern_images: () => {
-            return path.join(rootURI, `${imgPrefix}_${secure_token}.jpeg`);
+            return version === 'raw'
+                ? path.join(path.join(defaultPath, fs_path))
+                : path.join(lowResPath, `${version}_${secure_token}.jpeg`);
         },
         supplemental_images: () => {
-            return path.join(rootURI, `${imgPrefix}_${secure_token}.jpeg`);
+            return version === 'raw'
+                ? path.join(path.join(defaultPath, fs_path))
+                : path.join(lowResPath, `${version}_${secure_token}.jpeg`);
         },
         default: () => {
-            return path.join(path.join(process.env.UPLOAD_DIR, fs_path));
+            return path.join(path.join(defaultPath, fs_path));
         },
     };
 
     // Handle file types
-    return fileHandlers.hasOwnProperty(version)
-        ? fileHandlers[version]()
+    return fileHandlers.hasOwnProperty(file_type)
+        ? fileHandlers[file_type]()
         : fileHandlers.default();
 };
 
@@ -964,7 +980,7 @@ export const streamArchive = async (res, files={}, version, metadata={}) => {
     });
 
     // pipe data to response
-    archive.pipe(res)
+    archive.pipe(res);
 
     // add requested files to archive; separate different file types in folders
     await Promise.all(
@@ -972,7 +988,7 @@ export const streamArchive = async (res, files={}, version, metadata={}) => {
             await Promise.all(
                 files[fileType].map(async (file, index) => {
                     // get file path for given version type
-                    const filePath = getFilePath(version, file, metadata);
+                    const filePath = getFilePath(file, version);
                     const {filename=``} = file || {};
                     // places file in a subfolder labelled by image/file type
                     // - only include files that exist
@@ -1022,4 +1038,111 @@ export const streamDownload = (res, buffer) => {
     rs.push(null);
 }
 
+/**
+ * Bulk download files
+ *
+ * @public
+ * @param req
+ * @param res
+ * @param next
+ * @param version
+ */
+
+export const bulkDownload = async (req, res, next, version, client) => {
+
+    const offset = 0;
+    const limit = 100;
+
+    // extract query parameters
+    const {
+        file_id='',
+        id='',
+        historic_images='',
+        modern_images='',
+        metadata_files='',
+        supplemental_images='',
+        unsorted_images=''
+    } = req.query || {};
+
+    if (
+        !file_id &&
+        !id &&
+        !historic_images &&
+        !modern_images &&
+        !metadata_files &&
+        !supplemental_images &&
+        !unsorted_images)
+        return next(new Error('invalidRequest'));
+
+    // stream single image file without compression
+    if (file_id) {
+        // get owner node; check that node exists in database
+        // and corresponds to requested owner type.
+        const fileData = await get(sanitize(file_id, 'integer'), client);
+        const { file={}, metadata={} } = fileData || {};
+        const { filename='', mime_type='' } = file || {};
+        const filePath = getFilePath(file, version);
+
+        // file does not exist
+        if (!file) return next(new Error('invalidRequest'));
+
+        res.setHeader('Content-disposition', 'attachment; filename=' + filename);
+        res.setHeader('Content-type', mime_type);
+
+        return await download(res, filePath);
+    }
+
+    // sanitize single file ID
+    const singleFileId = sanitize(id, 'integer');
+
+    // sanitize + convert query string to node id array
+    const historicFileIDs = historic_images
+        .split(' ')
+        .map(id => {
+            return sanitize(id, 'integer');
+        });
+
+    const modernFileIDs = modern_images
+        .split(' ')
+        .map(id => {
+            return sanitize(id, 'integer');
+        });
+
+    const unsortedFileIDs = unsorted_images
+        .split(' ')
+        .map(id => {
+            return sanitize(id, 'integer');
+        });
+
+    const metadataFileIDs = metadata_files
+        .split(' ')
+        .map(id => {
+            return sanitize(id, 'integer');
+        });
+
+    const supplementalFileIDs = supplemental_images
+        .split(' ')
+        .map(id => {
+            return sanitize(id, 'integer');
+        });
+
+    // get filtered files by ID
+    const singleFile = await select(singleFileId, client);
+    const historicFiles = await filterFilesByID(historicFileIDs, 'historic_images', offset, limit);
+    const modernFiles = await filterFilesByID(modernFileIDs, 'modern_images', offset, limit);
+    const metadataFiles = await filterFilesByID(metadataFileIDs, 'metadata_files', offset, limit);
+    const supplementalFiles = await filterFilesByID(supplementalFileIDs, 'supplemental_images', offset, limit);
+    const unsortedFiles = await filterFilesByID(unsortedFileIDs, null, offset, limit);
+
+    // stream archive data for either single file or compressed image folder
+    return singleFile
+        ? await streamArchive(res, {file: [singleFile]}, version)
+        : await streamArchive(res, {
+            'historic_images': historicFiles.results,
+            'modern_images': modernFiles.results,
+            'unsorted_images': unsortedFiles.results,
+            'metadata_files': metadataFiles.results,
+            'supplemental_files': supplementalFiles.results,
+        }, version);
+}
 

From d87cbbaf74da6ca6943bb508da555ba48d9ab158 Mon Sep 17 00:00:00 2001
From: Spencer Rose <spencerrose@uvic.ca>
Date: Fri, 3 Nov 2023 13:39:29 -0700
Subject: [PATCH 2/3] Use medium versions for public image downloads.

---
 src/controllers/files.controller.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/controllers/files.controller.js b/src/controllers/files.controller.js
index ad86db5..0ef89b6 100644
--- a/src/controllers/files.controller.js
+++ b/src/controllers/files.controller.js
@@ -499,7 +499,7 @@ export default function FilesController(modelType) {
         const client = await pool.connect();
 
         try {
-            await fserve.bulkDownload(req, res, next, 'full', client);
+            await fserve.bulkDownload(req, res, next, 'medium', client);
         } catch (err) {
             return next(err);
         } finally {

From e3752b7eccc41e227324bda5d2c9dc17f0b5554c Mon Sep 17 00:00:00 2001
From: Spencer Rose <spencerrose@uvic.ca>
Date: Fri, 3 Nov 2023 14:00:21 -0700
Subject: [PATCH 3/3] Fix missing db client in downloads service.

---
 client/src/_components/menus/viewer.menu.js   | 24 +++++++++----------
 .../src/_components/tools/download.tools.js   |  2 +-
 src/controllers/files.controller.js           |  6 +++--
 src/services/files.services.js                |  1 +
 4 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/client/src/_components/menus/viewer.menu.js b/client/src/_components/menus/viewer.menu.js
index f67be4b..38a9e85 100644
--- a/client/src/_components/menus/viewer.menu.js
+++ b/client/src/_components/menus/viewer.menu.js
@@ -58,6 +58,18 @@ const ViewerPanelMenu = () => {
     return <div className={'viewer-menu'}>
         <div className={'h-menu'}>
             <ul>
+                {
+                    (nav.downloads || []).length > 0 &&
+                    <li key={`${menuID}_menuitem_attached_downloads`}>
+                        <Button
+                            icon={'download'}
+                            label={!nav.compact && 'Download Package'}
+                            className={styles.active}
+                            title={`Bulk download selected files.`}
+                            onClick={() => {dialog.setCurrent({dialogID: 'bulk_download_selections'})}}
+                        />
+                    </li>
+                }
                 {
                     isAdmin && <li className={user ? 'push' : ''}>
                         <Dropdown
@@ -76,18 +88,6 @@ const ViewerPanelMenu = () => {
                             }]} />
                     </li>
                 }
-                {
-                    (nav.downloads || []).length > 0 &&
-                    <li key={`${menuID}_menuitem_attached_downloads`}>
-                        <Button
-                            icon={'download'}
-                            label={!nav.compact && 'Download Package'}
-                            className={styles.active}
-                            title={`Bulk download selected files.`}
-                            onClick={() => {dialog.setCurrent({dialogID: 'bulk_download_selections'})}}
-                        />
-                    </li>
-                }
                 <li className={'push'}>
                     <Button
                         icon={'sync'}
diff --git a/client/src/_components/tools/download.tools.js b/client/src/_components/tools/download.tools.js
index 6378823..6bf3ba5 100644
--- a/client/src/_components/tools/download.tools.js
+++ b/client/src/_components/tools/download.tools.js
@@ -259,7 +259,7 @@ const Downloader = ({id}) => {
      */
     const _handleCallback = (err) => {
         if (!id) nav.clearDownloads();
-        err ? setMessage(err) : dialog.cancel();
+        // err ? setMessage(err) : dialog.cancel();
     }
 
     /**
diff --git a/src/controllers/files.controller.js b/src/controllers/files.controller.js
index 0ef89b6..e22533f 100644
--- a/src/controllers/files.controller.js
+++ b/src/controllers/files.controller.js
@@ -45,12 +45,14 @@ export default function FilesController(modelType) {
 
     this.init = async () => {
         try {
+            // ignore if no model type provided
+            if (!modelType) return;
             // generate model constructor
             Model = await db.model.create(modelType);
             model = new Model();
             mserve = new ModelServices(new Model());
         } catch (err) {
-            console.error(err)
+            console.error(err);
         }
     };
 
@@ -522,7 +524,7 @@ export default function FilesController(modelType) {
         const client = await pool.connect();
 
         try {
-            await fserve.bulkDownload(req, res, next, 'raw');
+            await fserve.bulkDownload(req, res, next, 'raw', client);
         } catch (err) {
             return next(err);
         } finally {
diff --git a/src/services/files.services.js b/src/services/files.services.js
index cf53c8f..09bbb6c 100644
--- a/src/services/files.services.js
+++ b/src/services/files.services.js
@@ -1046,6 +1046,7 @@ export const streamDownload = (res, buffer) => {
  * @param res
  * @param next
  * @param version
+ * @param client
  */
 
 export const bulkDownload = async (req, res, next, version, client) => {