I have a textarea with html id "id_textarea".
editor = CKEDITOR.inline( 'id_textarea', {
filebrowserBrowseUrl : 'browse_url',
filebrowserUploadUrl : 'upload_url'
});
editor.on( 'fileUploadRequest', function( evt ) {
console.log("This is not printing");
});
Whenever I try to upload a file, it doesn't print anything to console. Am I doing something wrong?
By the way, my requirement is to add csrf headers before sending a request for which I need to catch some event like fileUploadRequest.
I assume that you are trying to upload files via the Upload tab in the Image Properties dialog. It is provided by the File Browser plugin and fileButton which does not support the fileUploadRequest and fileUploadResponse events (there is already a feature request with a more in-depth description of this case).
If you would like to use these events for some custom request preprocessing, you can use the Upload Image plugin. The configuration process is described in the official docs, but keep in mind that it will work only for dropping or pasting files. Upload via the Image Properties dialog will still be handled by the File Browser plugin which does not support these events.
The important thing here is that since CKEditor 4.5.6, the File Browser plugin uses the CSRF header so it can be probably used on your server side without any modifications in the JavaScript code. So if you are using an older version I suggest updating to 4.5.6 (using e.g. CKBuilder) and trying to integrate with your backend. The CSRF header in the File Browser plugin should be sufficient for your needs.
Here is the header:
Related
There is a button in UI, it will open file open explorer, once we select file and click open, then DOM directly uploading the file,
Upload Document Pop Up
selecting the file and click open
file directly getting uploaded
tried all possible ways suggested in cypress-file-upload package. not working,
background there is an API POST request which is actually uploading the file, but that API URL is dynamic(URL includes the user authentication login token, and upload key, and user id), so it is not possible to generate/recreate the upload API URL
Can't able to access the file open explorer? In this scenario, how to perform file upload using CyPress?
You should be able to use a RegEx in the RouteMatcher for the intercept on the Upload API. If you need help creating your Regex, I suggest using Regex101 as a scratch pad. Slightly modified from the cypress-file-upload documentation:
// intercept the API endpoint
cy.intercept({
method: 'POST',
url: /.*my-api.com.*/
}).as('upload');
const fileName = 'upload_1.xlsx';
cy.fixture(fileName, 'binary')
.then(Cypress.Blob.binaryStringToBlob)
.then(fileContent => {
cy.get('#input_upload_file').attachFile({
fileContent,
fileName,
mimeType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
encoding:'utf8',
lastModified: new Date().getTime()
})
})
// wait for the 'my-api.com' request, and leave a 2 minutes delay before throwing an error
cy.wait('#upload', { requestTimeout: 120000 });
I am recording a script using truclient protocol.In my script ,i need to externally call an API which generates the Password. The password is fetched using the co-relation,which is used as an input for Login.
I am however unable to call the external API using the true client protocol.
Could anybody please suggest how to call an external API in true client protocol.
Have you tried the evaluate JavaScript step? You can post the message to the server and get the generated password during the runtime. XHR and fetch API should be supported in Chrome and Firefox, TCIE should support XHR.
Sure. Please check the detail steps:
Drag and drop an evaluate JS step from TruClient
Open the script editor
Add these code, make sure use the sync XHR to ensure the password is returned before the end step started:
var xhr = new XMLHttpRequest();
xhr.open("POST", '/server', false);
//Send the proper header information along with the request
xhr.setRequestHeader("xxx", "value");
xhr.send();
if (this.status === 200) {
// Request finished. Do processing here.
}
var password = xhr.response;
Change the login password step from plain text to JS and use
ArgsContext.password
to reference the previous received password.
If you have another questions please let me know. How to use the argument context you could reference this link.
BTW. the window and document object of the page can be referenced with AUT.window, AUT.document in TruClient.
Please check the help document from here.
I compiled my reactjs using webpack and got a bundle file bundles.js. My bundles.js contains a component that make API calls to get the data.
I put this file in my html and pass the url to phantom.js to pre-compile static html for SEO reasons.
I am witnessing something strange here, the ajax calls for APIS are not getting fired at all.
For example, I have a component called Home which is called when I request for url /home. My Home component makes an ajax request to backend (django-rest) to get some data. Now when I call home page in phantomjs this api call is not getting fired.
Am I missing something here?
I have been using React based app rendering in Phantomjs since 2014. Make sure you use the latest Phantomjs version v2.x. The problems with Phantomjs occur because it uses older webkit engine, so if you have some CSS3 features used make sure they are prefixed correctly example flexbox layout.
From the JS side the PhantomJS does not support many newer APIs (example fetch etc.), to fix this add the polyfills and your fine. The most complicated thing is to track down errors, use the console.log and evaluate code inside the Phantomjs. There is also debugging mode which is actually quite difficult to use, but this could help you track down complex errors. I used webkit engine based browser Aurora to track down some of the issues.
For debugging the network traffic, try logging the requested and received events:
var page = require('webpage').create();
page.onResourceRequested = function(request) {
console.log('Request ' + JSON.stringify(request, undefined, 4));
};
page.onResourceReceived = function(response) {
console.log('Receive ' + JSON.stringify(response, undefined, 4));
};
I want to be able to click on the image icon in CKEditor and be able to browser the local file system. I would like the chosen file to be passed to the editor just like the standard URL is. I want to use the base64image plugin to embed the image inline.
I have tried using CKFinder but, when I click the Browse Server button in the Image Properties dialog, I get an empty window with just 'run();' in the centre.
To enable CKFinder in read-only (gallery) mode, set the readOnly configuration option to true and pass it as a configruation option to the CKFinder.setupCKEditor function:
CKFinder.setupCKEditor( editor, {
readOnly: true
} );
This will disable the possibility to modify anything.
If you only want to disable uploads, you can disable modules related to upload operations:
CKFinder.setupCKEditor( editor, {
removeModules: 'FormUpload,Html5Upload,UploadFileButton'
} );
The second thing is to change Access Control settings in the server side connector by setting 'FILE_CREATE' to false so the uploads will be disabled also on the server side.
I have a client who makes Flash AS2 based language learning software.
They wanted to add a bug report email to the apps.
It is dead simple if you don't mind the swf's post opening a new tab:
on (release, releaseOutside) {
var my_Var:LoadVars = new LoadVars();
my_Var.brsub = subject.text;
my_Var.brmsg = message.text;
my_Var.send("bug_report.php", "_blank", "POST");
}
I am looking for docs or an example in AS2 of making this post via AJAX and not opening the new tab.
Anyone know where I can read up on it. I know it must be out there but my Googling has come up empty.
You don't need to make an AJAX Request in Flash to process that request:
you can use the loadVariables method to send data via POST, without leaving your Flash movie:
Adobe Help Reference