Automate image upload on CKEditor

Question

I need to upload images on a website that uses CKEditor. For each image, I click "image" button -> "upload" tab -> " Choose file " button -> select file in file-browser -> "Send to server" button -> Wait for upload -> "Ok" button

I am almost able to trigger appropriate "clicks" by entering javascript code in console except for the bolded step, ie, I am not able to trigger " Choose file " button on CKEditor, ie, I am not able to programmatically click the "Browse" button. Note that once file-browser opens up, (by manual click), I can use autohotkey to enter address of my file followed by 'enter'. Alternatively, I am not able to set the image upload path using javascript (skipping file-open dialog), which is a security risk, but I need to bypass it, at least by using my own addon/extension. Please help me trigger the file browser or set image path directly into input.

Here is a demo of CKEditor: http://ckeditor.com/demo

I could make following so far.

//click image button
document.getElementsByClassName("cke_button__image")[0].click();

// click "upload" tab
document.getElementsByClassName("cke_dialog_tab")[2].click();

//Need to either trigger "choose file" dialog box or otherwise assign "C:\temp.png" to input

//Click "send to server" button
document.getElementsByClassName("cke_dialog_ui_button")[4].click();

//Need to wait, and then click "OK" button
document.getElementsByClassName("cke_dialog_ui_button")[6].click();

More info: I am writing chrome-extension to inject javascript function that could "click()" appropriate buttons. Since I am ready to build extension, there must be a way to bypass security. Any help will be appreciated.

Thank you!

Answer 1

When the file picker dialog pops up, you can't control it with javascript, and in an input type="file" you can't also set its value because that would be a security risk.

You need to move to an environment with higher permissions in order to fully achieve what you want.