layerssss / paste.js

read image/text data from clipboard (cross-browser)
http://layerssss.github.io/paste.js/
MIT License
463 stars 94 forks source link

Pasting Files #43

Open eduo opened 7 years ago

eduo commented 7 years ago

Currently paste.js is an ideal solution for handling copy and paste programmatically of both text and bitmaps. Have you ever considered including also pasting of files? In some platforms (Windows, especially) a common way of copying files around is by pasting them (I'd venture it's as common as drag & drop on Mac).

I know you can read files with JavaScript ( https://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-selecting-files-dnd ) but I'm not sure if the events that allow file reading. If they get enough information from "pasted files". While testing support for Safari I noticed in the demo scenarios pasting a file in contenteditable pastes the file icon (I didn't expect it to paste the contents, but in the other fields only the file name was pasted as text).

Have you considered adding file paste support (so it behaves similar to a file select input button)?

jmuheim commented 7 years ago

This is a very good idea!

I'm creating a markdown online editor which at the time being allows pasting image files directly into a textarea, which then automatically uploads the file and inserts a markdown image reference into the textarea.

It would be very useful if I could also upload e.g. PDF files, audio files, etc., and act upon the pasted file in some way.

Is there any way to improve paste.js to do something like this?

textarea.on('pasteImage', (ev, pastedData) =>
    # Upload image and insert reference into textarea
).on 'pasteText', (ev, pastedData) ->
    # Insert the text into textarea
).on 'pastePdf', (ev, pastedData) -> # Or any other file type
    # Upload pdf and insert link into textarea
layerssss commented 7 years ago

This is promising. How ever 2 years ago I noticed that in OSX, when a filed being dragged into the browser, only the icon of the file was received, instead of the file itself.

The only viable data from HTML5 drag'n'drop API at that time being was image / link / download link / data provisioned by JS, dragged from the same or another web page.

I'll see if we can have more capability around that now. I recently also start working on a small paid project with files management capabilities. I will dig into it at some stage.

jmuheim commented 7 years ago

This sounds promising!

Thank you for your great work. Paste.js is a very essential part of my company's daily workflow.

On 15 May 2017, at 10:47, Michael Yin <notifications@github.com mailto:notifications@github.com> wrote:

This is promising. How even I 2 years ago I noticed that in OSX, when a filed being dragged into the browser, only the icon of the file was received, instead of the file itself.

The only viable data from HTML5 drag'n'drop API at that time being was image / link / download link / data provisioned by JS, dragged from the same or another web page.

I'll see if we can have more capability around that now. I'm recently also start working on a small paid project with files management capabilities. I will dig into it at some stage.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/layerssss/paste.js/issues/43#issuecomment-301414374, or mute the thread https://github.com/notifications/unsubscribe-auth/ABuxx7kUEXpPLV7y04FR2gXBuhZuiFEhks5r6BE7gaJpZM4NDpCs.

https://cloud.githubusercontent.com/assets/143418/17495839/a5054eac-5d88-11e6-95fc-7290892c7bb5.png https://cloud.githubusercontent.com/assets/143418/15842166/7c72db34-2c0b-11e6-9aed-b52498112777.png https://github.com/layerssss/paste.js https://github.com/layerssss/paste.js/issues/43#issuecomment-301414374

silverwind commented 7 years ago

I played a bit with this on macOS, but it looks to be impossible to do cross-browser.

I couldn't see a way to access the actual file data in Firefox and Chrome.

eduo commented 6 years ago

Any movement on this?

It seems clear not all browsers support it, but perhaps this could be handled by a pasteFileError event?