├── .editorconfig
├── .github
    ├── dependabot.yaml
    └── workflows
    │   └── ci.yml
├── .gitignore
├── .npmrc
├── .prettierrc.js
├── LICENSE.txt
├── README.md
├── eslint.config.mjs
├── package.json
├── rollup.config.js
├── scripts
    └── assets-append-version.js
├── src
    ├── controller
    │   └── controller.ts
    ├── index.ts
    ├── plugin.ts
    ├── sass
    │   └── plugin.scss
    └── view
    │   └── view.ts
├── test
    └── browser.html
├── tsconfig-dts.json
└── tsconfig.json


/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*.{html}]
 4 | indent_size = 2
 5 | indent_style = tab
 6 | 
 7 | [*.{js,json,ts}]
 8 | indent_size = 2
 9 | indent_style = tab
10 | 
11 | [*.md]
12 | indent_size = 2
13 | indent_style = space
14 | 
15 | [*.scss]
16 | indent_size = 2
17 | indent_style = tab
18 | 
19 | [*.yml]
20 | indent_size = 2
21 | indent_style = space
22 | 
23 | [package.json]
24 | indent_size = 2
25 | indent_style = space
26 | 


--------------------------------------------------------------------------------
/.github/dependabot.yaml:
--------------------------------------------------------------------------------
1 | version: 2
2 | updates:
3 |   # Maintain dependencies for npm
4 |   - package-ecosystem: "npm"
5 |     directory: "/"
6 |     schedule:
7 |       interval: "weekly"
8 | 


--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
 1 | name: PR CI
 2 | 
 3 | on:
 4 |   push:
 5 |     branches: [ main ]
 6 |   pull_request:
 7 |     branches: [ main ]
 8 | 
 9 | jobs:
