1
votes

Im using CKeditor version 4.5.8 in 'inline' mode (so directly in the content with the 'contenteditable' html attribute). This all works fine, except for one thing. I've added the 'Image upload' plugin, to add support for uploading an image while it's drag/dropped in the editor. This all works pretty good, except for one thing I can't get to work: when dropping the image in the editor there should be a 'uploading' progressbar (tested in Chrome and in Firefox). But instead I almost directly see the message 'Upload complete'. But, at that time the upload is not completed (I've added a debugger breakpoint I my code to assure this is the case) and the 'success' response is not yet received (I see it as 'Pending' in the developer tools 'Network Tab'.).

However, when I 'throttle' the connection via Chrome dev tools, I do see a progressbar, however it's not showing the upload progress, but a 'Internal progress' of the browser of somekind? See screenshot: chrome devtools

Any ideas how to fix this?

1
having the same issue. is your problem is solved ? - Gitesh Purbia
@GiteshPurbia unfortunatly I haven't got the time to check if this was the fix. I think it will take a couple of weeks untill I proceed the development.. - NickGreen
My problem is solved. See the accepted answer (and comments below this answer) for the explanation. - NickGreen

1 Answers

2
votes

The progress CKEditor 4 provide is taken from the XHR2 progress event. Note that it may not work properly on the localhost when the upload works immediately. Also I see your images are taken from cache ("from cache" in the 5th column in the Network Debugger). Try to disable cache and check does it helps.

Additionally I see your arrows next to data:image/jpeg. CKEditor, before uploading images, loads them locally as BASE 64 data to show user the preview. Then these images are uploaded and the source of the image is replaced. These data is not a real network data, it is the content JavaScript loaded locally.