❯
fn

useFileSystemAccess

v0.0.14testeddemo

Create, read, and write local files via the File System Access API.

Source Tests

Examples

ts
const { isSupported, data, open, save } = useFileSystemAccess({ dataType: 'Text' });
await open();
data.value += '\nappended';
await save();
ts
// Read raw bytes
const { data } = useFileSystemAccess({ dataType: 'ArrayBuffer' });

Demo

Loading demo…

Signatures

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

Parameters

ParameterTypeDescription
options?UseFileSystemAccessOptionsOptions including dataType, types, excludeAcceptAllOption, and onError

Returns

UseFileSystemAccessReturn<string | ArrayBuffer | Blob>isSupported, data, file, fileName, fileMIME, fileSize, fileLastModified, open, create, save, saveAs, updateData
PropertyTypeDescription
isSupportedComputedRef<boolean>Whether the File System Access API is available.
dataShallowRef<T | undefined>The current file contents, read according to dataType.
fileShallowRef<File | undefined>The currently bound File, or undefined when no file is open.
fileNameComputedRef<string>The current file name (empty string when no file is open).
fileMIMEComputedRef<string>The current file MIME type (empty string when no file is open).
fileSizeComputedRef<number>The current file size in bytes (0 when no file is open).
fileLastModifiedComputedRef<number>The current file's last-modified timestamp (0 when no file is open).
open(options?: UseFileSystemAccessCommonOptions) => Promise<void>Show the open-file picker and load the chosen file.
create(options?: UseFileSystemAccessShowSaveFileOptions) => Promise<void>Show the save-file picker to create a new, empty file handle.
save(options?: UseFileSystemAccessShowSaveFileOptions) => Promise<void>Write data back to the current handle (falls back to saveAs when none).
saveAs(options?: UseFileSystemAccessShowSaveFileOptions) => Promise<void>Show the save-file picker, then write data to the chosen handle.
updateData() => Promise<void>Re-read data (and metadata) from the current handle.