I noticed a blog post from Google that mentions the ability to paste images directly from the clipboard into a Gmail message if you're using the latest version of Chrome. I tried this with my version of Chrome (12.0.742.91 beta-m) and it works great using control keys or the context menu.
From that behavior I need to assume that the latest version of webkit used in Chrome is able to deal with images in the Javascript paste event, but I have been unable to locate any references to such an enhancement. I believe ZeroClipboard binds to keypress events to trigger its flash functionality and as such wouldn't work through the context menu (also, ZeroClipboard is cross-browser and the post says this works only with Chrome).
So, how does this work and where the enhancement was made to Webkit (or Chrome) that enables the functionality?
I spent some time experimenting with this. It seems to sort of follow the new Clipboard API spec. You can define a "paste" event handler and look at event.clipboardData.items, and call getAsFile() on them to get a Blob. Once you have a Blob, you can use FileReader on it to see what's in it. This is how you can get a data url for the stuff you just pasted in Chrome:
document.onpaste = function (event) {
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
console.log(JSON.stringify(items)); // might give you mime types
for (var index in items) {
var item = items[index];
if (item.kind === 'file') {
var blob = item.getAsFile();
var reader = new FileReader();
reader.onload = function (event) {
console.log(event.target.result); // data url!
};
reader.readAsDataURL(blob);
}
}
};
Once you have a data url you can display the image on the page. If you want to upload it instead, you could use readAsBinaryString, or you could put it into an XHR using FormData.
Edit: Note that the item is of type DataTransferItem. JSON.stringify might not work on the items list, but you should be able to get mime type when you loop over items.
The answer by Nick seems to need small changes to still work :)
// window.addEventListener('paste', ... or
document.onpaste = function (event) {
// use event.originalEvent.clipboard for newer chrome versions
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
console.log(JSON.stringify(items)); // will give you the mime types
// find pasted image among pasted items
var blob = null;
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf("image") === 0) {
blob = items[i].getAsFile();
}
}
// load image if there is a pasted image
if (blob !== null) {
var reader = new FileReader();
reader.onload = function(event) {
console.log(event.target.result); // data url!
};
reader.readAsDataURL(blob);
}
}
Example running code: http://jsfiddle.net/bt7BU/225/
So the changes to nicks answer were:
var items = event.clipboardData.items;
to
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
Also I had to take the second element from the pasted items (first one seems to be text/html if you copy an image from another web page into the buffer). So I changed
var blob = items[0].getAsFile();
to a loop finding the item containing the image (see above)
I didn't know how to answer directly to Nick's answer, hope it is fine here :$ :)
As far as I know -
With HTML 5 features(File Api and the related) - accessing clipboard image data is now possible with plain javascript.
This however fails to work on IE (anything less than IE 10). Don't know much about IE10 support also.
For IE the optiens that I believe are the 'fallback' options are
either using Adobe's AIR api
or
using a signed applet
Related
This question already has answers here:
Check if file has changed using HTML5 File API
(3 answers)
Closed 2 years ago.
I have a web app, where the user can select a local file as input, using the html5 FileReader API. Is there any way I can check if the file has changed, that works in modern browsers?
Historically, this was possible in some browsers by polling the file object and comparing the File.lastModifiedDate (deprecated) or File.lastModified property, as outlined in this QA: Check if file has changed using HTML5 File API. However, the spec says that lastModifiedDate and other file data should be a snapshot of the file as it looked like when the users first selected it, so this should not work (and it seems like recent versions of most browsers indeed follow the spec now, making this hack unavailable).
I was hoping to be able to check for changes by reading the file. This kind of works, but as soon as the file is changed on disk, Chrome and Firefox throw an error saying DOMException: The requested file could not be read, typically due to permission problems that have occurred after a reference to a file was acquired. Is there any way around this?
This is what I tried:
let oldText
setInterval(function () {
const fileObj = document.getElementById('myFileInput').files[0]
const reader = new FileReader()
reader.onload = evt => {
const text = evt.target.result
if (text !== oldText) {
console.log("The file has changed!")
oldText = text
}
}
reader.readAsText(fileObj)
}, 1000)
...or simpler:
const fileObj = document.getElementById('myFileInput').files[0]
const reader = new FileReader()
reader.readAsText(fileObj) // works
// now lets edit the file and try again
reader.readAsText(fileObj) // fails
reader.readAsText() works as expected, until the file is changed, when it throws the error mentioned above. I guess this is a security measure of sorts, though I don't fully understand what it's trying to protect the user from. What can I do instead?
This will be possible again if/when the Native File System API is implemented in browsers. It will be partially enabled in Google Chrome 85, scheduled for release in October 2020.
Unlike the FileReader API it requires a explicit user interaction, so you'd do something like this:
myFileInput.addEventListener('change', async (e) => {
const fh = await window.chooseFileSystemEntries()
// fh is now a FileSystemFileHandle object
// Use fh.getFile() to get a File object
})
I was looking a long time for the solution, but I can not find any. Is there any possibility to upload picture from clipboard to file on server (by pressing ctrl+v) ?
It could work for Chrome.
Use PHP, Javascript, jquery, or maybe sth else? Some external extension for chrome?
Thanks a lot.
You can try:
https://github.com/layerssss/paste.js
Or
On paste event and clipboard API
http://www.w3schools.com/jsref/event_onpaste.asp
https://www.w3.org/TR/clipboard-apis/
How does the paste image from clipboard functionality work in Gmail and Google Chrome 12+?
After you get image in javascript you can send base64 encoded image to server with AJAX. At server-side, you can decode it and write to a file.
Note: This works if you copy image inside browser (from other tab or window). It doesn't work when you copy image from desktop.
This is from an example with angular2 typescript that works for my project. Hope it helps someone. Logic is same for other cases as-well.
angular-clipboard-event.html
<textarea placeholder="Type a message" (paste)="onPaste($event)"></textarea>
<!-- Place to render the image -->
<img #imgRenderer />
angular-clipboard-event.ts
// Reference to the dom element
#ViewChild('imgRenderer') imgRenderer: ElementRef;
onPaste(event: any) {
const items = (event.clipboardData || event.originalEvent.clipboardData).items;
let blob = null;
for (const item of items) {
if (item.type.indexOf('image') === 0) {
blob = item.getAsFile();
}
}
// load image if there is a pasted image
if (blob !== null) {
const reader = new FileReader();
reader.onload = (evt: any) => {
console.log(evt.target.result); // data url!
this.imgRenderer.nativeElement.src = evt.target.result;
};
reader.readAsDataURL(blob);
}
}
Here is a live implementation:
https://stackblitz.com/edit/angular-f7kcny?file=app/app.component.ts
I'm developing a web application which everyone can edit image on the internet directly.
While developing the site, I have faced a big problem with opening local system files.
Typically, we can do that with two ways as already known like below.
First, to use FileReader.
// render the image in our view
function renderImage(file) {
// generate a new FileReader object
var reader = new FileReader();
// inject an image with the src url
reader.onload = function(event) {
the_url = event.target.result
$('#some_container_div').html("<img src='" + the_url + "' />")
}
// when the file is read it triggers the onload event above.
reader.readAsDataURL(file);
}
// handle input changes
$("#the-file-input").change(function() {
console.log(this.files)
// grab the first image in the FileList object and pass it to the function
renderImage(this.files[0])
});
second, to use createObjectURL and revokeObjectURL.
window.URL = window.URL || window.webkitURL;
var fileSelect = document.getElementById("fileSelect"),
fileElem = document.getElementById("fileElem"),
fileList = document.getElementById("fileList");
fileSelect.addEventListener("click", function (e) {
if (fileElem) {
fileElem.click();
}
e.preventDefault(); // prevent navigation to "#"
}, false);
function handleFiles(files) {
if (!files.length) {
fileList.innerHTML = "<p>No files selected!</p>";
} else {
fileList.innerHTML = "";
var list = document.createElement("ul");
fileList.appendChild(list);
for (var i = 0; i < files.length; i++) {
var li = document.createElement("li");
list.appendChild(li);
var img = document.createElement("img");
img.src = window.URL.createObjectURL(files[i]);
img.height = 60;
img.onload = function() {
window.URL.revokeObjectURL(this.src);
}
li.appendChild(img);
var info = document.createElement("span");
info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
li.appendChild(info);
}
}
}
In my case, both of them do not work well in Chrome browser. (IE is fine)
I could open the local files by using both of them. But also, those always made memory leaking even though I exactly called revokeObjectURL when I used second way.
I have already checked that the blobs are released well from chrome://blob-internals/. All of blob had released well. But, Chrome had still hold physical memory and the memory was not released forever unless I refresh the page. Eventually, Chrome was crashed when the memory usage was up to 1.5GB.
FileReader showed me the same resulting although I released refs. Besides, the way showed terrible I/O performance.
http://ecobyte.com/tmp/chromecrash-1a.html (by logidelic)
Here is a test page. You can test this problem with just drop files onto the green DOM. The testing page is using createObjectURL/revokeObjectURL method.
When you do this testing, you could see the physical memory consumption from task manager (Shift + ESC) or your own OS task manager.
Did I miss something or is it a bug as already known?
Please, somebody help me! If you know another way to resolve this, please tell me.
I have the same problem with the createObjectURL method. In the end, I find that the memory can be released by adding the code in the onload function:
this.src = '';
However, the image will disappear from the web page, as you may expect.
In addition, I also notice that sometimes the chrome (50.0.2661.102) or chrome canary (52.0.2740.0) fails to release the memory even with this.src= ''. Once it happens, you need to restart chrome. Simply refresh the page doesn't work.
I have tried the readAsDataURL method, too. The memory can be released well (even as the chrome fails to release memory for createObjectURL with this.src=''.) However, the drawback is that the speed is rather slow (around 10x longer as compared to createObjectURL).
I'm writing a plugin to handle file uploads. I thought implementing a paste feature would be awesome (how often have you event just wanted to paste instead of having to open a photo editor and then save it as file and then upload, but I digress). What I'm doing so far works, except for when the file being pasted becomes too big. I cannot tell you what size 'too big' is, because I'm doing a screenshot selection and saving it to the clipboard.
My current code looks like
document.getElementById('AJS').onpaste = function (e) {
var items = (e.clipboardData || e.originalEvent.clipboardData).items,
blob = items[0].getAsFile();
if (blob && blob.type.match(T.s.accept) && T.currentlength < T.s.maxFiles) {
T.process(param1, param2, param3, param4, items[0].getAsFile());
}
};
T.process
T.process = function (file, i, changing, target, pasteblob) {
var fr = new FileReader();
fr.onload = function (e) {
var blob = pasteblob || new Blob([e.target.result], {type: file.type});
var dataURL = (win.URL || win.webkitURL).createObjectURL(blob);
var index = changing ? i : T.currentlength;
var filedata = {};
if (file.type.match('image/*')) {
var img = new Image();
img.onload = function () {
// Doing stuff
};
img.src = dataURL;
} else {
// Doing stuff
}
};
fr.readAsArrayBuffer(pasteblob || file);
};
For larger files, the blob from blob = items[0].getAsFile() returns a size of 0. Has anyone else experienced this problem and how have you been able to overcome it?
Note: I'm using the latest Chrome on Ubuntu 14.04
Although I don't have any references to anyone other than my own personal research into the matter, it seems as if there is a bug on the Ubuntu version of chrome that prevents users copying and pasting using the native JS api. If you attempt to paste a screenshot in a GMail message using Ubuntu Chrome, you get an error, but this error doesn't come up in any other version of chrome. It was also the same for my code above as well. I tested it on native windows and OS X environments running chrome that were pointing to my machine, and pasting using this script worked just fine!
I am using plupload to let users upload images. But I also want to generate thumbnails for preview before they finally decide to keep it. I understand currently "Image preview" feature is not present in plupload. So to work around this I decided to submit a new form containing just one file for each image added, & let the server process it & return a thumbnail.
Now my question is how do I get the handle on the file object from the plupload so that I can create an "input" file field dynamically.
Currently I iterate over uploader.files & set input.name but I dont know how to set the input.value field, since I cant seem to get the complete file path of the file added.
I am up for any suggestions (in addition to replacing this approach completely), I just need thumbnail of the file selected for upload.
Maybe my answer is a bit late, but I searched today for a similar solution and came up with the following approach. It will only work with the HTML5 Runtime.
As there is no way to get the file objects from plupload, I changed the onchange event of the dynamically created input field and store the file objects for myself. This is done by binding to the PostInit-Event.
After that I can show the image to the user by using the FileReader API introduced with HTML 5. So there is no need to send the image to the server. See my FilesAdded Listener below.
// Currently added File Objects
var nativeFiles = {};
var uploader = new plupload.Uploader({
runtimes : 'html5,html4',
// Your settings...
});
uploader.bind('PostInit', function(up, params) {
// Initialize Preview.
if(uploader.runtime == "html5") {
var inputFile = document.getElementById(uploader.id + '_html5');
var oldFunction = inputFile.onchange;
inputFile.onchange = function() {
nativeFiles = this.files;
oldFunction.call(inputFile);
}
}
});
uploader.bind('FilesAdded', function(up, files) {
for (var i in files) {
// Your code...
// Load Preview
if(uploader.runtime == "html5") {
var fileObject = uploader.getFile(files[i].id);
var reader = new FileReader();
reader.onload = (function(file, id) {
return function(e) {
var span = document.getElementById('thumb_'+id);
span.innerHTML = "<img src='"+e.target.result+"'/>";
};
})(nativeFiles[i], files[i].id);
reader.readAsDataURL(nativeFiles[i]);
}
}
});