Skip to content

Instantly share code, notes, and snippets.

@STRd6
Created April 1, 2013 17:38
Show Gist options
  • Star 45 You must be signed in to star a gist
  • Fork 17 You must be signed in to fork a gist
  • Save STRd6/5286415 to your computer and use it in GitHub Desktop.
Save STRd6/5286415 to your computer and use it in GitHub Desktop.
// 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);
@Nitinchopkar
Copy link

can anybody guide me ?

@anujlaitkor
Copy link

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
Copy link

example of usage

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

thanks for the code !

@thinkyhead
Copy link

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

@PhatDang
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
Copy link
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