shway
/
Notepad
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Monday, November 27, 2023, 12:30:01 + 5

main
Shwetha Jayaraj 2023-11-27 12:30:29 -05:00
parent f64bf742a3
commit e37b13b8b9
5 changed files with 340 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
enter/.obsidian/plugins/recent-files-obsidian/data.json
View File

@ -1,5 +1,37 @@
{
"recentFiles": [
{
"basename": "OPFS File Storage",
"path": "OPFS File Storage.md"
},
{
"basename": "Quantum Computing Developer",
"path": "Coding Tips (Classical)/Project Vault/Current Occupations/Potential and Future/60 careers/Quantum Computing Developer.md"
},
{
"basename": "Origin_private_file_system",
"path": "en-US/docs/Web/API/File_System_API/Origin_private_file_system.md"
},
{
"basename": "Technical Writer position",
"path": "Coding Tips (Classical)/Project Vault/Current Occupations/Potential and Future/60 careers/Technical Writer position.md"
},
{
"basename": "Terra Quantum Applied Researcher Quantum Machine Learning",
"path": "Coding Tips (Classical)/Project Vault/Current Occupations/Potential and Future/60 careers/Terra Quantum Applied Researcher Quantum Machine Learning.md"
},
{
"basename": "Wikimedia Director",
"path": "Coding Tips (Classical)/Project Vault/Current Occupations/Potential and Future/60 careers/Wikimedia Director.md"
},
{
"basename": "About 60 Careers",
"path": "Coding Tips (Classical)/Project Vault/Current Occupations/Potential and Future/About 60 Careers.md"
},
{
"basename": "Pasted image 20231127115554",
"path": "Coding Tips (Classical)/Project Vault/About Obsidian/imgFiles/Pasted image 20231127115554.png"
},
{
"basename": "Documentation",
"path": "Coding Tips (Classical)/Terminal Tips/2. CLI Tools/Languages/High level - Front-end/Documentation.md"
@ -167,38 +199,6 @@
{
"basename": "Notable Obsidians",
"path": "Coding Tips (Classical)/Project Vault/About Obsidian/Obsidian Guides/Notable Obsidians.md"
},
{
"basename": "Shwetha Jayaraj Notes",
"path": "Coding Tips (Classical)/Project Vault/Current Occupations/Shwetha Jayaraj Notes.md"
},
{
"basename": "Main Page",
"path": "Coding Tips (Classical)/Project Vault/Current Occupations/Website Projects/hi.shwethajayaraj/Main Page.md"
},
{
"basename": "Coding Projects",
"path": "Coding Tips (Classical)/Project Vault/Current Occupations/Website Projects/hi.shwethajayaraj/Coding Projects.md"
},
{
"basename": "Resume-ish - my occupations",
"path": "Coding Tips (Classical)/Project Vault/Current Occupations/Website Projects/hi.shwethajayaraj/Resume-ish - my occupations.md"
},
{
"basename": "Quantum Stuff",
"path": "Coding Tips (Classical)/Project Vault/Current Occupations/Website Projects/hi.shwethajayaraj/Quantum Stuff.md"
},
{
"basename": "pdf",
"path": "Coding Tips (Classical)/Project Vault/Current Occupations/Website Projects/hi.shwethajayaraj/pdf.md"
},
{
"basename": "Credits",
"path": "Coding Tips (Classical)/Project Vault/Current Occupations/Website Projects/hi.shwethajayaraj/Credits.md"
},
{
"basename": "Generator Functions",
"path": "Coding Tips (Classical)/Terminal Tips/2. CLI Tools/Languages/Python/code/More data types/Generator Functions.md"
}
],
"omittedPaths": [],

38
enter/.obsidian/workspace.json
View File

@ -61,7 +61,7 @@
"state": {
"type": "markdown",
"state": {
"file": "Coding Tips (Classical)/Terminal Tips/2. CLI Tools/Languages/High level - Front-end/Documentation.md",
"file": "OPFS File Storage.md",
"mode": "source",
"source": false
}
@ -263,7 +263,7 @@
"state": {
"type": "backlink",
"state": {
"file": "Coding Tips (Classical)/Terminal Tips/2. CLI Tools/Languages/High level - Front-end/Documentation.md",
"file": "OPFS File Storage.md",
"collapseAll": false,
"extraContext": false,
"sortOrder": "alphabetical",
@ -280,7 +280,7 @@
"state": {
"type": "outgoing-link",
"state": {
"file": "Coding Tips (Classical)/Terminal Tips/2. CLI Tools/Languages/High level - Front-end/Documentation.md",
"file": "OPFS File Storage.md",
"linksCollapsed": false,
"unlinkedCollapsed": true
}
@ -303,7 +303,7 @@
"state": {
"type": "outline",
"state": {
"file": "Coding Tips (Classical)/Terminal Tips/2. CLI Tools/Languages/High level - Front-end/Documentation.md"
"file": "OPFS File Storage.md"
}
}
},
@ -341,7 +341,21 @@
},
"active": "56cd7c88542a57d3",
"lastOpenFiles": [
"Pasted image 20231127115554.png",
"Coding Tips (Classical)/Project Vault/Current Occupations/Potential and Future/60 careers/Quantum Computing Developer.md",
"en-US/docs/Web/API/File_System_API/Origin_private_file_system.md",
"OPFS File Storage.md",
"en-US/docs/Web/API/File_System_API",
"en-US/docs/Web/API",
"en-US/docs/Web",
"en-US/docs",
"en-US",
"Coding Tips (Classical)/Project Vault/Current Occupations/Potential and Future/60 careers/Technical Writer position.md",
"Coding Tips (Classical)/Project Vault/Current Occupations/Potential and Future/60 careers/Terra Quantum Applied Researcher Quantum Machine Learning.md",
"Coding Tips (Classical)/Project Vault/Current Occupations/Potential and Future/60 careers/Wikimedia Director.md",
"Coding Tips (Classical)/Project Vault/Current Occupations/Potential and Future/About 60 Careers.md",
"Coding Tips (Classical)/Project Vault/About Obsidian/imgFiles/Pasted image 20231127115554.png",
"Coding Tips (Classical)/Terminal Tips/2. CLI Tools/Languages/High level - Front-end/Documentation.md",
"Using the Gather CLI.md",
"Coding Tips (Classical)/Terminal Tips/System Client/OSX Apple Macbook/Mac Tips/Disk Storage Utility, Hard Disk & SSD.md",
"Coding Tips (Classical)/Terminal Tips/System Client/Choosing a Name for Your Computer.md",
"Disk Storage Utility.md",
@ -359,25 +373,12 @@
"Machine Tips (Quantum)/Project Vault/Companies, Orgs, & Events/List of Quantum Companies.md",
"Machine Tips (Quantum)/Project Vault/Constructions/Making Machines.md",
"Machine Tips (Quantum)/Project Vault/Companies, Orgs, & Events/Get to hacking!/Womanium Process.md",
"Machine Tips (Quantum)/Project Vault/Companies, Orgs, & Events/Get to hacking!/Womanium/Womanium Resources.md",
"Machine Tips (Quantum)/Project Vault/Quantum Master's Paper/Quantum Learners - The Term Paper Outline.md",
"Machine Tips (Quantum)/Project Vault/Quantum Master's Paper/References & Papers/Journals & Publications.md",
"Machine Tips (Quantum)/Project Vault/Quantum Master's Paper/References & Papers/Shwetha Jayaraj CV.pdf",
"Machine Tips (Quantum)/Resources/Welcome to Quantum 101.md",
"Machine Tips (Quantum)/Resources/Quantum 101 - Alt. Resources.md",
"Machine Tips (Quantum)/Resources/5 Min Quantum Mechanics.md",
"Machine Tips (Quantum)/Project Vault/Companies, Orgs, & Events/Get to hacking!/NYU Haqathon.md",
"Machine Tips (Quantum)/Project Vault/Companies, Orgs, & Events/Qubit by Qubit Course Development/Knowledge base & info resources;.md",
"Machine Tips (Quantum)/Resources/QRE",
"Machine Tips (Quantum)/Quantum spaces.canvas",
"Coding Tips (Classical)/Terminal Tips/2. CLI Tools/Languages/Middle/More Misc",
"Coding Tips (Classical)/Terminal Tips/1. Terminals",
"Coding Tips (Classical)/Terminal Tips/1. Terminals/Text & Editors",
"Coding Tips (Classical)/Terminal Tips/2. CLI Tools/Languages/Middle",
"Coding Tips (Classical)/Terminal Tips/2. CLI Tools/Languages/Low level - Back-end",
"Coding Tips (Classical)/Terminal Tips/2. CLI Tools/Languages/High level - Front-end",
"Coding Tips (Classical)/Terminal Tips/2. CLI Tools/Languages/High level - Front-end/Javascript/Related",
"Coding Tips (Classical)/Terminal Tips/2. CLI Tools/Languages/Low level - Back-end/Fortran",
"Coding Tips (Classical)/Project Vault/About Obsidian/imgFiles/Pasted image 20231122170526.png",
"Coding Tips (Classical)/Project Vault/About Obsidian/imgFiles/Pasted image 20231120104008.png",
"Coding Tips (Classical)/Project Vault/About Obsidian/imgFiles/Pasted image 20231120103937.png",
@ -387,7 +388,6 @@
"Coding Tips (Classical)/Project Vault/About Obsidian/imgFiles/Pasted image 20231101131959.png",
"Coding Tips (Classical)/Project Vault/About Obsidian/imgFiles/Untitled.png",
"Coding Tips (Classical)/Project Vault/About Obsidian/imgFiles/Pasted image 20231028152700.png",
"Coding Tips (Classical)/Project Vault/About Obsidian/imgFiles/Pasted image 20231022162536.png",
"Untitled.canvas"
]
}

0
enter/Pasted image 20231127115554.png → enter/Coding Tips (Classical)/Project Vault/About Obsidian/imgFiles/Pasted image 20231127115554.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 164 KiB

After

Width:  |  Height:  |  Size: 164 KiB

289
enter/OPFS File Storage.md 100644
View File

@ -0,0 +1,289 @@
From <https://developer.mozilla.org/en-US/docs/Web/API/File_System_API>:
## In this article
* Concepts and Usage
* Interfaces
* Examples
* Specifications
* Browser compatibility
* See also
1. **_[File System API](/en-US/docs/Web/API/File_System_API)_**
2. Guides
1. [Origin private file system](/en-US/docs/Web/API/File_System_API/Origin_private_file_system)
3. Interfaces
1. [`FileSystemHandle`](/en-US/docs/Web/API/FileSystemHandle)
2. [`FileSystemFileHandle`](/en-US/docs/Web/API/FileSystemFileHandle)
3. [`FileSystemDirectoryHandle`](/en-US/docs/Web/API/FileSystemDirectoryHandle)
4. [`FileSystemSyncAccessHandle`](/en-US/docs/Web/API/FileSystemSyncAccessHandle)
5. [`FileSystemWritableFileStream`](/en-US/docs/Web/API/FileSystemWritableFileStream)
4. Methods
1. [`window.showOpenFilePicker()`](/en-US/docs/Web/API/window/showOpenFilePicker)
2. [`window.showSaveFilePicker()`](/en-US/docs/Web/API/window/showSaveFilePicker)
3. [`window.showDirectoryPicker()`](/en-US/docs/Web/API/window/showDirectoryPicker)
4. [`DataTransferItem.getAsFileSystemHandle()`](/en-US/docs/Web/API/DataTransferItem/getAsFileSystemHandle)
5. [`StorageManager.getDirectory()`](/en-US/docs/Web/API/StorageManager/getDirectory)
# File System API
**Secure context:** This feature is available only in [secure contexts](/en-US/docs/Web/Security/Secure_Contexts) (HTTPS), in some or all supporting browsers.
The File System API — with extensions provided via the [File System Access API](https://wicg.github.io/file-system-access/) to access files on the device file system — allows read, write and file management capabilities.
## Concepts and Usage
This API allows interaction with files on a user's local device, or on a user-accessible network file system. Core functionality of this API includes reading files, writing or saving files, and access to directory structure.
Most of the interaction with files and directories is accomplished through handles. A parent [`FileSystemHandle`](/en-US/docs/Web/API/FileSystemHandle) class helps define two child classes: [`FileSystemFileHandle`](/en-US/docs/Web/API/FileSystemFileHandle) and [`FileSystemDirectoryHandle`](/en-US/docs/Web/API/FileSystemDirectoryHandle), for files and directories respectively.
The handles represent a file or directory on the user's system. You can first gain access to them by showing the user a file or directory picker using methods such as [`window.showOpenFilePicker()`](/en-US/docs/Web/API/Window/showOpenFilePicker) and [`window.showDirectoryPicker()`](/en-US/docs/Web/API/Window/showDirectoryPicker). Once these are called, the file picker presents itself and the user selects either a file or directory. Once this happens successfully, a handle is returned.
You can also gain access to file handles via:
* The [`DataTransferItem.getAsFileSystemHandle()`](/en-US/docs/Web/API/DataTransferItem/getAsFileSystemHandle) method of the [HTML Drag and Drop API](/en-US/docs/Web/API/HTML_Drag_and_Drop_API).
* The [File Handling API](https://developer.chrome.com/en/articles/file-handling/).
Each handle provides its own functionality and there are a few differences depending on which one you are using (see the interfaces section for specific details). You then can access file data, or information (including children) of the directory selected. This API opens up potential functionality the web has been lacking. Still, security has been of utmost concern when designing the API, and access to file/directory data is disallowed unless the user specifically permits it (note that this is not the case with the Origin private file system, because it is not visible to the user).
**Note:** The different exceptions that can be thrown when using the features of this API are listed on relevant pages as defined in the spec. However, the situation is made more complex by the interaction of the API and the underlying operating system. A proposal has been made to [list the error mappings in the spec](https://github.com/whatwg/fs/issues/57), which includes useful related information.
**Note:** Objects based on [`FileSystemHandle`](/en-US/docs/Web/API/FileSystemHandle) can also be serialized into an [IndexedDB](/en-US/docs/Web/API/IndexedDB_API) database instance, or transferred via [`postMessage()`](/en-US/docs/Web/API/Window/postMessage).
### Origin private file system
The origin private file system (OPFS) is a storage endpoint provided as part of the File System API, which is private to the origin of the page and not visible to the user like the regular file system. It provides access to a special kind of file that is highly optimized for performance and offers in-place write access to its content.
Read our [Origin private file system](/en-US/docs/Web/API/File_System_API/Origin_private_file_system) for instructions on how to use it.
### Saving files
* In the case of the asynchronous handles, use the [`FileSystemWritableFileStream`](/en-US/docs/Web/API/FileSystemWritableFileStream) interface. Once the data you'd like to save is in a format of [`Blob`](/en-US/docs/Web/API/Blob), [`String`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) object, string literal or [`buffer`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer), you can open a stream and save the data to a file. This can be the existing file or a new file.
* In the case of the synchronous [`FileSystemSyncAccessHandle`](/en-US/docs/Web/API/FileSystemSyncAccessHandle), you write changes to a file using the [`write()`](/en-US/docs/Web/API/FileSystemSyncAccessHandle/write) method. You can optionally also call [`flush()`](/en-US/docs/Web/API/FileSystemSyncAccessHandle/flush) if you need the changes committed to disk at a specific time (otherwise you can leave the underlying operating system to handle this when it sees fit, which should be OK in most cases).
## Interfaces
[`FileSystemHandle`](/en-US/docs/Web/API/FileSystemHandle)
The **`FileSystemHandle`** interface is an object which represents an entry. Multiple handles can represent the same entry. For the most part you do not work with `FileSystemHandle` directly but rather its child interfaces [`FileSystemFileHandle`](/en-US/docs/Web/API/FileSystemFileHandle) and [`FileSystemDirectoryHandle`](/en-US/docs/Web/API/FileSystemDirectoryHandle).
[`FileSystemFileHandle`](/en-US/docs/Web/API/FileSystemFileHandle)
Provides a handle to a file system entry.
[`FileSystemDirectoryHandle`](/en-US/docs/Web/API/FileSystemDirectoryHandle)
provides a handle to a file system directory.
[`FileSystemSyncAccessHandle`](/en-US/docs/Web/API/FileSystemSyncAccessHandle)
Provides a synchronous handle to a file system entry, which operates in-place on a single file on disk. The synchronous nature of the file reads and writes allows for higher performance for critical methods in contexts where asynchronous operations come with high overhead, e.g., [WebAssembly](/en-US/docs/WebAssembly). This class is only accessible inside dedicated [Web Workers](/en-US/docs/Web/API/Web_Workers_API) for files within the origin private file system.
[`FileSystemWritableFileStream`](/en-US/docs/Web/API/FileSystemWritableFileStream)
is a [`WritableStream`](/en-US/docs/Web/API/WritableStream) object with additional convenience methods, which operates on a single file on disk.
## Examples
### Accessing files
The below code allows the user to choose a file from the file picker.
```js
async function getFile() {
// Open file picker and destructure the result the first handle
const [fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
return file;
}
```
The following asynchronous function presents a file picker and once a file is chosen, uses the `getFile()` method to retrieve the contents.
```js
const pickerOpts = {
types: [
{
description: "Images",
accept: {
"image/*": [".png", ".gif", ".jpeg", ".jpg"],
},
},
],
excludeAcceptAllOption: true,
multiple: false,
};
async function getTheFile() {
// Open file picker and destructure the result the first handle
const [fileHandle] = await window.showOpenFilePicker(pickerOpts);
// get file contents
const fileData = await fileHandle.getFile();
}
```
### Accessing directories
The following example returns a directory handle with the specified name. If the directory does not exist, it is created.
js
const dirName = "directoryToGetName";
// assuming we have a directory handle: 'currentDirHandle'
const subDir = currentDirHandle.getDirectoryHandle(dirName, { create: true });
The following asynchronous function uses `resolve()` to find the path to a chosen file, relative to a specified directory handle.
js
async function returnPathDirectories(directoryHandle) {
// Get a file handle by showing a file picker:
const [handle] = await self.showOpenFilePicker();
if (!handle) {
// User cancelled, or otherwise failed to open a file.
return;
}
// Check if handle exists inside our directory handle
const relativePaths = await directoryHandle.resolve(handle);
if (relativePaths === null) {
// Not inside directory handle
} else {
// relativePaths is an array of names, giving the relative path
for (const name of relativePaths) {
// log each entry
console.log(name);
}
}
}
### Writing to files
The following asynchronous function opens the save file picker, which returns a [`FileSystemFileHandle`](/en-US/docs/Web/API/FileSystemFileHandle) once a file is selected. A writable stream is then created using the [`FileSystemFileHandle.createWritable()`](/en-US/docs/Web/API/FileSystemFileHandle/createWritable) method.
A user defined [`Blob`](/en-US/docs/Web/API/Blob) is then written to the stream which is subsequently closed.
js
async function saveFile() {
// create a new handle
const newHandle = await window.showSaveFilePicker();
// create a FileSystemWritableFileStream to write to
const writableStream = await newHandle.createWritable();
// write our file
await writableStream.write(imgBlob);
// close the file and write the contents to disk.
await writableStream.close();
}
The following show different examples of options that can be passed into the `write()` method.
js
// just pass in the data (no options)
writableStream.write(data);
// writes the data to the stream from the determined position
writableStream.write({ type: "write", position, data });
// updates the current file cursor offset to the position specified
writableStream.write({ type: "seek", position });
// resizes the file to be size bytes long
writableStream.write({ type: "truncate", size });
### Synchronously reading and writing files in OPFS
This example synchronously reads and writes a file to the origin private file system.
The following asynchronous event handler function is contained inside a Web Worker. On receiving a message from the main thread it:
* Creates a synchronous file access handle.
* Gets the size of the file and creates an [`ArrayBuffer`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) to contain it.
* Reads the file contents into the buffer.
* Encodes the message and writes it to the end of the file.
* Persists the changes to disk and closes the access handle.
js
onmessage = async (e) => {
// retrieve message sent to work from main script
const message = e.data;
// Get handle to draft file in OPFS
const root = await navigator.storage.getDirectory();
const draftHandle = await root.getFileHandle("draft.txt", { create: true });
// Get sync access handle
const accessHandle = await draftHandle.createSyncAccessHandle();
// Get size of the file.
const fileSize = accessHandle.getSize();
// Read file content to a buffer.
const buffer = new DataView(new ArrayBuffer(fileSize));
const readBuffer = accessHandle.read(buffer, { at: 0 });
// Write the message to the end of the file.
const encoder = new TextEncoder();
const encodedMessage = encoder.encode(message);
const writeBuffer = accessHandle.write(encodedMessage, { at: readBuffer });
// Persist changes to disk.
accessHandle.flush();
// Always close FileSystemSyncAccessHandle if done.
accessHandle.close();
};
**Note:** In earlier versions of the spec, [`close()`](/en-US/docs/Web/API/FileSystemSyncAccessHandle/close), [`flush()`](/en-US/docs/Web/API/FileSystemSyncAccessHandle/flush), [`getSize()`](/en-US/docs/Web/API/FileSystemSyncAccessHandle/getSize), and [`truncate()`](/en-US/docs/Web/API/FileSystemSyncAccessHandle/truncate) were unergonomically specified as asynchronous methods. This has now been [amended](https://github.com/whatwg/fs/issues/7), but some browsers still support the asynchronous versions.
## Specifications
Specification
[File System Standard
# api-filesystemhandle](https://fs.spec.whatwg.org/#api-filesystemhandle)
[File System Standard
# api-filesystemfilehandle](https://fs.spec.whatwg.org/#api-filesystemfilehandle)
## Browser compatibility
### api.FileSystemHandle
BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
### api.FileSystemFileHandle
BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
## See also
* [The File System Access API: simplifying access to local files](https://developer.chrome.com/articles/file-system-access/) on web.dev
* [The origin private file system](https://web.dev/articles/origin-private-file-system) on web.dev

0
enter/en-US/docs/Web/API/File_System_API/Origin_private_file_system.md 100644
View File