File Manager

<script setup lang="ts">
import { FileManager, type FileManagerItem } from '@/components/ui/file-manager'

const files: FileManagerItem[] = [
  {
    id: 'src',
    name: 'src',
    type: 'folder',
    children: [
      { id: 'src/App.vue', name: 'App.vue', type: 'file', size: 734 },
      { id: 'src/main.ts', name: 'main.ts', type: 'file', size: 298 },
    ],
  },
  { id: 'package.json', name: 'package.json', type: 'file', size: 1087 },
]
</script>

<template>
  <FileManager :items="files" class="h-[480px]" />
</template>

<template>
  <FileManager
    :items="files"
    @upload="upload"
    @create-folder="createFolder"
    @create-file="createFile"
    @rename="rename"
    @move="move"
    @paste="paste"
    @duplicate="duplicate"
    @download="download"
    @preview="preview"
    @open="open"
    @trash="trash"
    @restore="restore"
    @delete-permanently="purge"
    @empty-trash="emptyTrash"
    @share="share"
    @copy-link="copyLink"
    @favorite="star"
    @unfavorite="unstar"
    @properties="showProperties"
    @refresh="refresh"
  />
</template>

<script setup lang="ts">
import type { FileManagerItem, FileManagerOperationContext } from '@/components/ui/file-manager'

async function download({ items }: { items: FileManagerItem[] }, context: FileManagerOperationContext) {
  const response = await fetch('/api/archive', {
    method: 'POST',
    body: JSON.stringify(items.map(item => item.id)),
    signal: context.signal, // Cancel aborts the request
  })
  const reader = response.body!.getReader()
  const total = Number(response.headers.get('content-length'))
  let received = 0
  for (;;) {
    const { done, value } = await reader.read()
    if (done) break
    received += value.length
    context.progress((received / total) * 100)
  }
  // Saving the file is your call — the file manager never downloads anything.
}
</script>

<template>
  <FileManager :items="files" @download="download" />
</template>

<script setup lang="ts">
async function upload(files: File[], folder: FileManagerItem | null, context: FileManagerUploadContext) {
  const results = await Promise.allSettled(files.map((file, i) =>
    storage.put(folder?.id ?? '', context.relativePaths[i] || file.name, file, { signal: context.signal })))

  files.value = await storage.list()
  return {
    failed: results.flatMap((result, i) =>
      result.status === 'rejected' ? [{ source: files[i], error: String(result.reason) }] : []),
  }
}
</script>

<template>
  <FileManager :items="files" @upload="upload" @operation-error="op => logger.warn(op)" />
</template>

<script setup lang="ts">
import type { FileManagerOperationState } from '@/components/ui/file-manager'

const operations = computed<FileManagerOperationState[]>(() =>
  uploads.value.map(upload => ({
    id: upload.id,
    type: 'upload',
    status: upload.error ? 'error' : upload.done ? 'success' : 'running',
    label: `Uploading ${upload.name}`,
    progress: upload.percent,
    error: upload.error,
    itemIds: [upload.placeholderId],
    cancelable: true,
    retryable: true,
  })))
</script>

<template>
  <FileManager
    :items="files"
    :operations="operations"
    @cancel-operation="op => uploader.cancel(op.id)"
    @retry-operation="op => uploader.retry(op.id)"
    @dismiss-operation="op => uploader.forget(op.id)"
  />
</template>

<script setup lang="ts">
async function trash({ items }: FileManagerItemsEvent) {
  const ids = items.map(item => item.id)
  await api.trash(ids)
  files.value = await api.tree()
  return {
    message: `Moved ${ids.length} items to Trash`,
    undo: async () => {
      await api.restore(ids)
      files.value = await api.tree()
      return { undo: () => trash({ items }) } // redo
    },
  }
}
</script>

<script setup lang="ts">
import type { FileManagerClipboard, FileManagerPasteEvent } from '@/components/ui/file-manager'

const clipboard = ref<FileManagerClipboard | null>(null)

async function paste({ items, target, operation, conflicts }: FileManagerPasteEvent, context: FileManagerOperationContext) {
  await (operation === 'cut' ? api.move : api.copy)({
    ids: items.map(item => item.id),
    to: target?.id ?? null,
    // e.g. [{ conflict, action: 'keep-both', name: 'report (1).pdf' }]
    conflicts: conflicts.map(({ conflict, action, name }) => ({ id: (conflict.source as FileManagerItem).id, action, name })),
  }, { signal: context.signal })
  files.value = await api.tree()
}
</script>

