File Viewer [intermediate / advanced]

[PaperPrototype]

File Viewer. A UI to interact with the Origin Private File System (OPFS).

API's you will need to learn:

• Drag and Drop API
• Origin Private File System API
• Svelte 5 (relatively easy)

Code is at src/lib/components/FileViewer.
Route is at src/routes/components/files.

If you don't have any files the demo won't show anything. Use the OPFS-Explorer chrome extension until this is finished.

Screen_Recording_2025-09-13_at_12.07.29_AM.mov

We will essentially be building something like the OPFS Explorer and I recommend referencing it's source code for examples https://github.com/tomayac/opfs-explorer

Tasks:

• TODO add script that injects a bunch of random text files and folders for testing You can now create/delete/move folders/files
• VS Code Style Filetree with:
  • Drag and drop visuals
  • Create new file (button)
  • Create new folder (button)
  • Drag and drop (move) files and folders:
    • file into a folder
    • folder into another folder (recursively move all it's contents)
  • Renaming a folder (same operation as moving)
  • Renaming a file (same operation as moving)
  • Delete a file
  • Delete a folder (recursively delete all it's contents)

[PaperPrototype]

There is a bug that makes renaming of folders throw these errors:

Error moving folder from /src to /code: NotFoundError: A requested file or directory could not be found at the time an operation was processed.

moveFolder | @ | worker.ts:148

await in moveFolder 

self.onmessage | @ | worker.ts:9

and

Uncaught (in promise) NotFoundError: A requested file or directory could not be found at the time an operation was processed.

self.onmessage | @ | worker.ts:14

[PaperPrototype]

But for some reason drag and drop to moving folders works fine?

[PaperPrototype]

Closing for now since all the tasks are completed