Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.
The remove()
method of the FileSystemHandle
interface requests removal of the entry represented by the handle from the underlying file system.
The remove()
method allows you to remove a file or directory directly from its handle. Without this method, you would have to obtain the handle of the parent directory, then call FileSystemDirectoryHandle.removeEntry()
on that to remove it.
You can also call remove()
on the root directory of the Origin Private File System to clear its contents, after which a new empty OPFS is created.
options
Optional
An object that specifies options for the removal. Possible properties are as follows:
recursive
Optional
A boolean value that defaults to false
. When set to true
and the entry is a directory, its contents will be removed recursively.
A Promise
that fulfills with a value of undefined
.
InvalidModificationError
DOMException
Thrown if recursive
is set to false
and the entry to be removed is a directory with children.
NoModificationAllowedError
DOMException
Thrown if the browser was not able to get an exclusive lock on the entry.
NotAllowedError
DOMException
Thrown if PermissionStatus
is not granted
.
NotFoundError
DOMException
Thrown if the entry is not found.
Our FileSystemHandle.remove()
demo (see the source code) is a file creator app. You can enter text into the <textarea>
and press the "Save file" <button>
, and the app will open a file picker allowing you to save that text onto your local file system in a text file of your choice. You can also choose to delete files you create.
It doesn't allow you to view the content of created files, and it doesn't stay in sync with the underlying file system on page reloads/closes. This means that files created by the app will still exist on the file system if you don't choose to delete them before reloading or closing the tab.
The file picker, file handle, and the file itself if you are creating a new file, are created using window.showSaveFilePicker()
. The text is written to the file via FileSystemFileHandle.createWritable()
.
Once a file is created on the file system, an entry is created in the app (see processNewFile()
in the source code):
savedFileRefs
so it can be easily referenced later on.When the "Delete" button is pressed, the deleteFile()
function is run, which looks like so:
async function deleteFile(e) {
for (const handle of savedFileRefs) {
if (handle.name === `${e.target.id}.txt`) {
await handle.remove();
savedFileRefs = savedFileRefs.filter(
(handle) => handle.name !== `${e.target.id}.txt`,
);
e.target.parentElement.parentElement.removeChild(e.target.parentElement);
}
}
}
Walking through this:
savedFileRefs
array, we check its name to see if it matches the id
attribute of the button that triggered the event.FileSystemHandle.remove()
on that handle to remove the file from the underlying file system.savedFileRefs
array.This feature is not part of any specification, but may become standard in the future. See whatwg/fs#9 for the detail.
Browser compatibility See alsoRetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4