Pasting image to focused FilePond, but affects all FilePond instances

[trydofor]

Is there an existing issue for this?

• I have searched the existing issues

Have you updated Vue FilePond, FilePond, and all plugins?

• I have updated FilePond and its plugins

Describe the bug

https://codesandbox.io/s/epic-wilbur-brhks?file=/src/components/HelloWorld.vue

As HelloWorld.vue showed, there are 2 instances of FilePond1 and FilePond2.
and I paste a clipboard image to FilePond1, and want only FilePond1 get the image.
but both FilePond1 and FilePond2 get the image.

Reproduction

in https://codesandbox.io/s/epic-wilbur-brhks?file=/src/components/HelloWorld.vue

• mouse on first FilePond1 on the top
• paste image in clipboard to FilePond1
• all FilePond instance got the image

Environment

- Device:Macbook 
- OS: catalina
- Broser: chrome
- Vue version: 3
- vue-filepond: 7

[rikschennink]

Currently this is not supported. FilePond will test if the current element is a textarea or input, and if so, will not handle the paste action. Else all FilePond instances will pick it up as it's a document level event.

To know where to add the pasted file we'd need to focus the filepond field but focussing it also opens the file browser.

Alternatively we could use the paste location, not sure that is available on mobile devices and/or files can be pasted there.

[trydofor]

thanks @rikschennink
another suggest, i read FilePond api
could it's ok if let user handle focus event and browse() method

[rikschennink]

@trydofor I'm not sure if I understand what you mean, please elaborate

[anonghuser]

@trydofor you could try to update the allowPaste option on the different instances based on their or nearby/related inputs/fieldsets/forms visibility/focus status.

@rikschennink instead of constantly keeping track of visibility/focus changes and keeping allowPaste accurate at all times it could be easier in some cases to just make a decision at the time of pasting. So a cancellable onpaste event might be a good addition.

P.S.: The thing you mentioned where paste is ignored with text input or textarea in focus might be bad for some use cases too, I hope this can be overridden.

[captenmasin]

@trydofor you could try to update the allowPaste option on the different instances based on their or nearby/related inputs/fieldsets/forms visibility/focus status.

@rikschennink instead of constantly keeping track of visibility/focus changes and keeping allowPaste accurate at all times it could be easier in some cases to just make a decision at the time of pasting. So a cancellable onpaste event might be a good addition.

P.S.: The thing you mentioned where paste is ignored with text input or textarea in focus might be bad for some use cases too, I hope this can be overridden.

I'm having this issue right now in fact. I have a comment section component which includes a comment form and a reply form for each comment, and I'd really like to be able to paste whilst focussed in the textarea and instantly upload an image (similar to this Github text form or the twitter form)

[rikschennink]

@captenmasin If you listen for the 'paste' event on the textarea does it fire? If so you can get any files and add them to the FilePond instance with the addFile method.

[bretto36]

#1048 i created this to attempt to fix this.

I'm also trying to handle it in a plugin but am struggling. I can listen in the plugin for the ADD_ITEMS filter but i can't figure out how to get the element that is calling ADD_ITEMS

My thought was to filter out the files that didn't belong to that filepond instance... anyone got any ability to get the root from the filter?

addFilter(
'ADD_ITEMS',
(files, dispatch) => new Promise((resolve) => {
console.log('ADD_ITEMS', files, dispatch);
resolve(files);
})
);

[bretto36]

Update i was doing this through Filament - if it helps anyone i ended up doing

FileUpload::make('files')
                    ->multiple()
                    ->required()
                    ->pasteable(false)
                    ->extraAlpineAttributes([
                        '@mouseleave' => 'pond.allowPaste = false',
                        '@mouseenter' => 'pond.allowPaste = true',
                    ]),

By adding the extraAlpineAttributes it turns the allowPaste off and on just for the component