{"id":16656211,"url":"https://github.com/luchoturtle/tweakpane-plugin-file-import","last_synced_at":"2025-03-21T16:32:02.163Z","repository":{"id":172312916,"uuid":"626142120","full_name":"LuchoTurtle/tweakpane-plugin-file-import","owner":"LuchoTurtle","description":"🗂️ File import plugin for Tweakpane","archived":false,"fork":false,"pushed_at":"2024-05-16T05:16:21.000Z","size":108,"stargazers_count":11,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-05-16T19:19:14.018Z","etag":null,"topics":["tweakpane","tweakpane-plugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/LuchoTurtle.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-04-10T22:13:33.000Z","updated_at":"2024-05-29T23:08:54.062Z","dependencies_parsed_at":"2024-02-04T01:29:29.392Z","dependency_job_id":"c0cf2ea7-21ce-4e27-851e-4e0c0e5b5251","html_url":"https://github.com/LuchoTurtle/tweakpane-plugin-file-import","commit_stats":null,"previous_names":["luchoturtle/tweakpane-plugin-file-import"],"tags_count":8,"template":false,"template_full_name":"tweakpane/plugin-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LuchoTurtle%2Ftweakpane-plugin-file-import","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LuchoTurtle%2Ftweakpane-plugin-file-import/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LuchoTurtle%2Ftweakpane-plugin-file-import/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LuchoTurtle%2Ftweakpane-plugin-file-import/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LuchoTurtle","download_url":"https://codeload.github.com/LuchoTurtle/tweakpane-plugin-file-import/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221817059,"owners_count":16885453,"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":["tweakpane","tweakpane-plugin"],"created_at":"2024-10-12T09:56:37.275Z","updated_at":"2024-10-28T10:29:30.751Z","avatar_url":"https://github.com/LuchoTurtle.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `tweakpane-plugin-file-import`\n\n[![npm](https://img.shields.io/npm/v/tweakpane-plugin-file-import?color=red\u0026logo=npm)](https://www.npmjs.com/package/tweakpane-plugin-file-import)\n\nA Tweakpane plugin for importing files.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/tweakpane/plugin-essentials/assets/17494745/218288c9-2cd9-4713-91b5-a0549be6f0ed\" /\u003e\n\u003c/p\u003e\n\n\n\u003e [!WARNING]\n\u003e \n\u003e The version `1.0.0` and upwards of this package\n\u003e only supports `Tweakpane v4`.\n\u003e \n\u003e If you are still using `Tweakpane v3`,\n\u003e **you can only use the `v0` of this package**.\n\u003e \n\u003e \n\u003e You can install it.\n\u003e \n\u003e ```sh\n\u003e npm i tweakpane-plugin-file-import@0.2.0\n\u003e ```\n\u003e \n\u003e And use it like so.\n\u003e \n\u003e ```html\n\u003e \u003cscript src=\"https://unpkg.com/tweakpane@3.0.5/dist/tweakpane.js\"\u003e\u003c/script\u003e\n\u003e \u003cscript src=\"./tweakpane-plugin-file-import.min.js\"\u003e\u003c/script\u003e\n\u003e \u003cscript\u003e\n\u003e \tconst pane = new Tweakpane.Pane();\n\u003e \tpane.registerPlugin(TweakpaneFileImportPlugin);\n\u003e \u003c/script\u003e\n\u003e ```\n\n\n# Installation\n\nYou need [Tweakpane `v4`](https://github.com/cocopon/tweakpane) to install this plugin.\n\nYou may use https://unpkg.com/tweakpane-plugin-file-import to get the latest version\nand add it as a `\u003cscript\u003e` tag on your HTML page.\n\nYou can install with `npm`:\n\n```sh\nnpm i tweakpane-plugin-file-import\n```\n\nAnd import it like so.\n\n```js\nimport {Pane} from 'tweakpane';\nimport * as TweakpaneFileImportPlugin from 'tweakpane-plugin-file-import';\n\nconst pane = new Pane();\npane.registerPlugin(TweakpaneFileImportPlugin);\n```\n\n\u003e [!TIP]\n\u003e\n\u003e Check [`test/browser.html`](/test/browser.html) for an example\n\u003e of the plugin being used.\n\n## Usage\n\nSimply initialize the params with an empty string and pass the optional parameters.\n\n```js\nconst params = {\n\tfile: '',\n};\n\n// If you're using Tweakpane v3 -------\npane\n\t.addInput(params, 'file', {\n\t\tview: 'file-input',\n\t\tlineCount: 3,\n\t\tfiletypes: ['.png', '.jpg'],\n\t\tinvalidFiletypeMessage: \"We can't accept those filetypes!\"\n\t})\n\t.on('change', (ev) =\u003e {\n\t\tconsole.log(ev.value);\n\t});\n\n// If you're using Tweakpane v4 -------\npane\n\t.addBinding(params, 'file', {\n\t\tview: 'file-input',\n\t\tlineCount: 3,\n\t\tfiletypes: ['.png', '.jpg'],\n\t\tinvalidFiletypeMessage: \"We can't accept those filetypes!\"\n\t})\n\t.on('change', (ev) =\u003e {\n\t\tconsole.log(ev.value);\n\t});\n\n```\n\n### Optional parameters\n\n| property  | type   | description                    |\n|-----------|--------|--------------------------------|\n| lineCount | int    | Number of lines for the height of the container. Similar to [FPS graph ](https://github.com/tweakpane/plugin-essentials#fps-graph)          |\n| filetypes     | array | Array of valid file extensions.             |\n| invalidFiletypeMessage     | string | String shown when the user tries to upload an invalid filetype.             |\n\n\n\n\n## Contributing\n\nIf you want to contribute to this package, you are free to open a pull request. 😊\n\n### Quickstart\n\n\u003e [!NOTE]\n\u003e\n\u003e You'll need to have `Node 16` or upwards installed\n\u003e in order to properly install and run `package.json` script commands.\n\nInstall dependencies:\n\n```sh\nnpm install\n```\n\nTo build the source code and watch changes, run:\n\n```sh\nnpm run build:dev\nnpm start\n```\n\nAfter this, simply open `test/browser.html` to see the results.\n\n\n### File structure\n\nThis project follows the same structure as any other [Tweakpane third-party plugin](https://github.com/tweakpane/plugin-template).\n\n```\n|- src\n|  |- controller ...... Controller for the custom view\n|  |- sass ............ Plugin CSS\n|  `- view ............ Custom view\n|  |- index.ts ........ Entrypoint\n|  |- plugin.ts ....... Plugin\n|- dist ............... Compiled files\n`- test\n   `- browser.html .... Plugin usage in an HTML file\n```\n\n\n\n[tweakpane]: https://github.com/cocopon/tweakpane/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluchoturtle%2Ftweakpane-plugin-file-import","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fluchoturtle%2Ftweakpane-plugin-file-import","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluchoturtle%2Ftweakpane-plugin-file-import/lists"}