diogo Posted March 23, 2013 Share Posted March 23, 2013 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 3 Link to comment Share on other sites More sharing options...
diogo Posted March 24, 2013 Author Share Posted March 24, 2013 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 5 Link to comment Share on other sites More sharing options...
ryan Posted March 24, 2013 Share Posted March 24, 2013 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 More sharing options...
diogo Posted March 24, 2013 Author Share Posted March 24, 2013 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 More sharing options...
horst Posted March 24, 2013 Share Posted March 24, 2013 Hi Diogo, I don't have Chrome installed With Firefox I have tested it on the site http://pasteboard.co/ There it works. Would be cool if other Browsers could be supported too. Link to comment Share on other sites More sharing options...
diogo Posted March 24, 2013 Author Share Posted March 24, 2013 I will have to investigate more, but it may take some time to make something cross browser. Although they say it's outdated, this is not very motivating http://support.mozilla.org/en-US/kb/Granting%20JavaScript%20access%20to%20the%20clipboard Link to comment Share on other sites More sharing options...
diogo Posted March 24, 2013 Author Share Posted March 24, 2013 Here is a screencast to show this functionality for those who arre curious but can't or don't want to test: This is my first screencast ever 4 Link to comment Share on other sites More sharing options...
ryan Posted March 27, 2013 Share Posted March 27, 2013 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 More sharing options...
diogo Posted March 27, 2013 Author Share Posted March 27, 2013 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. 1 Link to comment Share on other sites More sharing options...
bernhard Posted September 5, 2015 Share Posted September 5, 2015 any news on this? Link to comment Share on other sites More sharing options...
diogo Posted September 5, 2015 Author Share Posted September 5, 2015 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. 1 Link to comment Share on other sites More sharing options...
bernhard Posted September 5, 2015 Share Posted September 5, 2015 Hi diogo, that's a pity but I can understand that this has no priority. Did some research and found https://github.com/layerssss/paste.js/blob/master/README.md 1 Link to comment Share on other sites More sharing options...
bernhard Posted November 30, 2017 Share Posted November 30, 2017 would be VERY nice to have this copy-paste functionality for CKEditor at least: https://sdk.ckeditor.com/samples/fileupload.html#uploading-dropped-and-pasted-images (working demo) see also Link to comment Share on other sites More sharing options...
bernhard Posted January 29, 2018 Share Posted January 29, 2018 For reference, copy&paste for images is finally in the core: https://processwire.com/blog/posts/pw-3.0.87/ 3 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now