{"id":21533146,"url":"https://github.com/iampava/file-system-utils","last_synced_at":"2025-06-29T16:32:19.999Z","repository":{"id":57235614,"uuid":"257043827","full_name":"iampava/file-system-utils","owner":"iampava","description":"Utily functions to help with the FileSystem Browser API.","archived":false,"fork":false,"pushed_at":"2020-04-19T16:47:12.000Z","size":442,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-28T09:13:56.666Z","etag":null,"topics":["file-system","file-system-utils"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iampava.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-19T16:10:39.000Z","updated_at":"2022-11-10T13:44:44.000Z","dependencies_parsed_at":"2022-08-31T14:10:20.086Z","dependency_job_id":null,"html_url":"https://github.com/iampava/file-system-utils","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iampava%2Ffile-system-utils","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iampava%2Ffile-system-utils/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iampava%2Ffile-system-utils/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iampava%2Ffile-system-utils/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iampava","download_url":"https://codeload.github.com/iampava/file-system-utils/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244100169,"owners_count":20398102,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["file-system","file-system-utils"],"created_at":"2024-11-24T02:23:55.961Z","updated_at":"2025-03-17T19:41:30.353Z","avatar_url":"https://github.com/iampava.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# file-system-utils\n\n\n## ⚠ Disclaimer\n\nCurrently the [FileSystem API](https://developer.mozilla.org/en-US/docs/Web/API/FileSystem) is experimental which means it is not 100% reliable. I tested it in Chrome \u0026 Firefox but beware of future changes that might crash this code.\n\n## Motivation\n\nI wanted to provide Drag-and-Drop functionality for folders in two of the apps I'm working on. Next I discovered the FileSystem API and decided to release these utility functions as a separate package.\n\nHere's the end-results of using these utils in [DevDrive](https://devdrive.io).\n\n\u003cimg src=\"https://raw.githubusercontent.com/iampava/file-system-utils/master/demo-2.gif\" alt=\"Demo\" border=\"\"/\u003e\n\n\n## Installation \u0026 Usage\n\n```bash\n$ npm install file-system-utils --save\n```\n\nTo use this library just import the functions you want into the code and voilà!\n\n```js\nimport {\n    toFolderStructure,\n    toFileEntriesArray\n} from \"file-system-utils\";\n```\n  \n⚠ This library is specifically made to be used in conjunction with ES Modules or a bundler like Webpack. If you want to use it in a vanilla JavaScript project without any build process or ES Modules, then you'll need to copy-paste the functions directly in your code.\n\n## API\n\n### toFolderStructure(entries, middleware?) : `Promise\u003cObject\u003e`\n\nCompute a tree-like structure of folders and files (including subfolders) from an Array of [FileSystemEntry](https://developer.mozilla.org/en-US/docs/Web/API/FileSystemEntry).\n\n#### entries\n\nType: `Array`\n\nAn array of [FileSystemEntry](https://developer.mozilla.org/en-US/docs/Web/API/FileSystemEntry). You'll most likely get this from a `\u003cinput type=\"file\"\u003e` after a user drops some files/folders on top.  You can also get this data from the [DataTransfer](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer) object in case you're implementing the entire Drag-n-Drop yourself.\n\n\n#### middleware\n\nType: `Function`\n\nDefault: `(arg) =\u003e Promise.resolve(arg)`\n\nBy default the resulting object will contain actual instances of [FileSystemFileEntry](https://developer.mozilla.org/en-US/docs/Web/API/FileSystemFileEntry). If instead you want to process the files and keep just certain information about them, use this middleware function which must return a Promise which resolves to the data you want to keep.\n\nI used it to keep only the file's `name`, a unique `key` and it's `text content`. \n\n#### @returns\n\nA tree like structure representing all the files and folders (including sub-folders).\n\nExample:\n\n```js\n{\n    folders: [{\n        key: 'unique-uuid',\n        name: 'public',\n        folders: [ /* ... */ ],\n        files: [/* ... */]\n    }],\n    files: [/* ... */]\n}\n```\n\n### toFileEntriesArray(entries, middleware?) : `Promise\u003cArray\u003e`\n\nCompute an Array of all the [FileSystemFileEntry](https://developer.mozilla.org/en-US/docs/Web/API/FileSystemFileEntry) found inside `entries` (including sub-entries).\n\nThis function is similar to the one before, it just returns an array of all the files instead of the tree-like structure. This is usefull in case you only care about the file contents, and not their specific directory.\n\n#### entries\n\nExactly the same as in the `toFolderStructure` function.\n\n\n#### middleware\n\nExactly the same as in the `toFolderStructure` function.\n\n\n#### @returns\n\nAn Array of [FileSystemFileEntry](https://developer.mozilla.org/en-US/docs/Web/API/FileSystemFileEntry) or, if you specified a middleware function, an Array of whatever you're returning from there.\n\n\u003chr/\u003e\n\n\u003cp align=\"center\"\u003e Made with ❤ by \u003ca href=\"https://iampava.com\"\u003e Pava \u003c/a\u003e\u003c/p\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiampava%2Ffile-system-utils","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiampava%2Ffile-system-utils","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiampava%2Ffile-system-utils/lists"}