Jump to content

upload from clipboard


diogo
 Share

Recommended Posts

Would be nice to be able to upload images from the clipboard. I investigated a bit how the image field could be extended with this and found some useful information here http://www.smartjava.org/content/copy-and-paste-images-your-browser-using-w3c-clipboard-api

Turns out that we couldn't just catch a ctl+v command like in that example, because we have text area and other image fields where we might be pasting on the same page. The solution could be to create a hidden (opacity:0) element somewhere in the uploads box with the attribute "ContentEditable" (I tried, for intance, over the "drag and drop files in here" span) so we can use the paste entry in the context menu. Here is an example of how it can work https://github.com/JoelBesada/pasteboard/blob/master/assets/js/modules/copyandpaste.coffee from the source code of http://pasteboard.co/

You people think this might be usefull? Is it doable? edit: see the next post ;)

  • Like 3
Link to comment
Share on other sites

I managed to make this work :)
 
For testing purposes, I'm using the drag and drop files in here span as a placeholder to paste the image from the clipboard and I marked it with a yellow background to make it obvious (I know it doesn't make sense, but it's just for testing). To paste the file just click on that span and ctrl+v or right click on it and paste from the context menu.
 
It's late and I want to sleep, so no more explanations for today. But if you want to test all you need is to replace the inputfieldFile.js inside the inputfieldFile module folder by the file attached in this post.
 
BE WARNED: THIS IS HIGHLY EXPERIMENTAL (but I think it won't blow your server)


 
edit: I can't upload a .js file. Just change from .txt to .js or paste the contents

edit2: made some corrections with a fresh mind, after sleeping

edit3: changed some details on the code. The file is new

InputfieldFile.txt

  • Like 5
Link to comment
Share on other sites

Very cool Diogo! Tested out here and works beautifully. Did a flat copy from Photoshop and went straight into the site. So useful, seems like this belongs in PW's core InputfieldFile.js, if that's alright with you? Because this only affects the JS side, it doesn't seem like there would be any potential security concerns or problems to worry about. A few questions:

Do you know how broad browser support is for this?

Is there any benefit to making it configurable? (i.e. "do you want to support pasting of images? yes/no"). I'm thinking that would be unnecessary configuration, but just checking. 

For broader theme support, I'm thinking the text shouldn't be yellow or caps, but just the same as before except with 'paste' linked: "Drag or paste files in here"

Link to comment
Share on other sites

Glad you like it Ryan!

Browser support is sparse. The code I use works only on chrome but I think there are ways of making it work in firefox (not sure, though). As it is, if you try to paste an image in firefox it only pastes to the editable text.

I would be happy if this would go in the core, but it still needs some work. I'm using that span just for testing (ya, also the yellow is just for testing), the definitive solution will be having a hidden input that gets focused by pressing another element. Maybe a button or area, I'm open to suggestions...

Personally, I wouldn't make it configurable.

The code still needs some work of course. I'm not checking if the browser supports these method before activating the functionality, but it will have to be.

Link to comment
Share on other sites

I would be happy if this would go in the core, but it still needs some work. I'm using that span just for testing (ya, also the yellow is just for testing), the definitive solution will be having a hidden input that gets focused by pressing another element. Maybe a button or area, I'm open to suggestions...

Let me know when you think it's stable/ready, as I'd really like to have this built-in to the core. It doesn't seem like there's any real overhead to this, just a very handy tweak to have when you want it. I can see using this quite often. 

One question: when you are copying/pasting, say from Photoshop, where does the JPEG compression actually take place? Does Chrome compress it as it pastes, or how does that work?

Great screencast BTW!

Link to comment
Share on other sites

Let me know when you think it's stable/ready, as I'd really like to have this built-in to the core.

Right now I don't have an idea of when it will happen as making this wasn't in my plans, but I might dedicate some hours to this next week to finish.

One question: when you are copying/pasting, say from Photoshop, where does the JPEG compression actually take place? Does Chrome compress it as it pastes, or how does that work?

If I'm not wrong, this only searches for the binary data on the clipboard and uploads it as a file. So that must depend on how the application puts the data on the clipboard.

  • Like 1
Link to comment
Share on other sites

  • 2 years later...

Not really, browsers and clipboard are a muddy area. I encountered too many problems to implement something that would be secondary to most people. Not planning to go forward with this.

  • Like 1
Link to comment
Share on other sites

  • 2 years later...
  • 1 month later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...