10 |   build:
11 | 
12 |     runs-on: ubuntu-latest
13 | 
14 |     strategy:
15 |       matrix:
16 |         node-version: [18.x, 20.x, latest]
17 | 
18 |     steps:
19 |       - uses: actions/checkout@v3
20 |       - name: Use Node.js ${{ matrix.node-version }}
21 |         uses: actions/setup-node@v3
22 |         with:
23 |           node-version: ${{ matrix.node-version }}
24 |           
25 |       - run: npm install
26 |       - run: npm run build --if-present
27 |       - run: npm test
28 |   


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | /.vscode/
  2 | /dist/
  3 | /*.zip
  4 | 
  5 | ### https://raw.github.com/github/gitignore//Node.gitignore
  6 | 
  7 | # Logs
  8 | logs
  9 | *.log
 10 | npm-debug.log*
 11 | yarn-debug.log*
 12 | yarn-error.log*
 13 | lerna-debug.log*
 14 | 
 15 | # Diagnostic reports (https://nodejs.org/api/report.html)
 16 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 17 | 
 18 | # Runtime data
 19 | pids
 20 | *.pid
 21 | *.seed
 22 | *.pid.lock
 23 | 
 24 | # Directory for instrumented libs generated by jscoverage/JSCover
 25 | lib-cov
 26 | 
 27 | # Coverage directory used by tools like istanbul
 28 | coverage
 29 | *.lcov
 30 | 
 31 | # nyc test coverage
 32 | .nyc_output
 33 | 
 34 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 35 | .grunt
 36 | 
 37 | # Bower dependency directory (https://bower.io/)
 38 | bower_components
 39 | 
 40 | # node-waf configuration
 41 | .lock-wscript
 42 | 
 43 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 44 | build/Release
 45 | 
 46 | # Dependency directories
 47 | node_modules/
 48 | jspm_packages/
 49 | 
 50 | # Snowpack dependency directory (https://snowpack.dev/)
 51 | web_modules/
 52 | 
 53 | # TypeScript cache
 54 | *.tsbuildinfo
 55 | 
 56 | # Optional npm cache directory
 57 | .npm
 58 | 
 59 | # Optional eslint cache
 60 | .eslintcache
 61 | 
 62 | # Microbundle cache
 63 | .rpt2_cache/
 64 | .rts2_cache_cjs/
 65 | .rts2_cache_es/
 66 | .rts2_cache_umd/
 67 | 
 68 | # Optional REPL history
 69 | .node_repl_history
 70 | 
 71 | # Output of 'npm pack'
 72 | *.tgz
 73 | 
 74 | # Yarn Integrity file
 75 | .yarn-integrity
 76 | 
 77 | # dotenv environment variables file
 78 | .env
 79 | .env.test
 80 | 
 81 | # parcel-bundler cache (https://parceljs.org/)
 82 | .cache
 83 | .parcel-cache
 84 | 
 85 | # Next.js build output
 86 | .next
 87 | out
 88 | 
 89 | # Nuxt.js build / generate output
 90 | .nuxt
 91 | dist
 92 | 
 93 | # Gatsby files
 94 | .cache/
 95 | # Comment in the public line in if your project uses Gatsby and not Next.js
 96 | # https://nextjs.org/blog/next-9-1#public-directory-support
 97 | # public
 98 | 
 99 | # vuepress build output
100 | .vuepress/dist
101 | 
102 | # Serverless directories
103 | .serverless/
104 | 
105 | # FuseBox cache
106 | .fusebox/
107 | 
108 | # DynamoDB Local files
109 | .dynamodb/
110 | 
111 | # TernJS port file
112 | .tern-port
113 | 
114 | # Stores VSCode versions used for testing VSCode extensions
115 | .vscode-test
116 | 
117 | # yarn v2
118 | .yarn/cache
119 | .yarn/unplugged
120 | .yarn/build-state.yml
121 | .yarn/install-state.gz
122 | .pnp.*
123 | 
124 | # Testing coverage folder
125 | .nyc_output
126 | 
127 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | package-lock=false
2 | 


--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | 	arrowParens: 'always',
3 | 	bracketSpacing: false,
4 | 	singleQuote: true,
5 | 	trailingComma: 'all',
6 | 	useTabs: true,
7 | };
8 | 


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2021 cocopon <cocopon@me.com>
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining a copy
 4 | of this software and associated documentation files (the "Software"), to deal
 5 | in the Software without restriction, including without limitation the rights
 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 7 | copies of the Software, and to permit persons to whom the Software is
 8 | furnished to do so, subject to the following conditions:
 9 | 
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 | 
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.
20 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # `tweakpane-plugin-file-import`
  2 | 
  3 | [![npm](https://img.shields.io/npm/v/tweakpane-plugin-file-import?color=red&logo=npm)](https://www.npmjs.com/package/tweakpane-plugin-file-import)
  4 | 
  5 | A Tweakpane plugin for importing files.
  6 | 
  7 | <p align="center">
  8 |   <img src="https://github.com/tweakpane/plugin-essentials/assets/17494745/218288c9-2cd9-4713-91b5-a0549be6f0ed" />
  9 | </p>
 10 | 
 11 | 
 12 | > [!WARNING]
 13 | > 
 14 | > The version `1.0.0` and upwards of this package
 15 | > only supports `Tweakpane v4`.
 16 | > 
 17 | > If you are still using `Tweakpane v3`,
 18 | > **you can only use the `v0` of this package**.
 19 | > 
 20 | > 
 21 | > You can install it.
 22 | > 
 23 | > ```sh
 24 | > npm i tweakpane-plugin-file-import@0.2.0
 25 | > ```
 26 | > 
 27 | > And use it like so.
 28 | > 
 29 | > ```html
 30 | > <script src="https://unpkg.com/tweakpane@3.0.5/dist/tweakpane.js"></script>
 31 | > <script src="./tweakpane-plugin-file-import.min.js"></script>
 32 | > <script>
 33 | > 	const pane = new Tweakpane.Pane();
 34 | > 	pane.registerPlugin(TweakpaneFileImportPlugin);
 35 | > </script>
 36 | > ```
 37 | 
 38 | 
 39 | # Installation
 40 | 
 41 | You need [Tweakpane `v4`](https://github.com/cocopon/tweakpane) to install this plugin.
 42 | 
 43 | You may use https://unpkg.com/tweakpane-plugin-file-import to get the latest version
 44 | and add it as a `<script>` tag on your HTML page.
 45 | 
 46 | You can install with `npm`:
 47 | 
 48 | ```sh
 49 | npm i tweakpane-plugin-file-import
 50 | ```
 51 | 
 52 | And import it like so.
 53 | 
 54 | ```js
 55 | import {Pane} from 'tweakpane';
 56 | import * as TweakpaneFileImportPlugin from 'tweakpane-plugin-file-import';
 57 | 
 58 | const pane = new Pane();
 59 | pane.registerPlugin(TweakpaneFileImportPlugin);
 60 | ```
 61 | 
 62 | > [!TIP]
 63 | >
 64 | > Check [`test/browser.html`](/test/browser.html) for an example
 65 | > of the plugin being used.
 66 | 
 67 | ## Usage
 68 | 
 69 | Simply initialize the params with an empty string and pass the optional parameters.
 70 | 
 71 | ```js
 72 | const params = {
 73 | 	file: '',
 74 | };
 75 | 
 76 | // If you're using Tweakpane v3 -------
 77 | pane
 78 | 	.addInput(params, 'file', {
 79 | 		view: 'file-input',
 80 | 		lineCount: 3,
 81 | 		filetypes: ['.png', '.jpg'],
 82 | 		invalidFiletypeMessage: "We can't accept those filetypes!"
 83 | 	})
 84 | 	.on('change', (ev) => {
 85 | 		console.log(ev.value);
 86 | 	});
 87 | 
 88 | // If you're using Tweakpane v4 -------
 89 | pane
 90 | 	.addBinding(params, 'file', {
 91 | 		view: 'file-input',
 92 | 		lineCount: 3,
 93 | 		filetypes: ['.png', '.jpg'],
 94 | 		invalidFiletypeMessage: "We can't accept those filetypes!"
 95 | 	})
 96 | 	.on('change', (ev) => {
 97 | 		console.log(ev.value);
 98 | 	});
 99 | 
100 | ```
101 | 
102 | ### Optional parameters
103 | 
104 | | property  | type   | description                    |
105 | |-----------|--------|--------------------------------|
106 | | lineCount | int    | Number of lines for the height of the container. Similar to [FPS graph ](https://github.com/tweakpane/plugin-essentials#fps-graph)          |
107 | | filetypes     | array | Array of valid file extensions.             |
108 | | invalidFiletypeMessage     | string | String shown when the user tries to upload an invalid filetype.             |
109 | 
110 | 
111 | 
112 | 
113 | ## Contributing
114 | 
115 | If you want to contribute to this package, you are free to open a pull request. 😊
116 | 
117 | ### Quickstart
118 | 
119 | > [!NOTE]
120 | >
121 | > You'll need to have `Node 16` or upwards installed
122 | > in order to properly install and run `package.json` script commands.
123 | 
124 | Install dependencies:
125 | 
126 | ```sh
127 | npm install
128 | ```
129 | 
130 | To build the source code and watch changes, run:
131 | 
132 | ```sh
133 | npm run build:dev
134 | npm start
135 | ```
136 | 
137 | After this, simply open `test/browser.html` to see the results.
138 | 
139 | 
140 | ### File structure
141 | 
142 | This project follows the same structure as any other [Tweakpane third-party plugin](https://github.com/tweakpane/plugin-template).
143 | 
144 | ```
145 | |- src
146 | |  |- controller ...... Controller for the custom view
147 | |  |- sass ............ Plugin CSS
148 | |  `- view ............ Custom view
149 | |  |- index.ts ........ Entrypoint
150 | |  |- plugin.ts ....... Plugin
151 | |- dist ............... Compiled files
152 | `- test
153 |    `- browser.html .... Plugin usage in an HTML file
154 | ```
155 | 
156 | 
157 | 
158 | [tweakpane]: https://github.com/cocopon/tweakpane/
159 | 


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
 1 | import typescriptEslint from "@typescript-eslint/eslint-plugin";
 2 | import simpleImportSort from "eslint-plugin-simple-import-sort";
 3 | import tsParser from "@typescript-eslint/parser";
 4 | import path from "node:path";
 5 | import { fileURLToPath } from "node:url";
 6 | import js from "@eslint/js";
 7 | import { FlatCompat } from "@eslint/eslintrc";
 8 | 
 9 | const __filename = fileURLToPath(import.meta.url);
10 | const __dirname = path.dirname(__filename);
11 | const compat = new FlatCompat({
12 |     baseDirectory: __dirname,
13 |     recommendedConfig: js.configs.recommended,
14 |     allConfig: js.configs.all
15 | });
16 | 
17 | export default [{
18 |     ignores: ["**/node_modules", "**/dist", "**/.vscode", "**/coverage", "**/nyc-output"],
19 | }, ...compat.extends(
20 |     "eslint:recommended",
21 |     "plugin:@typescript-eslint/eslint-recommended",
22 |     "plugin:@typescript-eslint/recommended",
23 |     "plugin:prettier/recommended",
24 | ).map(config => ({
25 |     ...config,
26 |     files: ["**/*.ts", "**/*.tsx"],
27 | })), {
28 |     files: ["**/*.ts", "**/*.tsx"],
29 | 
30 |     plugins: {
31 |         "@typescript-eslint": typescriptEslint,
32 |         "simple-import-sort": simpleImportSort,
33 |     },
34 | 
35 |     languageOptions: {
36 |         parser: tsParser,
37 |     },
38 | 
39 |     rules: {
40 |         camelcase: "off",
41 |         "no-unused-vars": "off",
42 |         "sort-imports": "off",
43 | 
44 |         "prettier/prettier": ["error", {
45 |             endOfLine: "auto",
46 |         }],
47 | 
48 |         "simple-import-sort/imports": "error",
49 | 
50 |         "@typescript-eslint/naming-convention": ["error", {
51 |             selector: "variable",
52 |             format: ["camelCase", "PascalCase", "UPPER_CASE"],
53 | 
54 |             custom: {
55 |                 regex: "^opt_",
56 |                 match: false,
57 |             },
58 |         }],
59 | 
60 |         "@typescript-eslint/explicit-function-return-type": "off",
61 |         "@typescript-eslint/no-empty-function": "off",
62 |         "@typescript-eslint/no-explicit-any": "off",
63 | 
64 |         "@typescript-eslint/no-unused-vars": ["error", {
65 |             argsIgnorePattern: "^_",
66 |         }],
67 | 
68 |         "@typescript-eslint/explicit-module-boundary-types": "off",
69 |     },
70 | }];


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "tweakpane-plugin-file-import",
 3 | 	"version": "1.1.1",
 4 | 	"description": "A general-purpose and simple file input Tweakpane plugin",
 5 | 	"homepage": "https://github.com/LuchoTurtle/tweakpane-plugin-file-import",
 6 | 	"main": "dist/tweakpane-plugin-file-import.js",
 7 | 	"types": "dist/types/index.d.ts",
 8 | 	"author": "LuchoTurtle",
 9 | 	"license": "MIT",
