Skip to content

⬅️ Back to Table of Contents

📄 useFileSystemAccess

📊 Analysis Summary

Metric Count
🔧 Functions 7
📦 Imports 12
⚡ Async/Await Patterns 6
🟢 Vue Composition API 5
📐 Interfaces 6
📑 Type Aliases 4

📚 Table of Contents

🛠️ File Location:

📂 packages/core/useFileSystemAccess/index.ts

📦 Imports

Name Source
Awaitable @vueuse/shared
ComputedRef vue
MaybeRefOrGetter vue
ShallowRef vue
ConfigurableWindow ../_configurable
Supportable ../types
computed vue
shallowRef vue
toValue vue
watch vue
defaultWindow ../_configurable
useSupported ../useSupported

Async/Await Patterns

Type Function Await Expressions Promise Chains
async-function open window.showOpenFilePicker({ ...toValue(options), ..._options }), updateData() none
async-function create (window as FileSystemAccessWindow).showSaveFilePicker({ ...options, ..._optio... none
async-function save fileHandle.value.createWritable(), writableStream.write(data.value), writable... none
async-function saveAs (window as FileSystemAccessWindow).showSaveFilePicker({ ...options, ..._optio... none
async-function updateFile fileHandle.value?.getFile() none
async-function updateData updateFile(), file.value?.text(), file.value?.arrayBuffer() none

Vue Composition API

Name Type Reactive Variables Composables
computed computed none none
computed computed none none
computed computed none none
computed computed none none
watch watch none none

Functions

useFileSystemAccess(): UseFileSystemAccessReturn<string | ArrayBuffer | Blob>

Create and read and write local files.

See: https://vueuse.org/useFileSystemAccess

Raw JSDoc 
/**
 * Create and read and write local files.
 * @see https://vueuse.org/useFileSystemAccess
 */
Code 
export function useFileSystemAccess(): UseFileSystemAccessReturn<string | ArrayBuffer | Blob>

Internal helpers

Declared inside another function in this file.

open(_options: UseFileSystemAccessCommonOptions): Promise<void>

Parameters:

  • _options UseFileSystemAccessCommonOptions

Returns: Promise<void>

Calls:

  • window.showOpenFilePicker
  • toValue (from vue)
  • updateData
Code 
async function open(_options: UseFileSystemAccessCommonOptions = {}) {
    if (!isSupported.value)
      return
    const [handle] = await window.showOpenFilePicker({ ...toValue(options), ..._options })
    fileHandle.value = handle
    await updateData()
  }

create(_options: UseFileSystemAccessShowSaveFileOptions): Promise<void>

Parameters:

  • _options UseFileSystemAccessShowSaveFileOptions

Returns: Promise<void>

Calls:

  • (window as FileSystemAccessWindow).showSaveFilePicker
  • updateData
Code 
async function create(_options: UseFileSystemAccessShowSaveFileOptions = {}) {
    if (!isSupported.value)
      return
    fileHandle.value = await (window as FileSystemAccessWindow).showSaveFilePicker({ ...options, ..._options })
    data.value = undefined
    await updateData()
  }

save(_options: UseFileSystemAccessShowSaveFileOptions): Promise<void>

Parameters:

  • _options UseFileSystemAccessShowSaveFileOptions

Returns: Promise<void>

Calls:

  • saveAs
  • fileHandle.value.createWritable
  • writableStream.write
  • writableStream.close
  • updateFile

Internal Comments: 

// save as

Code 
async function save(_options: UseFileSystemAccessShowSaveFileOptions = {}) {
    if (!isSupported.value)
      return

    if (!fileHandle.value)
    // save as
      return saveAs(_options)

    if (data.value) {
      const writableStream = await fileHandle.value.createWritable()
      await writableStream.write(data.value)
      await writableStream.close()
    }
    await updateFile()
  }

saveAs(_options: UseFileSystemAccessShowSaveFileOptions): Promise<void>

Parameters:

  • _options UseFileSystemAccessShowSaveFileOptions

Returns: Promise<void>

Calls:

  • (window as FileSystemAccessWindow).showSaveFilePicker
  • fileHandle.value.createWritable
  • writableStream.write
  • writableStream.close
  • updateFile
Code 
async function saveAs(_options: UseFileSystemAccessShowSaveFileOptions = {}) {
    if (!isSupported.value)
      return

    fileHandle.value = await (window as FileSystemAccessWindow).showSaveFilePicker({ ...options, ..._options })

    if (data.value) {
      const writableStream = await fileHandle.value.createWritable()
      await writableStream.write(data.value)
      await writableStream.close()
    }

    await updateFile()
  }

updateFile(): Promise<void>

Returns: Promise<void>

Calls:

  • fileHandle.value?.getFile
Code 
async function updateFile() {
    file.value = await fileHandle.value?.getFile()
  }

updateData(): Promise<void>

Returns: Promise<void>

Calls:

  • updateFile
  • toValue (from vue)
  • file.value?.text
  • file.value?.arrayBuffer
Code 
async function updateData() {
    await updateFile()
    const type = toValue(dataType)
    if (type === 'Text')
      data.value = await file.value?.text()
    else if (type === 'ArrayBuffer')
      data.value = await file.value?.arrayBuffer()
    else if (type === 'Blob')
      data.value = file.value
  }

Interfaces

FileSystemAccessShowOpenFileOptions

Interface Code 
export interface FileSystemAccessShowOpenFileOptions {
  multiple?: boolean
  types?: Array<{
    description?: string
    accept: Record<string, string[]>
  }>
  excludeAcceptAllOption?: boolean
}

Properties

Name Type Optional Description
multiple boolean ✓ not shown
types Array<{ description?: string accept: Record<string, string[]> }> ✓ not shown
excludeAcceptAllOption boolean ✓ not shown

FileSystemAccessShowSaveFileOptions

Interface Code 
export interface FileSystemAccessShowSaveFileOptions {
  suggestedName?: string
  types?: Array<{
    description?: string
    accept: Record<string, string[]>
  }>
  excludeAcceptAllOption?: boolean
}

Properties

Name Type Optional Description
suggestedName string ✓ not shown
types Array<{ description?: string accept: Record<string, string[]> }> ✓ not shown
excludeAcceptAllOption boolean ✓ not shown

FileSystemFileHandle

Interface Code 
export interface FileSystemFileHandle {
  getFile: () => Promise<File>
  createWritable: () => FileSystemWritableFileStream
}

Properties

Name Type Optional Description
getFile () => Promise<File> ✗ not shown
createWritable () => FileSystemWritableFileStream ✗ not shown

FileSystemWritableFileStream

Interface Code 
interface FileSystemWritableFileStream extends WritableStream {
  /**
   * @see https://developer.mozilla.org/en-US/docs/Web/API/FileSystemWritableFileStream/write
   */
  write: FileSystemWritableFileStreamWrite
  /**
   * @see https://developer.mozilla.org/en-US/docs/Web/API/FileSystemWritableFileStream/seek
   */
  seek: (position: number) => Promise<void>
  /**
   * @see https://developer.mozilla.org/en-US/docs/Web/API/FileSystemWritableFileStream/truncate
   */
  truncate: (size: number) => Promise<void>
}

Properties

Name Type Optional Description
write FileSystemWritableFileStreamWrite ✗ not shown
seek (position: number) => Promise<void> ✗ not shown
truncate (size: number) => Promise<void> ✗ not shown

FileSystemWritableFileStreamWrite

Interface Code 
interface FileSystemWritableFileStreamWrite {
  (data: string | BufferSource | Blob): Promise<void>
  (options: { type: 'write', position: number, data: string | BufferSource | Blob }): Promise<void>
  (options: { type: 'seek', position: number }): Promise<void>
  (options: { type: 'truncate', size: number }): Promise<void>
}

UseFileSystemAccessReturn<T = string>

Interface Code 
export interface UseFileSystemAccessReturn<T = string> extends Supportable {
  data: ShallowRef<T | undefined>
  file: ShallowRef<File | undefined>
  fileName: ComputedRef<string>
  fileMIME: ComputedRef<string>
  fileSize: ComputedRef<number>
  fileLastModified: ComputedRef<number>
  open: (_options?: UseFileSystemAccessCommonOptions) => Awaitable<void>
  create: (_options?: UseFileSystemAccessShowSaveFileOptions) => Awaitable<void>
  save: (_options?: UseFileSystemAccessShowSaveFileOptions) => Awaitable<void>
  saveAs: (_options?: UseFileSystemAccessShowSaveFileOptions) => Awaitable<void>
  updateData: () => Awaitable<void>
}

Properties

Name Type Optional Description
data ShallowRef<T \| undefined> ✗ not shown
file ShallowRef<File \| undefined> ✗ not shown
fileName ComputedRef<string> ✗ not shown
fileMIME ComputedRef<string> ✗ not shown
fileSize ComputedRef<number> ✗ not shown
fileLastModified ComputedRef<number> ✗ not shown
open (_options?: UseFileSystemAccessCommonOptions) => Awaitable<void> ✗ not shown
create (_options?: UseFileSystemAccessShowSaveFileOptions) => Awaitable<void> ✗ not shown
save (_options?: UseFileSystemAccessShowSaveFileOptions) => Awaitable<void> ✗ not shown
saveAs (_options?: UseFileSystemAccessShowSaveFileOptions) => Awaitable<void> ✗ not shown
updateData () => Awaitable<void> ✗ not shown

Type Aliases

FileSystemAccessWindow

/* * FileStream.write * @see https://developer.mozilla.org/en-US/docs/Web/API/FileSystemWritableFileStream/write /

type FileSystemAccessWindow = Window & {
  showSaveFilePicker: (options: FileSystemAccessShowSaveFileOptions) => Promise<FileSystemFileHandle>
  showOpenFilePicker: (options: FileSystemAccessShowOpenFileOptions) => Promise<FileSystemFileHandle[]>
};

UseFileSystemAccessCommonOptions

type UseFileSystemAccessCommonOptions = Pick<FileSystemAccessShowOpenFileOptions, 'types' | 'excludeAcceptAllOption'>;

UseFileSystemAccessShowSaveFileOptions

type UseFileSystemAccessShowSaveFileOptions = Pick<FileSystemAccessShowSaveFileOptions, 'suggestedName'>;

UseFileSystemAccessOptions

type UseFileSystemAccessOptions = ConfigurableWindow & UseFileSystemAccessCommonOptions & {
  /**
   * file data type
   */
  dataType?: MaybeRefOrGetter<'Text' | 'ArrayBuffer' | 'Blob'>
};

Generated by Syntax Scribe