1---
2category: Browser
3---
4 
5# useFileSystemAccess
6 
7Create and read and write local files with [FileSystemAccessAPI](https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API)
8 
9## Usage
10 
11```ts
12import { useFileSystemAccess } from '@vueuse/core'
13 
14const {
15  isSupported,
16  data,
17  file,
18  fileName,
19  fileMIME,
20  fileSize,
21  fileLastModified,
22  create,
23  open,
24  save,
25  saveAs,
26  updateData
27} = useFileSystemAccess()
28```
29 
30## Type Declarations
31 
32```ts
33/**
34 * window.showOpenFilePicker parameters
35 * @see https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker#parameters
36 */
37export interface FileSystemAccessShowOpenFileOptions {
38  multiple?: boolean
39  types?: Array<{
40    description?: string
41    accept: Record<string, string[]>
42  }>
43  excludeAcceptAllOption?: boolean
44}
45/**
46 * window.showSaveFilePicker parameters
47 * @see https://developer.mozilla.org/en-US/docs/Web/API/window/showSaveFilePicker#parameters
48 */
49export interface FileSystemAccessShowSaveFileOptions {
50  suggestedName?: string
51  types?: Array<{
52    description?: string
53    accept: Record<string, string[]>
54  }>
55  excludeAcceptAllOption?: boolean
56}
57/**
58 * FileHandle
59 * @see https://developer.mozilla.org/en-US/docs/Web/API/FileSystemFileHandle
60 */
61export interface FileSystemFileHandle {
62  getFile: () => Promise<File>
63  createWritable: () => FileSystemWritableFileStream
64}
65/**
66 * @see https://developer.mozilla.org/en-US/docs/Web/API/FileSystemWritableFileStream
67 */
68interface FileSystemWritableFileStream extends WritableStream {
69  /**
70   * @see https://developer.mozilla.org/en-US/docs/Web/API/FileSystemWritableFileStream/write
71   */
72  write: FileSystemWritableFileStreamWrite
73  /**
74   * @see https://developer.mozilla.org/en-US/docs/Web/API/FileSystemWritableFileStream/seek
75   */
76  seek: (position: number) => Promise<void>
77  /**
78   * @see https://developer.mozilla.org/en-US/docs/Web/API/FileSystemWritableFileStream/truncate
79   */
80  truncate: (size: number) => Promise<void>
81}
82/**
83 * FileStream.write
84 * @see https://developer.mozilla.org/en-US/docs/Web/API/FileSystemWritableFileStream/write
85 */
86interface FileSystemWritableFileStreamWrite {
87  (data: string | BufferSource | Blob): Promise<void>
88  (options: {
89    type: "write"
90    position: number
91    data: string | BufferSource | Blob
92  }): Promise<void>
93  (options: { type: "seek"; position: number }): Promise<void>
94  (options: { type: "truncate"; size: number }): Promise<void>
95}
96/**
97 * FileStream.write
98 * @see https://developer.mozilla.org/en-US/docs/Web/API/FileSystemWritableFileStream/write
99 */
100export type FileSystemAccessWindow = Window & {
101  showSaveFilePicker: (
102    options: FileSystemAccessShowSaveFileOptions,
103  ) => Promise<FileSystemFileHandle>
104  showOpenFilePicker: (
105    options: FileSystemAccessShowOpenFileOptions,
106  ) => Promise<FileSystemFileHandle[]>
107}
108export type UseFileSystemAccessCommonOptions = Pick<
109  FileSystemAccessShowOpenFileOptions,
110  "types" | "excludeAcceptAllOption"
111>
112export type UseFileSystemAccessShowSaveFileOptions = Pick<
113  FileSystemAccessShowSaveFileOptions,
114  "suggestedName"
115>
116export type UseFileSystemAccessOptions = ConfigurableWindow &
117  UseFileSystemAccessCommonOptions & {
118    /**
119     * file data type
120     */
121    dataType?: MaybeRefOrGetter<"Text" | "ArrayBuffer" | "Blob">
122  }
123/**
124 * Create and read and write local files.
125 * @see https://vueuse.org/useFileSystemAccess
126 */
127export declare function useFileSystemAccess(): UseFileSystemAccessReturn<
128  string | ArrayBuffer | Blob
129>
130export declare function useFileSystemAccess(
131  options: UseFileSystemAccessOptions & {
132    dataType: "Text"
133  },
134): UseFileSystemAccessReturn<string>
135export declare function useFileSystemAccess(
136  options: UseFileSystemAccessOptions & {
137    dataType: "ArrayBuffer"
138  },
139): UseFileSystemAccessReturn<ArrayBuffer>
140export declare function useFileSystemAccess(
141  options: UseFileSystemAccessOptions & {
142    dataType: "Blob"
143  },
144): UseFileSystemAccessReturn<Blob>
145export declare function useFileSystemAccess(
146  options: UseFileSystemAccessOptions,
147): UseFileSystemAccessReturn<string | ArrayBuffer | Blob>
148export interface UseFileSystemAccessReturn<T = string> extends Supportable {
149  data: ShallowRef<T | undefined>
150  file: ShallowRef<File | undefined>
151  fileName: ComputedRef<string>
152  fileMIME: ComputedRef<string>
153  fileSize: ComputedRef<number>
154  fileLastModified: ComputedRef<number>
155  open: (_options?: UseFileSystemAccessCommonOptions) => Awaitable<void>
156  create: (_options?: UseFileSystemAccessShowSaveFileOptions) => Awaitable<void>
157  save: (_options?: UseFileSystemAccessShowSaveFileOptions) => Awaitable<void>
158  saveAs: (_options?: UseFileSystemAccessShowSaveFileOptions) => Awaitable<void>
159  updateData: () => Awaitable<void>
160}
161```
162