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

Question

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)

Possible duplicate of Html file input, set selection from File object — Mingle Li
– Mingle Li, Commented Aug 11, 2016 at 19:56

Community · Accepted Answer · 2017-05-23 11:51:34Z

4

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.

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered Aug 11, 2016 at 19:57

Mingle Li

1,4001 gold badge15 silver badges40 bronze badges

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

2 Comments

Syamsoul Azrien Over a year ago

yes...because if it is allowed to programatically change the input file, the web-developer can easily steal user's files..

Meir Over a year ago

yes, it is possible, see accepted answer below

Meir · Accepted Answer · 2024-06-05 18:12:35Z

2

Yes it is possible:

To load file from blob:


  let fileInputElement = document.getElementById('file_input');
  let container = new DataTransfer();
  // Here load or generate data
    let data = new Blob();
    let file = new File([data], "g"+i+".jpg",{type:"image/jpeg", lastModified:new Date().getTime()});
    container.items.add(file);
  fileInputElement.files = container.files;

To load file from another file input:


  let input1 = document.getElementById('file_input');
  let input2 = document.getElementById('some_other_input')
  let container = new DataTransfer();
   [...input2.files].map(file=>container.items.add(file));
  input1.files = container.files;

https://jsfiddle.net/Kartearis/gmhwnaz6/3/

edited Jun 5, 2024 at 18:12

answered Jun 13, 2023 at 19:16

Meir

6028 silver badges22 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related