Add a File (JS object) to input type="file"

14,490

No, you can't.

Taken from here:

It seems like you want to take the File object from the drop event and assign it to the element. Unfortunately, you can't do that. Only the user can select files; you can't dynamically change the files which will be uploaded because browsers deny JavaScript this ability for security reasons.

Share:
14,490
default connection
Author by

default connection

Updated on June 07, 2022

Comments

  • default connection
    default connection almost 2 years

    I need a way to add a File object to a file input field.

    Note that I do not want to set the value of the file field. (which is a security risk, ... I know that)
    I already have the file itself (and all its contents!)

    I'm creating the File object like this:

    canvas.toBlob(function(blob) {
      var file = new File([blob], 'file.png');
      // and now I want to add MY File to the input here
    });
    

    Please don't tell me about how to upload the File, I know about XMLHttpRequest Level 2. I want to upload the File to an external website (potentially using a userscript or something similar).

    So, how can I achieve that? Or if it's not possible: why can't I add a File that I actually own (because I created it in the Browser (as a virtual File, which does not even exist in the users filesystem)) to an input field that I own too? (technically the input field could be my own, that does not matter here)