Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature request] File type field #8

Open
RedSparr0w opened this issue Mar 8, 2022 · 2 comments
Open

[Feature request] File type field #8

RedSparr0w opened this issue Mar 8, 2022 · 2 comments

Comments

@RedSparr0w
Copy link

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
Copy link

martifenosa commented Mar 31, 2022

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants