useFileSystemAccess

Category

Browser

Export Size

775 B

Last Changed

5 days ago

Create and read and write local files with FileSystemAccessAPI

Demo

Usage

import { useFileSystemAccess } from '@reause/core'

const [data, setData, {
  isSupported,
  file,
  fileName,
  fileMIME,
  fileSize,
  fileLastModified,
  open,
  create,
  save,
  saveAs,
  updateData,
}] = useFileSystemAccess()

function handleOpen() {
  await open() // native "open file" picker → reads the file into `data`
}

function handleSave() {
  await save() // writes `data` to the current handle
}

Type Declarations

Toggle

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

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

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

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

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

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

export type UseFileSystemAccessOptions = ConfigurableWindow & UseFileSystemAccessCommonOptions & {
    dataType?: 'Text' | 'ArrayBuffer' | 'Blob';
}

export interface UseFileSystemAccessControls {
    isSupported: boolean;
    file: File | undefined;
    fileName: string;
    fileMIME: string;
    fileSize: number;
    fileLastModified: number;
    open: (_options?: UseFileSystemAccessCommonOptions) => Promise<void>;
    create: (_options?: UseFileSystemAccessShowSaveFileOptions) => Promise<void>;
    save: (_options?: UseFileSystemAccessShowSaveFileOptions) => Promise<void>;
    saveAs: (_options?: UseFileSystemAccessShowSaveFileOptions) => Promise<void>;
    updateData: () => Promise<void>;
}

export type UseFileSystemAccessReturn<T = string> = readonly [
    data: T | undefined,
    setData: Dispatch<SetStateAction<T | undefined>>,
    controls: UseFileSystemAccessControls
]

interface FileSystemWritableFileStream extends WritableStream {
    write: FileSystemWritableFileStreamWrite;
    seek: (position: number) => Promise<void>;
    truncate: (size: number) => Promise<void>;
}

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

export function useFileSystemAccess(options: UseFileSystemAccessOptions & {
    dataType: 'Text';
}): UseFileSystemAccessReturn<string>

export function useFileSystemAccess(options: UseFileSystemAccessOptions & {
    dataType: 'ArrayBuffer';
}): UseFileSystemAccessReturn<ArrayBuffer>

export function useFileSystemAccess(options: UseFileSystemAccessOptions & {
    dataType: 'Blob';
}): UseFileSystemAccessReturn<Blob>

export function useFileSystemAccess(options: UseFileSystemAccessOptions): UseFileSystemAccessReturn<string | ArrayBuffer | Blob>

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

2c491 - fix(core): resolve useFileSystemAccess audit findings (#559)

3288f - feat(core): add useFileSystemAccess (#130)