<template>
  <!-- Two panes sharing one clipboard -->
  <FileManager v-model:clipboard="clipboard" :items="files" @paste="paste" />
  <FileManager v-model:clipboard="clipboard" :items="files" @paste="paste" />
</template>

<script setup lang="ts">
async function move(event: FileManagerMoveEvent, context: FileManagerOperationContext) {
  const { clashes } = await api.checkMove(event)
  if (clashes.length) {
    const choices = await context.resolveConflicts(clashes.map(clash => ({
      name: clash.name,
      source: event.items.find(item => item.id === clash.id)!,
      destination: null,
      target: event.target,
      reason: clash.locked ? 'permission' : 'exists',
    })))
    if (!choices) return // the user canceled
  }
  await api.move(event)
}
</script>

<script setup lang="ts">
import { isPotentiallyUnsafe } from '@/components/ui/file-manager'

function open(item: FileManagerItem) {
  if (isPotentiallyUnsafe(item) && !confirm(`${item.name} is an application. Open it anyway?`)) return
  router.push(`/files/${item.id}`)
}
</script>

<template>
  <FileManager
    :items="files"
    @open="open"
    @preview="({ item }) => (quickLook = item)"
    @download="({ items }) => api.download(items)"
    @duplicate="({ items }) => api.duplicate(items)"
  />
  <MyQuickLook v-model:item="quickLook" />
</template>

const files: FileManagerItem[] = [
  {
    id: 'shared',
    name: 'Shared with me',
    type: 'folder',
    owner: 'Ada',
    permissions: { write: false, delete: false, rename: false, move: false },
    children: [
      { id: 'shared/roadmap.xlsx', name: 'roadmap.xlsx', type: 'file', permissions: { download: false } },
    ],
  },
]

<template>
  <FileManager
    v-model:location="location"
    :items="files"
    :listing="location === 'trash' ? { items: trashed, trash: true } : null"
    :locations="[{ locations: [{ id: 'trash', label: 'Trash', icon: Trash2, trash: true }] }]"
    @trash="({ items }) => api.trash(items)"
    @restore="({ items }) => api.restore(items)"
    @delete-permanently="({ items }) => api.purge(items)"
    @empty-trash="() => api.emptyTrash()"
  />
</template>

<template>
  <FileManager
    :items="files"
    :favorites="starred"
    @favorite="({ items }) => starred.push(...items.map(item => item.id))"
    @unfavorite="({ items }) => (starred = starred.filter(id => !items.some(item => item.id === id)))"
  />
</template>

<script setup lang="ts">
import { Clock, House, Star, Trash2 } from 'lucide-vue-next'

const location = ref<string | null>(null)
const locations = [
  { label: 'Quick access', locations: [
    { id: 'home', label: 'Home', icon: House, folder: null },
    { id: 'recent', label: 'Recent', icon: Clock },
    { id: 'starred', label: 'Starred', icon: Star },
    { id: 'trash', label: 'Trash', icon: Trash2, trash: true },
  ] },
  { label: 'Locations', locations: [
    { id: 'drive', label: 'My Drive', folder: 'drive-root' },
    { id: 'team', label: 'Team Drive', folder: 'team-root' },
  ] },
]

const { data: listing, pending } = useAsyncData(
  () => (location.value ? api.listing(location.value) : Promise.resolve(null)),
  { watch: [location] },
)
</script>

<template>
  <FileManager v-model:location="location" :items="files" :locations="locations" :listing="listing" :loading="pending" />
</template>

<script setup lang="ts">
const files = ref<FileManagerItem[]>(await api.list(null)) // top level only

async function loadChildren(folder: FileManagerItem, context: FileManagerOperationContext) {
  const children = await api.list(folder.id, { signal: context.signal })
  files.value = setChildren(files.value, folder.id, children) // your immutable update
}
</script>

<template>
  <FileManager :items="files" @load-children="loadChildren" />
</template>

<script setup lang="ts">
async function loadMore({ folder, cursor }: FileManagerLoadMoreEvent) {
  const page = await api.list(folder?.id ?? null, { cursor })
  files.value = appendChildren(files.value, folder?.id ?? null, page.items, {
    hasMore: page.next !== null,
    cursor: page.next,
  })
}
</script>

