A Tweakpane plugin for importing files.
Warning
The version 1.0.0
and upwards of this package
only supports Tweakpane v4
.
If you are still using Tweakpane v3
,
you can only use the v0
of this package.
You can install it.
npm i tweakpane-plugin-file-import@0.2.0
And use it like so.
<script src="https://unpkg.com/tweakpane@3.0.5/dist/tweakpane.js"></script>
<script src="./tweakpane-plugin-file-import.min.js"></script>
<script>
const pane = new Tweakpane.Pane();
pane.registerPlugin(TweakpaneFileImportPlugin);
</script>
You need Tweakpane v4
to install this plugin.
You may use https://unpkg.com/tweakpane-plugin-file-import to get the latest version
and add it as a <script>
tag on your HTML page.
You can install with npm
:
npm i tweakpane-plugin-file-import
And import it like so.
import {Pane} from 'tweakpane';
import * as TweakpaneFileImportPlugin from 'tweakpane-plugin-file-import';
const pane = new Pane();
pane.registerPlugin(TweakpaneFileImportPlugin);
Tip
Check test/browser.html
for an example
of the plugin being used.
Simply initialize the params with an empty string and pass the optional parameters.
const params = {
file: '',
};
// If you're using Tweakpane v3 -------
pane
.addInput(params, 'file', {
view: 'file-input',
lineCount: 3,
filetypes: ['.png', '.jpg'],
invalidFiletypeMessage: "We can't accept those filetypes!"
})
.on('change', (ev) => {
console.log(ev.value);
});
// If you're using Tweakpane v4 -------
pane
.addBinding(params, 'file', {
view: 'file-input',
lineCount: 3,
filetypes: ['.png', '.jpg'],
invalidFiletypeMessage: "We can't accept those filetypes!"
})
.on('change', (ev) => {
console.log(ev.value);
});
property | type | description |
---|---|---|
lineCount | int | Number of lines for the height of the container. Similar to FPS graph |
filetypes | array | Array of valid file extensions. |
invalidFiletypeMessage | string | String shown when the user tries to upload an invalid filetype. |
If you want to contribute to this package, you are free to open a pull request. 😊
Note
You'll need to have Node 16
or upwards installed
in order to properly install and run package.json
script commands.
Install dependencies:
npm install
To build the source code and watch changes, run:
npm start
After this, simply open test/browser.html
to see the results.
This project follows the same structure as any other Tweakpane third-party plugin.
|- src
| |- controller ...... Controller for the custom view
| |- sass ............ Plugin CSS
| `- view ............ Custom view
| |- index.ts ........ Entrypoint
| |- plugin.ts ....... Plugin
|- dist ............... Compiled files
`- test
`- browser.html .... Plugin usage in an HTML file