10 | 	"repository": {
11 | 		"type": "git",
12 | 		"url": "https://github.com/LuchoTurtle/tweakpane-plugin-file-import"
13 | 	},
14 | 	"files": [
15 | 		"dist"
16 | 	],
17 | 	"scripts": {
18 | 		"release": "release-it",
19 | 		"prepare": "run-s clean build",
20 | 		"prepublishOnly": "npm test",
21 | 		"start": "run-p watch server",
22 | 		"test": "eslint \"src/**/*.ts\"",
23 | 		"assets": "run-s clean build assets:version assets:zip",
24 | 		"assets:version": "node scripts/assets-append-version.js",
25 | 		"assets:zip": "zip -x '*types*' -j -r $(node scripts/dist-name.js)-$(cat package.json | npx json version).zip dist",
26 | 		"clean": "rimraf dist *.tgz *.zip",
27 | 		"build": "run-p build:*",
28 | 		"build:dev": "rollup --config rollup.config.js",
29 | 		"build:dts": "tsc --project tsconfig-dts.json",
30 | 		"build:prod": "rollup --config rollup.config.js --environment BUILD:production",
31 | 		"format": "run-p format:*",
32 | 		"format:scss": "prettier --parser scss --write \"src/sass/**/*.scss\"",
33 | 		"format:ts": "eslint --fix \"src/**/*.ts\"",
34 | 		"server": "http-server -c-1 -o /test/browser.html",
35 | 		"watch": "run-p watch:*",
36 | 		"watch:sass": "onchange --initial --kill \"src/sass/**/*.scss\" -- npm run build:dev",
37 | 		"watch:ts": "onchange --initial --kill \"src/**/*.ts\" -- rollup --config rollup.config.js"
38 | 	},
39 | 	"devDependencies": {
40 | 		"@rollup/plugin-alias": "^5.1.0",
41 | 		"@rollup/plugin-node-resolve": "^16.0.0",
42 | 		"@rollup/plugin-replace": "^6.0.1",
43 | 		"@rollup/plugin-typescript": "^12.1.0",
44 | 		"@tweakpane/core": "^2.0.1",
45 | 		"@typescript-eslint/eslint-plugin": "^8.5.0",
46 | 		"@typescript-eslint/parser": "^8.5.0",
47 | 		"autoprefixer": "^10.2.4",
48 | 		"eslint": "^9.10.0",
49 | 		"eslint-config-prettier": "^10.0.1",
50 | 		"eslint-plugin-prettier": "^5.2.1",
51 | 		"eslint-plugin-simple-import-sort": "^12.1.1",
52 | 		"http-server": "^14.1.1",
53 | 		"npm-run-all": "^4.1.5",
54 | 		"onchange": "^7.1.0",
55 | 		"postcss": "^8.4.45",
56 | 		"prettier": "^3.3.3",
57 | 		"release-it": "^19.0.1",
58 | 		"rimraf": "^6.0.1",
59 | 		"rollup": "^2.39.1",
60 | 		"rollup-plugin-cleanup": "3.2.1",
61 | 		"rollup-plugin-terser": "^7.0.2",
62 | 		"sass": "^1.78.0",
63 | 		"typescript": "^5.6.2"
64 | 	},
65 | 	"peerDependencies": {
66 | 		"tweakpane": "^4.0.0"
67 | 	}
68 | }
69 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | /* eslint-env node */
 2 | 
 3 | import Alias from '@rollup/plugin-alias';
 4 | import {nodeResolve} from '@rollup/plugin-node-resolve';
 5 | import Replace from '@rollup/plugin-replace';
 6 | import Typescript from '@rollup/plugin-typescript';
 7 | import Autoprefixer from 'autoprefixer';
 8 | import Postcss from 'postcss';
 9 | import Cleanup from 'rollup-plugin-cleanup';
