Image upload in data-uri base64 doesn't work with large files

[sh]

Hello,

I am trying to use ckeditor's image plugin and I have encountered some issues with large images.

First of all, I have a java servlet that is mapped to the filebrowserUploadUrl. This servlet doesn't save the file locally, it only reads the binary data, converts it to base64 and create a "data-uri" link then calls the right function of ckeditor.

Anyway, it works well with small images (<500ko) and for bigger ones I have got a red X image and : "Failed to load resource" in my Javascript console.

It is definitly not a server issue, the post request works fine, I can get the data back and call ckeditor internal function. The error seems to occur in element.js line 19 :

setAttribute : (function()
    {
	var standard = function( name, value )
            {
		this.$.setAttribute( name, value ); //here!
		return this;
	    };
//...

I have tried to debug in Chrome and the value contains the right data-uri (however I can't see it entirely..)

I have also another error. Sometimes (I really don't understand how), The image is well read and displayed in the dialog. And when I try to add it (by pressing the "Ok" button), I get an alert "Image source URL is missing.".

It seems that this last error happens in more often in Firefox and the first one in chrome..

If I try to insert the same images as data-uri in javascript outside CKeditor, it works perfectly.

This never happens with small images.

I hope this is clear enough. Thanks in advance,

[Jakub Ś]

First of all sorry for late reply.

Second you have made custom implementation of file upload functionality. Is there any chance you could send us reduced version of this file showing the problem?

Are you sure this isn't any attribute character number or data-uri length limitation?
When looking at internet: ​http://stackoverflow.com/questions/1496096/is-there-a-limit-to-the-length-of-html-attributes
​http://stackoverflow.com/questions/695151/data-protocol-url-size-limitations
People seem to have different opinion on this. Perhaps because of some limitation in browser editor is acting funny.

Another option is that perhaps there is some JavaScript character length limitation. Which method you use to test this without editor? is this setAttribute as well?

[Jakub Ś]

@shadjiat if possible please provide reduced file(s) that help to reproduce this problem. That way we will be able to better check this issue.

[sh]

test project

[sh]

Thank you for you response.

I just attached to the ticket a Java project to test. There are two html files : index.html and fileInput.html. the first one is to test the custom image upload with ckeditor (you need a server like tomcat to load the servlet). I couldn't however post the project with ckeditor in resources so you'll need to add it. Then fileInput.html is to test image insertion in javascript (with FileReader API).

[Jakub Ś]

I can confirm this is happening with sample provided. If you have image larger than 600KB (in my case) you get URL is missing while image is displayed in preview box and there is URL in filed.

I will need to further test this.

[Jakub Ś]

Problem can be reproduced from CKEditor 3.0 in both CKE 3.x and 4.x branches. Problem concerns Firefox and Webkit. Other browsers work fine.

To reproduce:

1. Download attached test.zip
2. Unpack it and put it into webapps folder of Apache Tomcat
3. Paste ckeditor into TestProject\resources (removed due to size limitation)
4. Run server and test file (e.g. ​http://127.0.0.1/TestProject/index.html).
5. Upload image (use f40.jpg attached) using images dialog and try to insert it in editor.

Firefox:
You can't save file because validation fails. It seems to me that in Firefox method RegExp test doesn't allow large strings. It simply fails and returns false. I got the same result with regexp.html file attached. Perhaps the best solution here would be limiting inputted string (if URL > 500 character, downsize it with substring to 500 characters). Problem concerns regex method located in ckeditor\plugins\dialog\plugin.js.

Webkit:
In both Safari and Chrome this sometimes works and sometimes doesn't. When you upload image you get error in /ckeditor/core/dom/element.js, Line: 1096 in setAttribute method. As you can see editor is using native method there but the problem is that I wasn't able to reproduce this problem outside of editor. Using fileInput.html sample (attached to project) or even putting whole data uri in to setAttribute method didn't cause any problems.

I'm confirming this ticket but please review this issue and decide whether something can be done (IMHO can at least with Firefox) or this is a won't fix issue.