CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extensionfirefox-addon
mjs
mjs

Reputation: 22369

Bypassing the browse file / upload file dialog

I am building a Chrome extension for internal use, and at one step, the user can upload a file. This is always the same file, and I would like to skip the browse dialog and directly assign the proper value to the input field.

The file is separate from the plugin code.

Is this possible with Javascript, or developing Chrome, Firefox extensions?

I have tried: 

input.val("file://C:/random.txt")

and then submit the surrounding form. But that did not work.

Upvotes: 3

Views: 2541

Answers (2)

apsillers
apsillers

Reputation: 115960

Firefox:

What you want seems to be possible according to this answer, but I haven't investigated it closely.

Chrome:

Outside of an NPAPI plugin, this is definitely not possible. Your browser cannot access the filesystem except when the user explicitly asks it to do so via a file dialog. If any page on the Web were able to programmatically set a filepath and then fetch the file when the user clicks a form button, that would raise massive security concerns.

So, a normal webpage certainly can't do it, obviously. If a Chrome extension could do it (i.e. read any file in the filesystem) then it would at the bare minimum require a special permission. The list of permissions does not include filesystem access, so that's out of the question.

The only option, as I mentioned in the beginning, would be to develop an NPAPI plugin to the read the file for you, which would be like building a hospital to treat a pimple. NPAPI has a pretty steep development learning curve, and it introduces significant security concerns (since your extension can now act the local user, the cost of a security compromise is much higher).

If you're willing to place the file on the browser's virtual HTML5 filesystem, then you could do that. Without specific knowledge of your needs, I can't say if that will be appropriate for you.

Upvotes: 2

Wladimir Palant
Wladimir Palant

Reputation: 57681

If your goal is to send a file to the server then trying to select it in an <input> field is the wrong way - you can create a FormData object directly and send it via XMLHttpRequest. Note that you can also create a FormData object from an existing form. This works both in Firefox and Chrome and even from a web page (usual same-origin restrictions apply of course).

The tricky part is getting a File object that you can add to the form data. From all I know, Chrome extensions don't have direct file system access other than by using an NPAPI plugin - so they cannot get a file from user's disk drive, they can merely create a blob with some data. Firefox extensions however have the File constructor that allows them to create a File object by path.

So in Firefox you would do something like this:

var formdata = new FormData();
formdata.append("file", new File("file://C:/random.txt"));

var request = new XMLHttpRequest();
request.open("POST", "http://my.server/submitFile");
request.send(formdata);

Upvotes: 3

Related Questions