Question

Background:

I’m developing an HTML5 webapp for my company which is basically a Rich Text Editor (similar to Google Docs) that stores information in a database.

We are using CKEditor 3 as richtext editor and Jquery to acomplish this.

We’ve chosen Google’s Chrome as the preferred browser.

Our app is currently in alpha testing period, having a group of 18 tester (which are the same ones that will use the app). These people is heterogeneous, but almost all of them of them have basic computer skills, mostly limited to MS Word and MS Excel.

.

Problem:

Most of our users still use word to elaborate the document, mainly due to its capacity of generating rich flowcharts. When they copy/paste the generated content to Chrome, images are pasted as link to a local file (auto generated by the OS, in a users/*/temp folder). This means the server can’t access these files and the resulting documents (generated PDFs) don’t contain the images.

.

Question

How can I force pasted images to be encoded in base64, similiar to what happens in Firefox?

.

Notes

If it’s possible to “upload” to server an image referenced as src=”file://c:\something”, that would solve my problem as I can base64 encode that image later.

We can’t switch to firefox since it doesn’t fully solve our problem (if an image is “pasted” alongside with text, firefox doesn’t base64 encode it) and raises other issues such as an horizontal scrollbar appearing when the text is too long to fit in the textarea.

Answer 1

Yes and no I believe.

It is possible to intercept the paste event and fetch the pasted image as a file, then use FileReader to read the file as a Data URI (base 64 encoded PNG).

However, Word seems to send a reference to a local file, which generates a security exception (at least on Chrome) because of a cross-domain request (http://... and file:///...). As far as I’m concerned there is no way to get the actual contents of such local files, and the contents are not sent as clipboard data itself.

If you copy a “pure” image (e.g. out of Paint), you can get the base 64 encoded data as follows: http://jsfiddle.net/pimvdb/zTAuR/. Or append the image as a base 64 encoded PNG in the div: http://jsfiddle.net/pimvdb/zTAuR/2/.

div.onpaste = function(e) {
    var data = e.clipboardData.items[0].getAsFile();

    var fr = new FileReader;

    fr.onloadend = function() {
        alert(fr.result.substring(0, 100)); // fr.result is all data
    };

    fr.readAsDataURL(data);
};