Opened 6 years ago

Last modified 6 years ago

#10391 confirmed Bug

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

Reported by: sh Owned by:
Priority: Normal Milestone:
Component: General Version: 3.0
Keywords: Cc:

Description (last modified by Piotrek Koszuliński)


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,

Attachments (4) (428.0 KB) - added by sh 6 years ago.
test project
f40.jpg (997.5 KB) - added by Jakub Ś 6 years ago.
regex.html (1.3 MB) - added by Jakub Ś 6 years ago. (428.0 KB) - added by Jakub Ś 6 years ago.

Change History (10)

comment:1 Changed 6 years ago by Jakub Ś

Keywords: image upload data-uri removed
Status: newpending

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:
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?

comment:2 Changed 6 years ago by 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.

Changed 6 years ago by sh

Attachment: added

test project

comment:3 Changed 6 years ago by 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).

comment:4 Changed 6 years ago by Jakub Ś

Status: pendingnew

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.

Changed 6 years ago by Jakub Ś

Attachment: f40.jpg added

Changed 6 years ago by Jakub Ś

Attachment: regex.html added

Changed 6 years ago by Jakub Ś

Attachment: added

comment:5 Changed 6 years ago by Jakub Ś

Component: File BrowserGeneral
Status: newconfirmed

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
  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.
  5. Upload image (use f40.jpg attached) using images dialog and try to insert it in editor.

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.

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.

comment:6 Changed 6 years ago by Piotrek Koszuliński

Description: modified (diff)
Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy