CKEditor 4.3.4 - Response script is not evaluated - file-upload

I am trying to make uploading possible for CKEditor. I added the uploadUrl in my config:
config.filebrowserUploadUrl = cfData.jsService+'?method=uploadImage';
In my backend I use Coldfusion to upload the image, and create the the return script:
<cffunction name="uploadImage" access="remote" output="false" returntype="string" returnformat="plain">
<cfargument name="upload" required="true">
<cfargument name="CKEditorFuncNum" type="numeric" requited="false">
... // image upload logic
<cfreturn "<script type=""text/javascript"">window.parent.CKEDITOR.tools.callFunction("& arguments.CKEditorFuncNum &", '[dynamic-image-url]', '');</script>">
</cffunction>
The response tab in Chrome shows the following:
<script type="text/javascript">window.parent.CKEDITOR.tools.callFunction(1, '[dynamic-image-url]', '');</script>
Everything seems to go well, but then the code is printed as string in the DOM, instead as HTML:
Is there something I am doing wrong? I know it's not the version, as CKFinder also uses 4.3.4 and it works for them (http://cksource.com/ckfinder/demo#ckeditor).
N.B. When I evaluate the callFunction by running it in the console, the image is shown in the image-popup.

Found it just after typing this question, small mistake... I gave the wrong content-type header (text/plain).
Fixing that in CF is quite easy:
cfcontent type="text/html">

Related

Is there an easy way to make the fileupload work with IE11 without updating zk

In IE11 file upload button of ZK is not working.
I got few replies, It says after updating ZK it will fix the problem.
But we can't update ZK, So in this scenario is there any way to work out this problem any how.
If you can't upgrade ZK then you can try to "downgrade" the IE using "X-UA-Compatible" either as meta-tag or as a response header
here an example using the meta tag:
<?meta http-equiv="X-UA-Compatible" content="IE=10" ?>
<zk>
<fileupload label="upload" onUpload="alert(event.getMedia().getName())"/>
</zk>
and what it looks like in the browser (in the IE dev tools F12 you can check if the meta tag had an effect, you'll see that IE falls back to version 10):
http://screencast.com/t/ftheLA9Ud8
Finally I got the Solution.
AS IE 11 having problem to attach event for listening to open File chooser.
You just manually add the listener.
<button id="browsebtn" upload="true,maxsize=-1" visible="true" sclass="text">
<attribute w:name="doMouseDown_">
function (evt) {
}
</attribute>
</button>
Its simple and weird, However what I found is make the parent component as draggable="true"
<row draggable="true">
<div style="text-align : right;">
<label value="Image File:" />
</div>
<fileupload id="fileUpload" label="Upload" tooltiptext="Click to upload image file."/>
</row>
Now suddenly you will see your fileupload button in ZK started working correctly for IE11 as well.

How can I react to a finished upload with <h:inputFile>?

I'm using Richfaces-4.3.5 on Wildfly-8.0.0.CR1 here, migrating from <rich:fileUpload> which doesn't work with JSF-2.2/Servlet-3.0. I'm replacing it with this snippet:
<rich:popupPanel id="testPop" autosized="true">
<h:form id="uploadF" enctype="multipart/form-data">
<h:inputFile value="#{bean.file}">
<a4j:ajax listener="#{bean.storeFile()}" render="#form,:fileListTbl"
oncomplete="#{rich:component('testPop')}.hide();" />
</h:inputFile>
</h:form>
</rich:popupPanel>
This works fine in that the storeFile method is called and I can access bean.file just fine. However, I'd like to close the rich:popupPanel when I'm done uploading, so I need to react to the success/complete events of the ajax request. But that doesn't seem possible - the popup stays visible and the response is clearly incomplete (indented for better readability):
<?xml version='1.0' encoding='UTF-8'?>
<partial-response id="j_id1">
<changes>
<update id="j_id1:javax.faces.ViewState:0">
<[CDATA[-1186354868983349335:-5499969782208038164]]>
</update>
<extension id="org.richfaces.extension"><render>#component</render></extension>
</changes>
</partial-response>
Though the richfaces debug messages indicate the handlers are being called:
RichFaces: Received 'success' event from <input id=uploadF:j_idt1136 ...>
RichFaces: Received 'complete' event from <input id=uploadF:j_idt1136 ...>
So, simple question: how can I get the popup to close and the components to be re-rendered?
i'm not sure if the problem is directly related to a4j:ajax or what's needed to be done to make it work with a4j:ajax, but the code below seems to work with f:ajax.
<h:form id="formId">
<h:commandLink value="popup"
onclick="#{rich:component('testPop')}.show(); return false;" />
</h:form>
<rich:popupPanel id="testPop" autosized="true">
<h:form id="uploadF" enctype="multipart/form-data">
<h:inputFile value="#{bean.file}">
<f:ajax listener="#{bean.storeFile()}" render="#form :fileListTbl"
onevent="eventHandler"/>
</h:inputFile>
</h:form>
</rich:popupPanel>
<script>
function eventHandler(event)
{
if (event.status == 'success')
{
#{rich:component('testPop')}.hide();
}
}
</script>

Primefaces FileUpload error remains even after correct upload

I am using primefaces3.5 fileupload control. When I upload a wrong format file then it shows a error message "Wrong format etc". After that when I upload a correct format file then it uploads fine but does not remove the error message.While searching I found this solution on primefaces forum but it is also not working.
How can I remove the error message on subsequent uploads?
Here is my code
<p:fileUpload id="fu"
allowTypes="/(\.|\/)(DOC|DOCX|doc|docx|ppt|pptx|xls|xlsx|pdf)$/"
onstart="loadingCursor();" oncomplete="simpleCursor();"
multiple="false" mode="advanced" sizeLimit="52428800"
showButtons="false"
fileUploadListener="#{documentInsertController.uploadPListener}"
label="Browse"
invalidSizeMessage="File size exceeds limit 45 MB "
value="#{documentInsertController.file}" auto="true"
invalidFileMessage="Invalid file type.Only doc,ppt,xls and pdf files allowed."
>
<h:message id="docMSG" for="fu"></h:message>
</p:fileUpload>
Worked for me with PrimeFaces 3.5:
<script type="text/javascript">
$(document).ready(function () {
fileuplaod_wgt.buttonBar.find("button.cancel").bind("click", function (e) {
clearInvalidFileMsg();
});
});
function clearInvalidFileMsg() {
fileuplaod_wgt.uploadContent.find("tr.ui-state-error").remove();
}
</script>
And I've added widgetVar="fileuplaod_wgt" in the p:fileUpload. Then cancel button works and removes invalid files.
It is not a permanent solution. Just a workaround until it will be fixed within PrimeFaces itself. Check: https://code.google.com/p/primefaces/issues/detail?id=3652

DOJO 1.8 /dojo/request/iframe is deleting <form></form> when uploading a file

I'm seeing a really strange behavior under DOJO 1.8.0. I'm trying to asynchronously upload a file. The file is uploading just fine and I'm getting the payload as expected, but when clicking the submit button the tags and everything in between is inexplicably deleted! It just vanishes. (NOTE: I've isolated this testing to a test page, so there's nothing else at play that would account for it. You're looking at the entirety of the code.)
require(['dojox/form/Uploader',
"dojo/request/iframe",'dojo/dom','dojo/on',
'dojox/form/uploader/plugins/IFrame', 'dojo/domReady!'],
function(Uploader,iframe,dom,on){
on(dom.byId("myButton"), "click", function(){
iframe.post("UploadFile.php",{
form: dom.byId("myForm"),
handleAs: "json"
}).then(function(data){
console.log(data);
}, function(err){}
);
});
<form method="post" id="myForm" enctype="multipart/form-data" >
<input name="uploadedfile" type="file" data-dojo-type="dojox.form.Uploader"
label="Select Some Files" id="uploader" />
<input id="myButton" type="button" value="Submit" />
</form>
Any ideas from anyone with DOJO 1.8 experience? I've been using /dojo/io/iframe just fine with versions 1.6 thru 1.7. This started happening only with 1.8 using the new /dojo/request/iframe code.
See http://jsfiddle.net/seeds/XD4Dc/1/
The form element is set to have target of dojo's injected iframe. Then form gets like, 'dijitHidden' with abs position -1000 top/left. Cant see why tbh.
There's a fix in the fiddle, add to your callback:
with(dom.byId("myForm").style) {
position = "";
left = "";
top = "";
}
I took this issue to the DOJO-Interest group and it was found to be bug with DOJO 1.8.0. It'll be fixed with the upcoming 1.8.1 release.
http://bugs.dojotoolkit.org/ticket/15939
From the bug report:
The form wasn't getting "eaten", but rather the position was getting set on it and moved out of the viewport because of some faulty logic to check if the form was in the DOM. This has been fixed and should be in 1.8.1.

Migrating code from OpenLaszlo 3.3 to 5.0: TypeError #1007 Instantiation attempted on a non-constructor.

I ported some parts of the code from OL 3.3 to OL 5.0 recently. I thought that everything will work but when i try to run it using the ant script i have I am getting this error.
[echo] C:\Program Files\OpenLaszlo Server 5.0.x\Server\lps-5.0.x/WEB-INF/lps/server/bin/lzc.bat
[exec] Compiling: C:\Workspace\application\client\src\TestClient.lzx to TestClient.swf10.swf
[exec] compiler output is Loading configuration file C:\Program Files\OpenLaszlo Server 5.0.x\Server\lps-5.0.x\WEB-INF\frameworks\flex-config.xml
[exec] C:\Documents and Settings\310773\Local Settings\Temp\lzswf9\Workspace\application\client\src\build\TestClient\app.swf (289808 bytes)
So, I took the folder and i compiled it directly in Laszlo. It's not showing any error but when the swf is about to load the main page I am getting this error. Any idea why?
TypeError: Error #1007: Instantiation attempted on a non-constructor.
at $lzc$class__mvz/$mvx()
at LzNode/__LZresolveReferences()
at LzNode/__LZcallInit()
at LzCanvas/__LZcallInit()
at LzCanvas/__LZinstantiationDone()
at LzInstantiatorService/makeSomeViews()
at LzInstantiatorService/checkQ()
at Function/http://adobe.com/AS3/2006/builtin::call()
at LzEvent/sendEvent()
at LzIdleKernel$/__update()
That's the error message you get when you try to instantiate a class which is not defined. Here is an example:
<canvas>
<class name="myclass">
<handler name="oninit">
// Instantiate a class which is not defined
var x = new lz.missingclass();
</handler>
</class>
<myclass />
</canvas>
Check for missing <includes> of classes which are being instantiated through scripts. You can always check the list of Adoboe Flash Run-Time Errors as well, sometimes there is useful information contained here.
Edit: Solution to problem added
This commment pointed to the problem:
I found that this line is causing the problem. <attribute name="dp"
value="$once{new lz.Datapointer()}" />. Any idea why?
If you check the OpenLaszlo reference for 5.0, you will see that the class names (on the left side in the class browser) use different case; some classes use camel case (lz.Browser, lz.DataElement), others use all lowercase (lz.view, lz.datapointer). In your case, you should have used lz.datapointer instead of lz.Datapointer.
Therefore this code will compile and run without any problems:
<canvas>
<class name="my_class" extends="node">
<attribute name="dp" value="$once{new lz.datapointer()}" />
</class>
<my_class oninit="Debug.inspect(this.dp)" />
</canvas>
A good way to test for the correct name of a class is to use the JavaScript in console in DHTML runtime, where you have auto-completion for lz.??? classnames:
Debugging SWF #1007 errors in OpenLaszlo
If you run into a #1007 error in the SWF runtime, I would compile the application for DHTML with the debugger disabled and the JavaScript error console open. Try this:
Change the line of with the $once{} constraint to
<attribute name="dp" value="$once{new lz.Datapointer()}" />
Compile the app in Chrome using DHTML runtime and debug=false. You should see the following error in the JavaScript console:
Click on the right side on error-1007.lzx:3, and you'll see the generated JavaScript code with the line causing the error
This line fails:
this.setAttribute("dp",new (lz.Datapointer)())
and you can even reproduce the error by typing new (lz.Datapointer) into the console.
Just as a point of info: The case of class names was "regularized" in 4.0 so that the case of a class that implements a tag is the same as that tag. See Mapping Class and Tag Names.
Here is an example of the problem and a workaround:
1) PROBLEM:
Here is the code of a short OpenLaszlo application demonstrating the problem:
<canvas width="1000" height="584">
<view name="myContainer" width="500" height="500">
<handler name="oninit">
var objCB = new lz.combobox(this);
</handler>
</view>
</canvas>
In this example there is no <combobox> tag in the application so the compiler does not think it needs to include the OpenLaszlo <combobox> class code in the application. Hence, when we try to instantiate a combobox with the line "var objCB = new lz.combobox(this);" the compiler throws the following error:
ERROR #test1007error.lzx≈5: TypeError: Error #1007: Instantiation
attempted on a non-constructor.
2) WORKAROUND:
The solution for the problem is to add an include in your application for <combobox>:
<canvas width="1000" height="584">
<include href="lz/combobox.lzx" />
<view name="myContainer" width="500" height="500">
<handler name="oninit">
var objCB = new lz.combobox(this);
</handler>
</view>
</canvas>
This time the error is not thrown and we see the combobox appear at the top left of the application when we run it.