4

I try to simulate programmatically the user clicking on an html element type input:file to upload a file to a website with javascript on firefox browser. The following javascript codes in my javascript file simulates and opens the file dialog:

var target_element; 
var dispatchMouseEvent = function(target, var_args) { 
    var e = document.createEvent("MouseEvents");
    e.initEvent.apply(e, Array.prototype.slice.call(arguments, 1));
    target.dispatchEvent(e); 
};

target_element = window.content.document.getElementById("DivElement");
dispatchMouseEvent(target_element, 'mouseover', true, true);
dispatchMouseEvent(target_element, 'mousedown', true, true); 
dispatchMouseEvent(target_element, 'mouseup', true, true); 
dispatchMouseEvent(target_element, 'click', true, true);

but I can't find a way to simulate programmatically the selection of a file on the file dialog like a user selecting a file and click on the button Open of the file dialog. Is that possible to do it with javascript ?

2
  • 1
    here is the javascript codes in the javascript file : Commented Mar 2, 2013 at 12:38
  • If you're looking for automated testing, have a look at this question, these tools may be able to simulate this; stackoverflow.com/questions/4043706/… Commented Mar 2, 2013 at 12:43

2 Answers 2

5

This is going to be impossible, and for good reason. If you could automate the selection of a file on client side, you would open the door to massive breaches of security and privacy.

Sign up to request clarification or add additional context in comments.

8 Comments

thanks for your answer. So is it possible to submit/upload the file with javascript without opening the file dialog ? I can see some applications like iMacros which can simulate the file uploaded to the website without any problems. So I guess it should be possible to do it in javascript ?
just imagine some random coder could get any file from your pc and upload it without you noticing it, so for security reasons you can't upload something without the user doing it
I think there is a misunderstanding. I am talking about javascript running on the user context side aka client browser, not javascript running from server side. How do you want security issues in those case ? Mozilla firefox has tons of libraries to access file systems, I develop tons of script doing that, no security issue at all. Anything done by a user can be done programmatically, the problem in my case it is about a file dialog opened so I can't find a way to reference this file dialog with javascript.
@Alex do you mean in a plugin?
there is no need of plugin, not even need of jquery, pure javascript can probably solve the problem. I would like to test if it is possible to reference the file dialog with javascript. There is a Mozilla module interface to reference file dialog developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/…, but unfortunately I can't not reference the file dialog opened. But I guess it could be possible to send the selected file programmatically to the file dialog.
|
0

Create a input file and fire the click event.

const input = document.createElement('input');
input.setAttribute('type', 'file');
input.addEventListener('change', event => { console.log('Attached!') });
input.click();

1 Comment

This isn't selecting a file though, and it still requires user interaction to do so. As the existing answer says this would be a massive security hole if it were possible to automate. To add to that, the file picker is a system dialog that JS has no control over and it never should. The best they could do is mock the needed data and skip over the picker.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.