10 | import {terser as Terser} from 'rollup-plugin-terser';
11 | import Sass from 'sass';
12 | 
13 | import Package from './package.json';
14 | 
15 | async function compileCss() {
16 | 	const css = Sass.renderSync({
17 | 		file: 'src/sass/plugin.scss',
18 | 		outputStyle: 'compressed',
19 | 	}).css.toString();
20 | 
21 | 	const result = await Postcss([Autoprefixer]).process(css, {
22 | 		from: undefined,
23 | 	});
24 | 	return result.css.replace(/'/g, "\\'").trim();
25 | }
26 | 
27 | function getPlugins(css, shouldMinify) {
28 | 	const plugins = [
29 | 		Alias({
30 | 			entries: [
31 | 				{
32 | 					find: '@tweakpane/core',
33 | 					replacement: './node_modules/@tweakpane/core/dist/index.js',
34 | 				},
35 | 			],
36 | 		}),
37 | 		Typescript({
38 | 			tsconfig: 'tsconfig.json',
39 | 		}),
40 | 		nodeResolve(),
41 | 		Replace({
42 | 			__css__: css,
43 | 			preventAssignment: false,
44 | 		}),
45 | 	];
46 | 	if (shouldMinify) {
47 | 		plugins.push(Terser());
48 | 	}
49 | 	return [
50 | 		...plugins,
51 | 		// https://github.com/microsoft/tslib/issues/47
52 | 		Cleanup({
53 | 			comments: 'none',
54 | 		}),
55 | 	];
56 | }
57 | 
58 | function getDistName(packageName) {
59 | 	// `@tweakpane/plugin-foobar` -> `tweakpane-plugin-foobar`
60 | 	// `tweakpane-plugin-foobar`  -> `tweakpane-plugin-foobar`
61 | 	return packageName
62 | 		.split(/[@/-]/)
63 | 		.reduce((comps, comp) => (comp !== '' ? [...comps, comp] : comps), [])
64 | 		.join('-');
65 | }
66 | 
67 | export default async () => {
68 | 	const production = process.env.BUILD === 'production';
69 | 	const postfix = production ? '.min' : '';
70 | 
71 | 	const distName = getDistName(Package.name);
72 | 	const css = await compileCss();
73 | 	return {
74 | 		input: 'src/index.ts',
75 | 		external: ['tweakpane'],
76 | 		output: {
77 | 			file: `dist/${distName}${postfix}.js`,
78 | 			format: 'esm',
79 | 			globals: {
80 | 				tweakpane: 'Tweakpane',
81 | 			},
82 | 		},
83 | 		plugins: getPlugins(css, production),
84 | 
85 | 		// Suppress `Circular dependency` warning
86 | 		onwarn(warning, rollupWarn) {
87 | 			if (warning.code === 'CIRCULAR_DEPENDENCY') {
88 | 				return;
89 | 			}
90 | 			rollupWarn(warning);
91 | 		},
92 | 	};
93 | };
94 | 


--------------------------------------------------------------------------------
/scripts/assets-append-version.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const Fs = require('fs');
 4 | const Glob = require('glob');
 5 | const Path = require('path');
 6 | const Package = require('../package');
 7 | 
 8 | const PATTERN = 'dist/*';
 9 | 
10 | const paths = Glob.sync(PATTERN);
11 | paths.forEach((path) => {
12 | 	const fileName = Path.basename(path);
13 | 	if (Fs.statSync(path).isDirectory()) {
14 | 		return;
15 | 	}
16 | 
17 | 	const ext = fileName.match(/(\..+)$/)[1];
18 | 	const base = Path.basename(fileName, ext);
19 | 	const versionedPath = Path.join(
20 | 		Path.dirname(path),
21 | 		`${base}-${Package.version}${ext}`,
22 | 	);
23 | 	Fs.renameSync(path, versionedPath);
24 | });
25 | 


--------------------------------------------------------------------------------
/src/controller/controller.ts:
--------------------------------------------------------------------------------
  1 | import {Controller, Value, ViewProps} from '@tweakpane/core';
  2 | 
  3 | import {FilePluginView} from '../view/view.js';
  4 | 
  5 | interface Config {
  6 | 	value: Value<File | null>;
  7 | 	viewProps: ViewProps;
  8 | 
  9 | 	invalidFiletypeMessage: string;
 10 | 	lineCount: number;
 11 | 	filetypes?: string[];
 12 | }
 13 | 
 14 | export class FilePluginController implements Controller<FilePluginView> {
 15 | 	public readonly value: Value<File | null>;
 16 | 
 17 | 	public readonly view: FilePluginView;
 18 | 	public readonly viewProps: ViewProps;
 19 | 
 20 | 	private readonly config: Config;
 21 | 
 22 | 	constructor(doc: Document, config: Config) {
 23 | 		this.value = config.value;
 24 | 		this.viewProps = config.viewProps;
 25 | 		this.view = new FilePluginView(doc, {
 26 | 			viewProps: this.viewProps,
 27 | 			value: config.value,
 28 | 			invalidFiletypeMessage: config.invalidFiletypeMessage,
 29 | 			lineCount: config.lineCount,
 30 | 			filetypes: config.filetypes,
 31 | 		});
 32 | 		this.config = config;
 33 | 
 34 | 		// Bind event handlers
 35 | 		this.onFile = this.onFile.bind(this);
 36 | 		this.onDrop = this.onDrop.bind(this);
 37 | 		this.onDragOver = this.onDragOver.bind(this);
 38 | 		this.onDragLeave = this.onDragLeave.bind(this);
 39 | 		this.onDeleteClick = this.onDeleteClick.bind(this);
 40 | 
 41 | 		this.view.input.addEventListener('change', this.onFile);
 42 | 		this.view.element.addEventListener('drop', this.onDrop);
 43 | 		this.view.element.addEventListener('dragover', this.onDragOver);
 44 | 		this.view.element.addEventListener('dragleave', this.onDragLeave);
 45 | 		this.view.deleteButton.addEventListener('click', this.onDeleteClick);
 46 | 
 47 | 		this.value.emitter.on('change', () => this.handleValueChange());
 48 | 
 49 | 		// Dispose event handlers
 50 | 		this.viewProps.handleDispose(() => {
 51 | 			this.view.input.removeEventListener('change', this.onFile);
 52 | 			this.view.element.removeEventListener('drop', this.onDrop);
 53 | 			this.view.element.removeEventListener('dragover', this.onDragOver);
 54 | 			this.view.element.removeEventListener('dragleave', this.onDragLeave);
 55 | 			this.view.deleteButton.removeEventListener('click', this.onDeleteClick);
 56 | 		});
 57 | 	}
 58 | 
 59 | 	/**
 60 | 	 * Called when the value of the input changes.
 61 | 	 * @param event change event.
 62 | 	 */
 63 | 	private onFile(_event: Event): void {
 64 | 		const input = this.view.input;
 65 | 
 66 | 		// Check if user has chosen a file.
 67 | 		// If it's valid, we update the value. Otherwise, show warning.
 68 | 		if (input.files && input.files.length > 0) {
 69 | 			const file = input.files[0];
 70 | 			if (!this.isFileValid(file)) {
 71 | 				this.showWarning();
 72 | 			} else {
 73 | 				this.value.setRawValue(file);
 74 | 			}
 75 | 		}
 76 | 	}
 77 | 
 78 | 	/**
 79 | 	 * Shows warning text for 5 seconds.
 80 | 	 */
 81 | 	private showWarning() {
 82 | 		this.view.warning.style.display = 'block';
 83 | 		setTimeout(() => {
 84 | 			// Resetting warning text
 85 | 			this.view.warning.style.display = 'none';
 86 | 		}, 5000);
 87 | 	}
 88 | 
 89 | 	/**
 90 | 	 * Checks if the file is valid with the given filetypes.
 91 | 	 * @param file File object
 92 | 	 * @returns true if the file is valid.
 93 | 	 */
 94 | 	private isFileValid(file: File): boolean {
 95 | 		const filetypes = this.config.filetypes;
 96 | 		const fileExtension = '.' + file.name.split('.').pop()?.toLowerCase();
 97 | 		return !(
 98 | 			filetypes &&
 99 | 			filetypes.length > 0 &&
100 | 			!filetypes.includes(fileExtension) &&
101 | 			fileExtension
102 | 		);
103 | 	}
104 | 
105 | 	/**
106 | 	 * Event handler when the delete HTML button is clicked.
107 | 	 * It resets the `rawValue` of the controller.
108 | 	 */
109 | 	private onDeleteClick() {
110 | 		const file = this.value.rawValue;
111 | 
112 | 		if (file) {
113 | 			// Resetting the value
114 | 			this.value.setRawValue(null);
115 | 
116 | 			// Resetting the input
117 | 			this.view.input.value = '';
118 | 
119 | 			// Resetting the warning text
120 | 			this.view.warning.style.display = 'none';
121 | 		}
122 | 	}
123 | 
124 | 	/**
125 | 	 * Called when the user drags over a file.
126 | 	 * Updates the style of the container.
127 | 	 * @param event drag event.
128 | 	 */
129 | 	private onDragOver(event: Event) {
130 | 		event.preventDefault();
131 | 		this.view.changeDraggingState(true);
132 | 	}
133 | 
134 | 	/**
135 | 	 * Called when the user leaves the container while dragging.
136 | 	 * Updates the style of the container.
137 | 	 */
138 | 	private onDragLeave() {
139 | 		this.view.changeDraggingState(false);
140 | 	}
141 | 
142 | 	/**
143 | 	 * Called when the user drops a file in the container.
144 | 	 * Either shows a warning if it's invalid or updates the value if it's valid.
145 | 	 * @param ev drag event.
146 | 	 */
147 | 	private onDrop(ev: DragEvent) {
148 | 		if (ev instanceof DragEvent) {
149 | 			// Prevent default behavior (Prevent file from being opened)
150 | 			ev.preventDefault();
151 | 
152 | 			if (ev.dataTransfer) {
153 | 				if (ev.dataTransfer.files) {
154 | 					// We only change the value if the user has dropped a single file
155 | 					const filesArray = [ev.dataTransfer.files][0];
156 | 					if (filesArray.length == 1) {
157 | 						const file = filesArray.item(0);
158 | 						if (file) {
159 | 							if (!this.isFileValid(file)) {
160 | 								this.showWarning();
161 | 							} else {
162 | 								this.value.setRawValue(file);
163 | 							}
164 | 						}
165 | 					}
166 | 				}
167 | 			}
168 | 		}
169 | 		this.view.changeDraggingState(false);
170 | 	}
171 | 
172 | 	/**
173 | 	 * Called when the value (bound to the controller) changes (e.g. when the file is selected).
174 | 	 */
175 | 	private handleValueChange() {
176 | 		const fileObj = this.value.rawValue;
177 | 
178 | 		const containerEl = this.view.container;
179 | 		const textEl = this.view.text;
180 | 		const fileIconEl = this.view.fileIcon;
181 | 		const deleteButton = this.view.deleteButton;
182 | 
183 | 		if (fileObj) {
184 | 			// Setting the text of the file to the element
185 | 			textEl.textContent = fileObj.name;
186 | 
187 | 			// Removing icon and adding text
188 | 			containerEl.appendChild(textEl);
189 | 			if (containerEl.contains(fileIconEl)) {
190 | 				containerEl.removeChild(fileIconEl);
191 | 			}
192 | 
193 | 			// Resetting warning text
194 | 			this.view.warning.style.display = 'none';
195 | 
196 | 			// Adding button to delete
197 | 			deleteButton.style.display = 'block';
198 | 			containerEl.style.border = 'unset';
199 | 		} else {
200 | 			// Setting the text of the file to the element
201 | 			textEl.textContent = '';
202 | 
203 | 			// Removing text and adding icon
204 | 			containerEl.appendChild(fileIconEl);
205 | 			containerEl.removeChild(textEl);
206 | 
207 | 			// Resetting warning text
208 | 			this.view.warning.style.display = 'none';
209 | 
210 | 			// Hiding button and resetting border
211 | 			deleteButton.style.display = 'none';
212 | 			containerEl.style.border = '1px dashed #717070';
213 | 		}
214 | 	}
215 | }
216 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import {TweakpaneFileInputPlugin} from './plugin.js';
2 | 
3 | // Export your plugin(s) as constant `plugins`
4 | export const id = 'file-input';
5 | export const css = '__css__';
6 | export const plugins = [TweakpaneFileInputPlugin];
7 | 


--------------------------------------------------------------------------------
/src/plugin.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 | 	BaseInputParams,
 3 | 	BindingTarget,
 4 | 	CompositeConstraint,
 5 | 	createPlugin,
 6 | 	InputBindingPlugin,
 7 | 	parseRecord,
 8 | } from '@tweakpane/core';
 9 | 
