upload picture to server from clipboard
Solution 1
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.
Solution 2
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
user3345547
Updated on June 14, 2022Comments
-
user3345547 almost 2 years
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.
-
Brain over 6 yearsI would love to know why someone downvoted the answer without a comment for their reason.
-
Emilio Numazaki almost 4 yearsIt has been a long time but I don't understand either because solution you suggested works and solves what original question is looking for.