Skip to content

Instantly share code, notes, and snippets.

@freewind
Forked from Buildstarted/paste.html
Created July 17, 2013 13:55
Show Gist options
  • Save freewind/6020747 to your computer and use it in GitHub Desktop.
Save freewind/6020747 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<!-- normally you wouldn't show this -->
<div id="paste" contenteditable="true"></div>
<script type="text/javascript">
$(function () {
$.imagePaste(function (file) {
console.log(file);
});
});
</script>
<script type='text/javascript'>
(function ($) {
function match() {
var ua = navigator.userAgent.toLowerCase();
var match = /(chrome)[ \/]([\w.]+)/.exec(ua) ||
/(webkit)[ \/]([\w.]+)/.exec(ua) ||
/(opera)(?:.*version|)[ \/]([\w.]+)/.exec(ua) ||
/(msie) ([\w.]+)/.exec(ua) ||
ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec(ua) || [];
return {
browser: match[1] || "",
version: match[2] || "0"
};
}
var browser = {};
var matched = match();
if (matched.browser) {
browser[matched.browser] = true;
browser.version = matched.version;
}
// Chrome is Webkit, but Webkit is also Safari.
if (browser.chrome) {
browser.webkit = true;
} else if (browser.webkit) {
browser.safari = true;
}
$.extend({
//here's the actual call we're going to make
imagePaste: function (callback) {
if (browser.mozilla) {
initializeFirefox(callback);
} else if (browser.webkit) {
initializeWebkit(callback);
}
}
});
function initializeWebkit(callback) {
$.event.fix = (function (fix) {
return function(event) {
event = fix.apply(this, arguments);
if (event.type.indexOf("copy") === 0 || event.type.indexOf("paste") === 0) {
event.clipboardData = event.originalEvent.clipboardData;
}
return event;
};
})($.event.fix);
var defaults = {
callback: $.noop,
matchType: /image.*/
};
var pasteImageReader = function (selector, options) {
if (typeof options === "function") {
options = {
callback: options
};
}
options = $.extend({}, defaults, options);
return $(selector).each(function () {
var local = this;
return $(this).bind("paste", function (event) {
var haveData = false;
var clipboard = event.clipboardData;
return Array.prototype.forEach.call(clipboard.types, function (type, index) {
var file, stream;
if (haveData) {
return;
}
if (type.match(options.matchType) || clipboard.items[index].type.match(options.matchType)) {
file = clipboard.items[index].getAsFile();
stream = new FileReader();
stream.onload = function (event) {
return options.callback.call(local, {
dataURL: event.target.result,
event: event,
file: file,
name: file.name
});
};
stream.readAsDataURL(file);
return haveData = true;
}
});
});
});
};
pasteImageReader("html", callback);
}
function initializeFirefox(options) {
var defaults = {
contentEditableDiv: "#paste"
};
if (typeof options === "function") {
options = {
callback: options
};
}
options = $.extend({}, defaults, options);
//this portion of the source is
//for mozilla only
var pasteDiv = $(options.contentEditableDiv)[0];
function waitForPasteData(pasteDiv) {
if (pasteDiv.childNodes && pasteDiv.childNodes.length > 0) {
processPaste(pasteDiv);
} else {
setTimeout(function () {
waitForPasteData(pasteDiv);
}, 20);
}
};
function processPaste(pasteDiv) {
var innerHtml = pasteDiv.innerHTML;
var data = {
image: innerHtml.indexOf("<img") != -1 && innerHtml.indexOf("src=") != -1,
base64: innerHtml.indexOf("base64,") != -1,
png: innerHtml.indexOf("iVBORw0K") != -1
};
if (data.image && data.base64 && data.png) {
var tag = innerHtml.split('<img src="');
tag = tag[1].split('" alt="">');
var fileData = {
dataURL: tag[0],
file: {
size: 0 //file is in base 64 format, we need to get the filesize somehow
}
};
//we have an image so let's use it
//what do you want to do with it?
//upload using base64?
options.callback(fileData);
} else {
pasteDiv.innerHTML = "";
}
};
function handlePaste(event, pasteDiv) {
if (event && event.clipboardData && event.clipboardData.getData) {
waitForPasteData(pasteDiv);
if (event.preventDefault) {
event.stopPropagation();
event.preventDefault();
}
return false;
} else {
waitForPasteData(pasteDiv);
return true;
}
}
document.onpaste = function (event) {
pasteDiv.focus();
handlePaste(event, pasteDiv);
};
}
})(jQuery);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment