NaturalFile: support for paste #93
Description
I find pasting file is a very convenient way to upload things, especially to upload screenshots not saved to disk. We could add paste support to our NaturalFile module to support this use-case.
There are two variants to consider. First is paste on a specific HTML element. That would work well inside a textarea or text input, but anything else would probably be super hard for end-user to actually use. Because he can't easily "select" an HTML element as a paste target.
So the second variant would be a global paste on window. It is much easier for end-user: paste anywhere and it will work. But it has some limitations. If we have two possible uploads on a single page then we won't know for sure which one is supposed to received the pasted files.
Global via service
I'm in favor of the second, more global approach, and delegate the responsibility to dispatch to the correct component to the application.
So usage could be something like:
<div>Upload button for normal case (but strictly speaking not mandatory)</div>
<input type="file" naturalFileSelect (filesChange)="upload($event)" />class MyComponent {
constructor(private naturalFileService: NaturalFileService) {
naturalFileService.pastedFiles.pipe(takeUntil(this.ngUnsubscribe)).subscribe((selection: FileSelection) => {
// Easily forward to the proper actions, even if there are multiple actions possible
this.upload(selection);
})
}
// Method shared by the paste event and the input element
public upload(selection: FileSelection): void {
// actually do something here...
}
}Global via component
Previous solution is relatively straightforward, but that still requires a tiny bit more code to set things up. We could choose an even simpler variant where the paste is enabled on the component itself. The tricky part with that is that it could be too easy to have two uploads with paste and we couldn't know which one of the two would receive the files.
Ideally would look like:
<div>Upload button (or other element) is required</div>
<input type="file" naturalFileSelect (filesChange)="upload($event)" [enablePaste]="true" />class MyComponent {
constructor() {
// Nothing to do here !
}
// Method shared by the paste event and the input element
public upload(selection: FileSelection): void {
// actually do something here...
}
}But what if, by mistake, we wend up with a pages looking that ? Is upload1 or upload2 called on paste ?
<div>Upload button (or other element) is required</div>
<input type="file" naturalFileSelect (filesChange)="upload1($event)" [enablePaste]="true" />
<div>Another upload, maybe from another child component deep in the hierarchy</div>
<input type="file" naturalFileSelect (filesChange)="upload2($event)" [enablePaste]="true" />But maybe the same ambiguity also exist for the service variant if two unrelated child components use the service at the same time ?
@stissot @sambaptista, I'd like your opinion when you have time (nothing urgent at all)