tweakpane / plugin-essentials

Essential components for Tweakpane
https://cocopon.github.io/tweakpane/plugins/#essentials
MIT License
74 stars 6 forks source link

[Feature request] File type field #8

Open RedSparr0w opened 2 years ago

RedSparr0w commented 2 years ago

Add a field to allow uploading a local file

Concept image: image

Optional parameters:

lines: How many lines the field should take up (similar to FPS graph)
accept/filetypes: Which file types we should accept
multiple (boolean): If we should accept multiple files

The field should be clickable to bring up a file select window or accept drag and dropping a file into the field too.

martifenosa commented 2 years ago

Had this same case. Thought my solution might work for you @RedSparr0w . All filters can be applied to the input itself.

Used this workaround with a button: Edit: 'f' its just a pane page in my case.

let file = null;
f.addButton({
    title: 'Upload file'
}).on('click', () => {
    const input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.style.opacity = '0';
    input.style.position = 'fixed';
    document.body.appendChild(input);
    input.addEventListener('input', (ev) => {
        file = input.files[0];
        document.body.removeChild(input);                
    }, { once: true })
    input.click();
})
LuchoTurtle commented 1 year ago

I know I'm a wee late but I needed something like this so I created a small package inspired by this - https://github.com/LuchoTurtle/tweakpane-plugin-file-import. Doesn't support multiple files yet but all contributions are welcome! Thanks @RedSparr0w for the inspiration :D