-
+
+
shell
@@ -461,10 +610,62 @@ export default function BoxDetails() {
{getBoxPublicIdLabel(box)}
+
+ {hasFilesCurrentDir && (
+
+
+
+ {uploadDestinationBlockedReason ? 'Upload disabled for' : 'Drag files/folders to'}
+
+
+ {uploadDestinationDir}
+
+
+ )}
+
+
-
+
+ {isShellDragging && canDragUpload && (
+
{
+ event.preventDefault()
+ event.dataTransfer.dropEffect = 'copy'
+ setIsShellDragging(true)
+ }}
+ onDragLeave={(event) => {
+ if (!isInsideShellDropTarget(event.nativeEvent)) setIsShellDragging(false)
+ }}
+ onDrop={async (event) => {
+ event.preventDefault()
+ event.stopPropagation()
+ setIsShellDragging(false)
+ await handleDroppedDataTransfer(event.dataTransfer)
+ }}
+ >
+ {`Drop to upload into ${uploadDestinationDir}`}
+
+ )}
diff --git a/apps/dashboard/src/components/boxes/BoxFileUploadControl.tsx b/apps/dashboard/src/components/boxes/BoxFileUploadControl.tsx
new file mode 100644
index 000000000..a0c2a1268
--- /dev/null
+++ b/apps/dashboard/src/components/boxes/BoxFileUploadControl.tsx
@@ -0,0 +1,215 @@
+/*
+ * Copyright 2026 BoxLite AI
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+import { Button } from '@/components/ui/button'
+import { Spinner } from '@/components/ui/spinner'
+import {
+ buildBoxUploadItems,
+ createBoxUploadDirectoryItem,
+ createBoxUploadFileItem,
+ type BoxUploadFileEntry,
+ type BoxUploadItem,
+} from '@/lib/box-upload'
+import { Icon as IconifyIcon } from '@iconify/react'
+import { useRef } from 'react'
+
+interface BoxFileUploadControlProps {
+ disabled: boolean
+ disabledReason?: string
+ destinationDir: string
+ isUploading: boolean
+ onError: (error: unknown) => void
+ onUpload: (items: BoxUploadItem[]) => void
+}
+
+export function BoxFileUploadControl({
+ disabled,
+ disabledReason,
+ destinationDir,
+ isUploading,
+ onError,
+ onUpload,
+}: BoxFileUploadControlProps) {
+ const fileInputRef = useRef
(null)
+ const directoryInputRef = useRef(null)
+ const isDisabled = disabled || isUploading
+
+ const submitItems = (items: BoxUploadItem[]) => {
+ if (items.length === 0) return
+ onUpload(items)
+ }
+
+ const submitFiles = (fileList: FileList | File[] | null | undefined) => {
+ const files = Array.from(fileList ?? [])
+ if (files.length === 0) return
+ try {
+ submitItems(buildBoxUploadItems(files))
+ } catch (error) {
+ onError(error)
+ }
+ }
+
+ const openFilePicker = () => {
+ if (isDisabled) return
+ fileInputRef.current?.click()
+ }
+
+ const openDirectoryPicker = () => {
+ if (isDisabled) return
+ directoryInputRef.current?.click()
+ }
+
+ return (
+
+ {
+ submitFiles(event.currentTarget.files)
+ event.currentTarget.value = ''
+ }}
+ />
+ {
+ submitFiles(event.currentTarget.files)
+ event.currentTarget.value = ''
+ }}
+ />
+
+
+
+ )
+}
+
+interface UploadFileSystemEntry {
+ isDirectory: boolean
+ isFile: boolean
+ name: string
+}
+
+interface UploadFileSystemFileEntry extends UploadFileSystemEntry {
+ file: (successCallback: (file: File) => void, errorCallback?: (error: DOMException) => void) => void
+}
+
+interface UploadFileSystemDirectoryEntry extends UploadFileSystemEntry {
+ createReader: () => {
+ readEntries: (
+ successCallback: (entries: UploadFileSystemEntry[]) => void,
+ errorCallback?: (error: DOMException) => void,
+ ) => void
+ }
+}
+
+type WebkitDataTransferItem = DataTransferItem & {
+ webkitGetAsEntry?: () => unknown
+}
+
+export async function buildDroppedUploadItems(dataTransfer: DataTransfer): Promise {
+ const entries = Array.from(dataTransfer.items ?? [])
+ .map((item) => ((item as WebkitDataTransferItem).webkitGetAsEntry?.() ?? null) as UploadFileSystemEntry | null)
+ .filter((entry): entry is UploadFileSystemEntry => Boolean(entry))
+
+ if (entries.length === 0) {
+ return buildBoxUploadItems(Array.from(dataTransfer.files ?? []))
+ }
+
+ const items = await Promise.all(entries.map(readEntryAsUploadItem))
+ return items.filter((item): item is BoxUploadItem => Boolean(item))
+}
+
+async function readEntryAsUploadItem(entry: UploadFileSystemEntry): Promise {
+ if (entry.isFile) {
+ return createBoxUploadFileItem(await readFileEntry(entry as UploadFileSystemFileEntry))
+ }
+
+ if (entry.isDirectory) {
+ const files = await readDirectoryFiles(entry as UploadFileSystemDirectoryEntry, '')
+ return files.length > 0 ? createBoxUploadDirectoryItem(entry.name, files) : null
+ }
+
+ return null
+}
+
+function readFileEntry(entry: UploadFileSystemFileEntry): Promise {
+ return new Promise((resolve, reject) => {
+ entry.file(resolve, reject)
+ })
+}
+
+async function readDirectoryFiles(
+ directory: UploadFileSystemDirectoryEntry,
+ prefix: string,
+): Promise {
+ const entries = await readAllDirectoryEntries(directory)
+ const files = await Promise.all(
+ entries.map(async (entry) => {
+ if (entry.isFile) {
+ return [
+ {
+ file: await readFileEntry(entry as UploadFileSystemFileEntry),
+ relativePath: `${prefix}${entry.name}`,
+ },
+ ]
+ }
+
+ if (entry.isDirectory) {
+ return readDirectoryFiles(entry as UploadFileSystemDirectoryEntry, `${prefix}${entry.name}/`)
+ }
+
+ return []
+ }),
+ )
+
+ return files.flat()
+}
+
+function readAllDirectoryEntries(directory: UploadFileSystemDirectoryEntry): Promise {
+ const reader = directory.createReader()
+ const entries: UploadFileSystemEntry[] = []
+
+ return new Promise((resolve, reject) => {
+ const readBatch = () => {
+ reader.readEntries((batch) => {
+ if (batch.length === 0) {
+ resolve(entries)
+ return
+ }
+ entries.push(...batch)
+ readBatch()
+ }, reject)
+ }
+
+ readBatch()
+ })
+}
diff --git a/apps/dashboard/src/components/boxes/BoxTerminalFrame.tsx b/apps/dashboard/src/components/boxes/BoxTerminalFrame.tsx
index 36a1c1285..65091a95a 100644
--- a/apps/dashboard/src/components/boxes/BoxTerminalFrame.tsx
+++ b/apps/dashboard/src/components/boxes/BoxTerminalFrame.tsx
@@ -14,9 +14,10 @@ interface BoxTerminalFrameProps {
sessionUrl: string
fullscreenHref?: string
className?: string
+ onCurrentDirChange?: (path: string) => void
}
-export function BoxTerminalFrame({ sessionUrl, fullscreenHref, className }: BoxTerminalFrameProps) {
+export function BoxTerminalFrame({ sessionUrl, fullscreenHref, className, onCurrentDirChange }: BoxTerminalFrameProps) {
const deregisterRef = useRef<(() => void) | null>(null)
const iframeSrc = buildTerminalIframeSrc(sessionUrl)
@@ -24,7 +25,7 @@ export function BoxTerminalFrame({ sessionUrl, fullscreenHref, className }: BoxT
const frame = event.currentTarget.contentWindow
if (!frame) return
deregisterRef.current?.()
- deregisterRef.current = registerActiveTerminalFrame(frame, sessionUrl)
+ deregisterRef.current = registerActiveTerminalFrame(frame, sessionUrl, { onCurrentDirChange })
}
useEffect(() => {
diff --git a/apps/dashboard/src/components/boxes/BoxTerminalTab.tsx b/apps/dashboard/src/components/boxes/BoxTerminalTab.tsx
index f6d632cb1..bab2716fc 100644
--- a/apps/dashboard/src/components/boxes/BoxTerminalTab.tsx
+++ b/apps/dashboard/src/components/boxes/BoxTerminalTab.tsx
@@ -21,7 +21,13 @@ import { Play, RefreshCw, TerminalSquare } from '@/components/ui/icon'
import { toast } from 'sonner'
import { BoxTerminalFrame } from './BoxTerminalFrame'
-export function BoxTerminalTab({ box, refreshSignal = 0 }: { box: Box; refreshSignal?: number }) {
+interface BoxTerminalTabProps {
+ box: Box
+ refreshSignal?: number
+ onCurrentDirChange?: (path: string) => void
+}
+
+export function BoxTerminalTab({ box, refreshSignal = 0, onCurrentDirChange }: BoxTerminalTabProps) {
const running = isStoppable(box)
const { isTerminalActivated, activateTerminal } = useBoxSessionContext()
const { authenticatedUserHasPermission } = useSelectedOrganization()
@@ -162,6 +168,7 @@ export function BoxTerminalTab({ box, refreshSignal = 0 }: { box: Box; refreshSi
sessionUrl={session.url}
fullscreenHref={fullscreenHref}
className="h-full"
+ onCurrentDirChange={onCurrentDirChange}
/>