NaturalFile: support for paste

[PowerKiKi]

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)

[sambaptista]

I wouldn't implement it. I don't feel a need for it.

But I'm not concerned by the usecase you mention. All my screen capture workflow generates a file without puting into the clipboard. Windows use to put screencapture into the clipboard, but it's more a usecase for debug. I think most of our customers upload pdf or photos.

Despite being power user, I never though in copy/paste from file system to web page for the reasons you mentionned. It's not clear what is focussed and where you're gonna upload.

I let you free on your decisions on this feature if you feel confident into developing it.

[PowerKiKi]

I kinda agree. I love pasting things, but the implementation is not that easy and I am not so sure we have strong use-cases for it... I'll keep this open for a while, but I suppose we could end up closing it as rejected in the future...