10 | import {FilePluginController} from './controller/controller.js';
11 | 
12 | export interface PluginInputParams extends BaseInputParams {
13 | 	view: 'file-input';
14 | 	invalidFiletypeMessage?: string;
15 | 	lineCount?: number;
16 | 	filetypes?: string[];
17 | }
18 | 
19 | export const TweakpaneFileInputPlugin: InputBindingPlugin<
20 | 	File | null,
21 | 	string,
22 | 	PluginInputParams
23 | > = createPlugin({
24 | 	id: 'file-input',
25 | 
26 | 	// type: The plugin type.
27 | 	type: 'input',
28 | 
29 | 	accept(exValue: unknown, params: Record<string, unknown>) {
30 | 		if (typeof exValue !== 'string') {
31 | 			// Return null to deny the user input
32 | 			return null;
33 | 		}
34 | 
35 | 		// Parse parameters object
36 | 		const result = parseRecord<PluginInputParams>(params, (p) => ({
37 | 			// `view` option may be useful to provide a custom control for primitive values
38 | 			view: p.required.constant('file-input'),
39 | 
40 | 			invalidFiletypeMessage: p.optional.string,
41 | 			lineCount: p.optional.number,
42 | 			filetypes: p.optional.array(p.required.string),
43 | 		}));
44 | 		if (!result) {
45 | 			return null;
46 | 		}
47 | 
48 | 		// Return a typed value and params to accept the user input
49 | 		return {
50 | 			initialValue: exValue,
51 | 			params: result,
52 | 		};
53 | 	},
54 | 
55 | 	binding: {
56 | 		reader(_args) {
57 | 			return (exValue: unknown): File | null => {
58 | 				// Convert an external unknown value into the internal value
59 | 				return exValue instanceof File ? exValue : null;
60 | 			};
61 | 		},
62 | 
63 | 		constraint(_args) {
64 | 			return new CompositeConstraint([]);
65 | 		},
66 | 
67 | 		writer(_args) {
68 | 			return (target: BindingTarget, inValue) => {
69 | 				// Use `target.write()` to write the primitive value to the target,
70 | 				// or `target.writeProperty()` to write a property of the target
71 | 				target.write(inValue);
72 | 			};
73 | 		},
74 | 	},
75 | 
76 | 	controller(args) {
77 | 		const defaultNumberOfLines = 3;
78 | 		const defaultFiletypeWarningText = 'Unaccepted file type.';
79 | 
80 | 		// Create a controller for the plugin
81 | 		return new FilePluginController(args.document, {
82 | 			value: args.value,
83 | 			viewProps: args.viewProps,
84 | 
85 | 			invalidFiletypeMessage:
86 | 				args.params.invalidFiletypeMessage ?? defaultFiletypeWarningText,
87 | 			lineCount: args.params.lineCount ?? defaultNumberOfLines,
88 | 			filetypes: args.params.filetypes,
89 | 		});
90 | 	},
91 | });
92 | 


--------------------------------------------------------------------------------
/src/sass/plugin.scss:
--------------------------------------------------------------------------------
  1 | // Import core styles
  2 | @use '../../node_modules/@tweakpane/core/lib/sass/tp';
  3 | 
  4 | // Styles for the container
  5 | .#{tp.$prefix}-ctnv {
  6 | 	// Extend a general input view style
  7 | 	@extend %tp-input;
  8 | 
  9 | 	cursor: pointer;
 10 | 	display: flex;
 11 | 	justify-content: center;
 12 | 	align-items: center;
 13 | 	overflow: hidden;
 14 | 	position: relative;
 15 | 
 16 | 	height: 100%;
 17 | 	width: 100%;
 18 | 
 19 | 	border: 1px dashed #717070;
 20 | 	-webkit-border-radius: 5px;
 21 | 	border-radius: 5px;
 22 | 
 23 | 	&.#{tp.$disabled} {
 24 | 		opacity: 0.5;
 25 | 	}
 26 | 
 27 | 	&_input_area_dragging {
 28 | 		border: 1px dashed rgb(103 116 255);
 29 | 		background-color: #5858b93b;
 30 | 	}
 31 | 
 32 | 	&_warning {
 33 | 		color: tp.cssVar('input-fg');
 34 | 		bottom: 2px;
 35 | 		display: inline-block;
 36 | 		font-size: 0.9em;
 37 | 		height: max-content;
 38 | 		line-height: 1.5;
 39 | 		opacity: 0.5;
 40 | 		white-space: normal;
 41 | 		width: max-content;
 42 | 		word-wrap: break-word;
 43 | 		text-align: right;
 44 | 		width: 100%;
 45 | 		margin-top: var(--cnt-vp);
 46 | 	}
 47 | 
 48 | 	&_text {
 49 | 		// You can use CSS variables for styling. See declarations for details:
 50 | 		// ../../node_modules/@tweakpane/core/lib/sass/common/_defs.scss
 51 | 
 52 | 		color: tp.cssVar('input-fg');
 53 | 
 54 | 		bottom: 2px;
 55 | 		display: inline-block;
 56 | 		font-size: 0.9em;
 57 | 		height: max-content;
 58 | 		line-height: 0.9;
 59 | 		margin: 0.2rem;
 60 | 		max-height: 100%;
 61 | 		max-width: 100%;
 62 | 		opacity: 0.5;
 63 | 		position: absolute;
 64 | 		right: 2px;
 65 | 		text-align: right;
 66 | 		white-space: normal;
 67 | 		width: max-content;
 68 | 		word-wrap: break-word;
 69 | 	}
 70 | 
 71 | 	&_frac {
 72 | 		background-color: tp.cssVar('input-fg');
 73 | 		border-radius: 1px;
 74 | 		height: 2px;
 75 | 		left: 50%;
 76 | 		margin-top: -1px;
 77 | 		position: absolute;
 78 | 		top: 50%;
 79 | 	}
 80 | 
 81 | 	// https://css.gg/software-upload
 82 | 	&_icon {
 83 | 		box-sizing: border-box;
 84 | 		position: absolute;
 85 | 		display: block;
 86 | 		transform: scale(var(--ggs, 1));
 87 | 		width: 16px;
 88 | 		height: 6px;
 89 | 		border: 2px solid;
 90 | 		border-top: 0;
 91 | 		border-bottom-left-radius: 2px;
 92 | 		border-bottom-right-radius: 2px;
 93 | 		margin-top: 8px;
 94 | 		opacity: 0.5;
 95 | 	}
 96 | 
 97 | 	&_icon::after {
 98 | 		content: '';
 99 | 		display: block;
100 | 		box-sizing: border-box;
101 | 		position: absolute;
102 | 		width: 8px;
103 | 		height: 8px;
104 | 		border-left: 2px solid;
105 | 		border-top: 2px solid;
106 | 		transform: rotate(45deg);
107 | 		left: 2px;
108 | 		bottom: 4px;
109 | 	}
110 | 
111 | 	&_icon::before {
112 | 		content: '';
113 | 		display: block;
114 | 		box-sizing: border-box;
115 | 		position: absolute;
116 | 		border-radius: 3px;
117 | 		width: 2px;
118 | 		height: 10px;
119 | 		background: currentColor;
120 | 		left: 5px;
121 | 		bottom: 3px;
122 | 	}
123 | }
124 | 
125 | // Styles for the button
126 | .#{tp.$prefix}-btnv_b {
127 | 	margin-top: 10px;
128 | }
129 | 
130 | // Styles for the input
131 | .#{tp.$prefix}-inputv {
132 | 	opacity: 0;
133 | }
134 | 


