1

I want to write a browser add-on that automatically upload file on the page. So this will be done in pure Javascript.

This is what I have / know:

  1. input#someId of the file upload input

  2. File name and location in the computer

I am trying to "hardcode" in the console for now as a "Proof of Concept" but I cannot get it to work.

I have tried these two methods:

  1. inputElement.click() as inputElement is the querySelector of that input.

  2. Use initMouseEvent from what's the equivalent of jquery's 'trigger' method without jquery? but gave me error Uncaught TypeError: Cannot read property 'dispatchEvent' of null

So my questions are:

  1. How to trigger click input of file upload element?

  2. Better: how to process the upload completely? Basically pass the filename+location for upload to start (like when user clicks OK to open the file from the dialog)

UPDATE 1:

I was reading this http://www.thecssninja.com/javascript/fileapi Maybe uploading file from File System is not possible. How about these alternatives:

  1. We can grab a file from url (http)

  2. The file is just image and in Javascript memory (base64)

Anyone of the above should be OK if they can be automatically upload and bypass the dialog box and search the file via local File System. I am thinking what if the image DOM or even canvas can be just dragged?

Community
  • 1
  • 1
HP.
  • 19,226
  • 53
  • 154
  • 253
  • 2
    You actually can't do this, browsers will not let you programatically trigger file uploaders for security purposes. There must be user interaction – Brennan Oct 17 '14 at 20:10
  • It would be a major security risk to upload a file from the user's machine automatically. File uploads require manual user interaction (therefore explicit consent). Would you like it if a website you visited automatically uploads your, say, browser settings, to a remote server? – Terry Oct 17 '14 at 20:12
  • http://stackoverflow.com/questions/15249185/local-chrome-extension-to-set-file-of-input-type-file – epascarello Oct 17 '14 at 20:13
  • possible duplicate of [File upload with Javascript without user intervention](http://stackoverflow.com/questions/3014587/file-upload-with-javascript-without-user-intervention) – T.W.R. Cole Oct 17 '14 at 20:20
  • I've seen somebody doing it through `jQuery`s `.click()`. I never went to find out how it works, but it does. – Tomáš Zato Oct 17 '14 at 20:44
  • By the way the reason @Terry mentions sounds stupid to me. Opening *File dialog* is not the same as picking up actual file and sending it. Opening *File dialog* is rather just like calling `alert()`. – Tomáš Zato Oct 17 '14 at 20:45
  • @TomášZato Stupid? No. The OP clearly mentioned triggered file upload, not just merely opening the file dialog. I wonder which part of `automatically upload file` do you not understand. – Terry Oct 17 '14 at 21:02
  • Tomas, instead of insulting people, maybe you should spend more time reading the question. – Feign Oct 17 '14 at 21:09
  • Well, I was solely talking about the impossibility to invoke the dialog by javascript - which is [upsetting webmasters](http://stackoverflow.com/q/210643/607407) for years. After reading again, I can see @Terry was talking about something else. Also, I'm totally unaware of insulting anybody - please elaborate. – Tomáš Zato Oct 17 '14 at 22:13

1 Answers1

1

As people commented, you cannot do that. For security reasons, you have absolutely no access to programmatic fill an file input. Think about it, some dude could add a simple script to steal files from your computer and you wouldn't even know!

As far as I know, can't be done.

Caio Vianna Lima Netto
  • 131
  • 6
  • Maybe can be done by java. Java can do any kind of sick stuff. – Tomáš Zato Oct 17 '14 at 23:28
  • yes, because you need to allow the applet to run, and will be warned you should trust it ... so basically you are opening the door for it to do whatever yo want - but javascript runs ALWAYS so you don't get the chance to "allow" it, so it doesn't support such feature by default. – Caio Vianna Lima Netto Oct 18 '14 at 04:02
  • 1
    Yeah, I know. However I remember times when there were less warnings for java applets... – Tomáš Zato Oct 18 '14 at 09:39
  • I updated the question. Any chance what my suggestion is possible? – HP. Oct 20 '14 at 08:29
  • a remote url is easy obviously, you just need to create an Image object (var myImage = new Image(); myImage.src = 'url';) and work with it. There are functions to read the pixel data in it if you want etc etc... you might want to add a callback for when the image is fully loaded to work with it though. – Caio Vianna Lima Netto Oct 20 '14 at 14:43
  • But is it "feasible" to upload the data itself though? I mean what's the difference between popup a dialog to choose file vs. send the data string? – HP. Oct 20 '14 at 21:30