<template>
  <FileManager :items="files" @load-more="loadMore" />
</template>

<script setup lang="ts">
const results = ref<FileManagerListing | null>(null)

async function search({ query, folder }: FileManagerSearchEvent, context: FileManagerOperationContext) {
  results.value = query
    ? { label: `Results for “${query}”`, items: await api.search(query, { within: folder?.id, signal: context.signal }) }
    : null
}
</script>

<template>
  <FileManager :items="files" :listing="results" remote-search @search="search" />
</template>

<script setup lang="ts">
// Resizing and reordering update this list. To keep the layout across visits,
// store each column's key and width (functions such as `value` cannot be stored).
const columns = ref<(FileManagerColumnKey | FileManagerColumn<Meta>)[]>([
  'name',
  'owner',
  'modified',
  { key: 'version', label: 'Version', width: '5rem', value: (item: FileManagerItem<Meta>) => item.data?.version },
  { key: 'status', label: 'Sync', width: '6rem', pinned: true },
  'size',
])
</script>

<template>
  <!-- v-model: resized and reordered columns come back as the new list. -->
  <FileManager v-model:columns="columns" :items="files" default-view="list">
    <template #cell="{ item, column }">
      <SyncBadge v-if="column.key === 'status'" :state="item.data?.sync" />
    </template>
  </FileManager>
</template>

<script setup lang="ts">
import { ContextMenuItem, ContextMenuSeparator } from '@/components/ui/context-menu'
</script>

<template>
  <FileManager ref="file manager" :items="files" @paste="paste" @download="download">
    <template #context-menu="{ item, actions, defer }">
      <ContextMenuItem v-for="action in actions" :key="action.id" :disabled="action.disabled" @select="action.run()">
        <component :is="action.icon" /> {{ action.label }}
      </ContextMenuItem>
      <ContextMenuSeparator />
      <ContextMenuItem v-if="item" @select="defer(() => openVersionHistory(item))">Version history…</ContextMenuItem>
    </template>
  </FileManager>
</template>

<template>
  <FileManager ref="file manager" :items="files" command-palette @paste="paste" @rename="rename" />
  <Button @click="file manager?.openCommandPalette()">Commands</Button>
</template>

<template>
  <!-- Nothing to configure: touch works wherever `draggable` and @move do. -->
  <FileManager :items="files" draggable @move="move" />
</template>

// A page at a time: the file manager asks for the next one as the end scrolls into view.
async function loadMore({ folder, cursor }: FileManagerLoadMoreEvent) {
  const page = await api.list(folder?.id ?? null, { cursor, limit: 500 })
  files.value = appendChildren(files.value, folder?.id ?? null, page.items, { hasMore: page.next !== null, cursor: page.next })
}

<template>
  <FileManager
    :items="files"
    accept="image/*,.pdf"
    :max-file-size="50 * 1024 * 1024"
    directory-upload
    @upload="(files, folder, context) => storage.upload(files, folder, context)"
  />
</template>

<script setup lang="ts">
import type { FileManagerMessages } from '@/components/ui/file-manager'

const messages: Partial<FileManagerMessages> = {
  newFolder: 'Nouveau dossier',
  upload: 'Téléverser',
  items: count => `${count} élément${count > 1 ? 's' : ''}`,
  deleteTitle: items => `Supprimer ${items.length} élément(s) ?`,
  justNow: 'à l’instant',
  timeAgo: (value, unit) => `il y a ${value} ${{ minute: 'min', hour: 'h', day: 'j', week: 'sem.', month: 'mois', year: 'an' }[unit]}`,
  fileSize: (value, unit) => `${value.replace('.', ',')} ${{ B: 'o', KB: 'Ko', MB: 'Mo', GB: 'Go', TB: 'To' }[unit]}`,
}
</script>

<template>
  <FileManager :items="files" :messages="messages" dir="rtl" />
</template>

<script setup lang="ts">
import { FileTree } from '@/components/ui/file-manager'
</script>

<template>
  <FileTree
    v-model:selected="selected"
    v-model:expanded="expanded"
    :items="files"
    searchable
    @rename="(item, name) => api.rename(item.id, name)"
    @load-children="folder => api.loadChildren(folder)"
    class="h-80"
  />
</template>