Forced attachment for encoding images in base64

Question

Background:

I am 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 use CKEditor 3 as a richtext editor and jQuery for this.

We chose Google Chrome as our preferred browser.

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

.

Problem:

Most of our users still use the word to design a document, mainly because of its ability to generate rich flowcharts. When they copy / paste the generated content into Chrome, the images are pasted as a link to the local file (automatically generated by the OS in the users / * / temp folder). This means that the server cannot access these files, and the resulting documents (generated PDF files) do not contain images.

.

Question

How to force pasted images to be inserted in base64, similar to what happens in Firefox?

.

Notes

If it is possible to "upload" to the server an image referenced as src = "file: // c: \ something", this will solve my problem, since I can base64 encode this image later.

We cannot switch to firefox, because it does not completely solve our problem (if the image is "inserted" with the text, firefox does not encode it base64) and causes other problems, such as the horizontal scroll bar that appears when the text is too long to fit into the text box.

Answer 1

Yes and no, I believe.

You can capture the insert event and retrieve the inserted image as a file, and then use FileReader to read the file as a data URI (base 64 PNG).

However, Word seems to send a link to a local file that throws a security exception (at least in Chrome) due to a cross-domain request ( http://... and file:///... ). As far as I know, there is no way to get the actual contents of such local files, and the contents will not be sent as clipboard data.

If you copy a “clean” image (for example, from Paint), you can get the basic 64 encoded data as follows: http://jsfiddle.net/pimvdb/zTAuR/ . Or add the image as a base 64-encoded PNG to 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); };