--------------------------------------------------------------------------------
/src/view/view.ts:
--------------------------------------------------------------------------------
 1 | import {ClassName, Value, View, ViewProps} from '@tweakpane/core';
 2 | 
 3 | interface Config {
 4 | 	value: Value<File | null>;
 5 | 	viewProps: ViewProps;
 6 | 
 7 | 	invalidFiletypeMessage: string;
 8 | 	lineCount: number;
 9 | 	filetypes?: string[];
10 | }
11 | 
12 | // Create a class name generator from the view name
13 | // ClassName('tmp') will generate a CSS class name like `tp-tmpv`
14 | const containerClassName = ClassName('ctn');
15 | const inputClassName = ClassName('input');
16 | const deleteButtonClassName = ClassName('btn');
17 | 
18 | export class FilePluginView implements View {
19 | 	public readonly element: HTMLElement;
20 | 
21 | 	public readonly container: HTMLElement;
22 | 
23 | 	public input: HTMLInputElement;
24 | 	public text: HTMLSpanElement;
25 | 	public warning: HTMLSpanElement;
26 | 	public fileIcon: HTMLElement;
27 | 	public deleteButton: HTMLButtonElement;
28 | 
29 | 	constructor(doc: Document, config: Config) {
30 | 		// Root
31 | 		this.element = doc.createElement('div');
32 | 
33 | 		// Container
34 | 		this.container = doc.createElement('div');
35 | 		this.container.classList.add(containerClassName());
36 | 		config.viewProps.bindClassModifiers(this.container);
37 | 
38 | 		// File input field
39 | 		this.input = doc.createElement('input');
40 | 		this.input.classList.add(inputClassName());
41 | 		this.input.setAttribute('type', 'file');
42 | 		this.input.setAttribute(
43 | 			'accept',
44 | 			config.filetypes ? config.filetypes.join(',') : '*',
45 | 		);
46 | 		this.input.style.height = `calc(20px * ${config.lineCount})`;
47 | 
48 | 		// Icon
49 | 		this.fileIcon = doc.createElement('div');
50 | 		this.fileIcon.classList.add(containerClassName('icon'));
51 | 
52 | 		// Text
53 | 		this.text = doc.createElement('span');
54 | 		this.text.classList.add(containerClassName('text'));
55 | 
56 | 		// Warning text
57 | 		this.warning = doc.createElement('span');
58 | 		this.warning.classList.add(containerClassName('warning'));
59 | 		this.warning.innerHTML = config.invalidFiletypeMessage;
60 | 		this.warning.style.display = 'none';
61 | 
62 | 		// Delete button
63 | 		this.deleteButton = doc.createElement('button');
64 | 		this.deleteButton.classList.add(deleteButtonClassName('b'));
65 | 		this.deleteButton.innerHTML = 'Delete';
66 | 		this.deleteButton.style.display = 'none';
67 | 
68 | 		this.container.appendChild(this.input);
69 | 		this.container.appendChild(this.fileIcon);
70 | 		this.element.appendChild(this.container);
71 | 		this.element.appendChild(this.warning);
72 | 		this.element.appendChild(this.deleteButton);
73 | 	}
74 | 
75 | 	/**
76 | 	 * Changes the style of the container based on whether the user is dragging or not.
77 | 	 * @param state if the user is dragging or not.
78 | 	 */
79 | 	changeDraggingState(state: boolean) {
80 | 		if (state) {
81 | 			this.container?.classList.add(containerClassName('input_area_dragging'));
82 | 		} else {
83 | 			this.container?.classList.remove(
84 | 				containerClassName('input_area_dragging'),
85 | 			);
86 | 		}
87 | 	}
88 | }
89 | 


--------------------------------------------------------------------------------
/test/browser.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="UTF-8" />
 5 | 		<title></title>
 6 | 	</head>
 7 | 	<body>
 8 | 		<script type="module">
 9 | 			import {Pane} from '../node_modules/tweakpane/dist/tweakpane.js';
10 | 			import * as TweakpaneFileImportPlugin from '../dist/tweakpane-plugin-file-import.js';
11 | 
12 | 			const params = {
13 | 				file: '',
14 | 			};
15 | 			const pane = new Pane();
16 | 
17 | 			// Register plugin
18 | 			pane.registerPlugin(TweakpaneFileImportPlugin);
19 | 
20 | 			pane
21 | 				.addBinding(params, 'file', {
22 | 					view: 'file-input',
23 | 					invalidFiletypeMessage: "We can't accept those filetypes!",
24 | 					lineCount: 3,
25 | 					filetypes: ['.png', '.jpeg'],
26 | 				})
27 | 				.on('change', (ev) => {
28 | 					console.log(ev.value);
29 | 				});
30 | 
31 | 			window.pane = pane;
32 | 		</script>
33 | 	</body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/tsconfig-dts.json:
--------------------------------------------------------------------------------
1 | {
2 | 	"extends": "./tsconfig.json",
3 | 	"compilerOptions": {
4 | 		"declaration": true,
5 | 		"emitDeclarationOnly": true,
6 | 		"outDir": "../dist/types"
7 | 	}
8 | }
9 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | 	"compilerOptions": {
3 | 		"lib": ["DOM", "ES2015"],
4 | 		"moduleResolution": "Node",
5 | 		"strict": true,
6 | 		"target": "ES6"
7 | 	}
8 | }
9 | 


--------------------------------------------------------------------------------