upload button

frontend/src/sidebar/Sidebar.jsx

@@ -16,6 +16,7 @@ import {
   SunIcon,
   MoonIcon,
   DesktopIcon,
+  UploadIcon,
 } from '../ui/icons';
 import PanelHeader from '../ui/PanelHeader';
 import useFloatingMenu from '../ui/useFloatingMenu';
@@ -187,6 +188,8 @@ const Sidebar = ({
   activeTenantId = null,
   onSelectTenant,
   onOpenSettings,
+  onUploadFiles,
+  loading = false,
 }) => {
   const {
     setCollapsed,
@@ -197,6 +200,7 @@ const Sidebar = ({
     cycleThemeMode,
     themeModes,
   } = useSidebarContext();
+  const uploadInputRef = useRef(null);
   const handleCollapse = useCallback(() => {
     setCollapsed(true);
   }, [setCollapsed]);
@@ -258,6 +262,26 @@ const Sidebar = ({
     onCreateFolder?.();
   }, [creatingFolder, onCreateFolder]);
 
+  const handleUploadButtonClick = useCallback(() => {
+    if (!onUploadFiles || !uploadInputRef.current) {
+      return;
+    }
+    uploadInputRef.current.click();
+  }, [onUploadFiles]);
+
+  const handleUploadInputChange = useCallback(
+    (event) => {
+      const files = event.target?.files;
+      if (files && files.length && onUploadFiles) {
+        onUploadFiles(files, selectedFolder);
+      }
+      if (event.target) {
+        event.target.value = '';
+      }
+    },
+    [onUploadFiles, selectedFolder],
+  );
+
   const handleNeutralHueReset = useCallback(() => {
     resetNeutralHue();
   }, [resetNeutralHue]);
@@ -448,6 +472,13 @@ const Sidebar = ({
 
   return (
     <aside className="sidebar">
+      <input
+        type="file"
+        ref={uploadInputRef}
+        style={{ display: 'none' }}
+        multiple
+        onChange={handleUploadInputChange}
+      />
       <PanelHeader
         className="sidebar__header"
         leading={(
@@ -530,24 +561,31 @@ const Sidebar = ({
               : null}
           </>
         )}
-        actions={
-            handleCollapse
-            ? [
-                (
-                  <button
-                    key="collapse"
-                    type="button"
-                    className="icon-button"
-                    onClick={handleCollapse}
-                    aria-label="Collapse sidebar"
-                    title="Collapse sidebar"
-                  >
-                    <SidebarCollapseIcon />
-                  </button>
-                ),
-              ]
-            : null
-        }
+        actions={(
+          <>
+            <button
+              type="button"
+              className="icon-button"
+              onClick={handleUploadButtonClick}
+              disabled={!onUploadFiles || loading}
+              title="Upload documents"
+              aria-label="Upload documents"
+            >
+              <UploadIcon size={18} />
+            </button>
+            {handleCollapse ? (
+              <button
+                type="button"
+                className="icon-button"
+                onClick={handleCollapse}
+                aria-label="Collapse sidebar"
+                title="Collapse sidebar"
+              >
+                <SidebarCollapseIcon />
+              </button>
+            ) : null}
+          </>
+        )}
       />
       <div className="panel-body sidebar__body">
         {status && (

frontend/src/sidebar/useSidebarProps.js

@@ -35,6 +35,7 @@ const useSidebarProps = ({
   currentTenantId,
   handleTenantSelect,
   openSettings,
+  handleFileSelection,
 }) =>
   useMemo(
     () => ({
@@ -76,8 +77,19 @@ const useSidebarProps = ({
       activeTenantId: currentTenantId,
       onSelectTenant: handleTenantSelect,
       onOpenSettings: openSettings,
+      onUploadFiles: (files, targetFolderId) => {
+        if (!handleFileSelection) {
+          return;
+        }
+        if (!files || files.length === 0) {
+          return;
+        }
+        const folderId = targetFolderId ?? selectedFolder ?? 'root';
+        handleFileSelection(files, folderId);
+      },
     }),
     [
+      handleFileSelection,
       activeCorrespondentFilters,
       activeTagFilters,
       appStatus,