Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// Created by STRd6
// MIT License
// jquery.paste_image_reader.js
(function($) {
var defaults;
$.event.fix = (function(originalFix) {
return function(event) {
event = originalFix.apply(this, arguments);
if (event.type.indexOf('copy') === 0 || event.type.indexOf('paste') === 0) {
event.clipboardData = event.originalEvent.clipboardData;
}
return event;
};
})($.event.fix);
defaults = {
callback: $.noop,
matchType: /image.*/
};
return $.fn.pasteImageReader = function(options) {
if (typeof options === "function") {
options = {
callback: options
};
}
options = $.extend({}, defaults, options);
return this.each(function() {
var $this, element;
element = this;
$this = $(this);
return $this.bind('paste', function(event) {
var clipboardData, found;
found = false;
clipboardData = event.clipboardData;
return Array.prototype.forEach.call(clipboardData.types, function(type, i) {
var file, reader;
if (found) {
return;
}
if (type.match(options.matchType) || clipboardData.items[i].type.match(options.matchType)) {
file = clipboardData.items[i].getAsFile();
reader = new FileReader();
reader.onload = function(evt) {
return options.callback.call(element, {
dataURL: evt.target.result,
event: evt,
file: file,
name: file.name
});
};
reader.readAsDataURL(file);
return found = true;
}
});
});
});
};
})(jQuery);
@MeTe-30

This comment has been minimized.

Copy link

MeTe-30 commented Sep 18, 2014

Hi,
Your code is working very well, thanks.
Just one question!
I want to paste an image by pressing ctrl+v or hitting button, but i don't know how to trigger your paste event after hitting the button.
I tried everything but none of them worked.
plz HELP!!

@STRd6

This comment has been minimized.

Copy link
Owner Author

STRd6 commented Sep 21, 2014

You can't trigger a paste event for the user other than through direct user interaction (ctrl+v, context menu 'paste', or dropping content). It's a web security issue. There may be a way for your page to request additional clipboard permissions to allow for script generated clipboard events, but I'm not sure of the details.

@Nitinchopkar

This comment has been minimized.

Copy link

Nitinchopkar commented Aug 13, 2015

how to use image copy and paste at web editor

@Nitinchopkar

This comment has been minimized.

Copy link

Nitinchopkar commented Aug 13, 2015

can anybody guide me ?

@anujlaitkor

This comment has been minimized.

Copy link

anujlaitkor commented Jun 10, 2016

Hi,

I am using html editor of extjs and want to paste image in text editor.
Can you please guide me that how can we integrate this code with extjs html editor.
Thanks is advance for your help.

@ramirostom

This comment has been minimized.

Copy link

ramirostom commented Jan 16, 2018

example of usage

https://codepen.io/netsi1964/pen/IoJbg

thanks for the code !

@thinkyhead

This comment has been minimized.

Copy link

thinkyhead commented Jan 29, 2018

Know any good tricks to get a pasted image in Safari? So far that one has been elusive. Onward to StackOverflow…

@PhatDang

This comment has been minimized.

Copy link

PhatDang commented Oct 7, 2019

Very thank you for the suggestion, so how can we paste an image with a direct link to the same comment of Gitlab or Github.
Can we?
Ex: I just copy an image on the website and paste it in this comment. And it shows me like this.
![image](https://user-images.githubusercontent.com/13443899/66285643-280e4e80-e8bd-11e9-8b2d-984a3cb3ecbb. png)

@STRd6

This comment has been minimized.

Copy link
Owner Author

STRd6 commented Oct 9, 2019

@PhatDang You'll need to post the blob to your backend service then return the url for the uploaded content. Hope this makes sense!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.