Copy/Clone files from File Input to another Input

Question

If i open a file select, select a file, then click file select again and then click cancel, it forgets the originally selected file

//Main input
<input type="file" class="input" id="input" name="avatar">

//Backup input
<input type="file" class="input_two" id="input_two" name="avatar_two">

Is there a workaround for this, possibly creating a temporary input class and copying the .files over to this one so that i can still have access to the last file

$('.input').change(function () {
        var value = this.files;
        console.log(value);
        if(value.length > 0)
        {
            $(.avatar_two).assign(value)... //This is what i want to do
        }
        else
        {
            console.log("nada");
        }

is this possible?

function copy() { var myObject, f; myObject = new ActiveXObject("Scripting.FileSystemObject"); f = myObject.file.copy("c:\\test.txt", "c:\\mytest.txt"); } — cvsr.sarma, Feb 28 '17 at 16:34
*"Uncaught ReferenceError: ActiveXObject is not defined"* nice job at multi-browser compatibility. — freedomn-m, Feb 28 '17 at 16:50

score 6 · Accepted Answer · edited Oct 31 '17 at 10:50

6

~~It is not possible to set .files property of <input type="file"> element, which references read-only FileList object.~~ See React/Javascript--FileReader/<input/>/adding image.

You can call File.prototype.slice() to create a copy of the File object. Or use FormData, FormData.prototype.append() to store selected files.

var clone, i = 0;
var fd = new FormData();

$('.input').change(function() {
    var value = this.files;
    console.log(value);
    if (value.length > 0) {
        clone = value[0].slice(0, value[0].size, value[0].type);
        fd.append("file-" + (i++) /* this.name */, value[0]);
    } else {
        console.log("nada");
    }
});

edited Oct 31 '17 at 10:50

Niels Steenbeek

4,692
2
41
50

answered Feb 28 '17 at 16:37

guest271314

1
15
104
177

@NielsSteenbeek alright, that's working, I get the clone and the fd values with the image I selected. But, how do you copy that into the backup input¿? – xarlymg89 Jan 08 '19 at 09:59
@CarlosAlbertoMartínezGadea try [this one](https://stackoverflow.com/questions/47119426/how-to-set-file-objects-and-length-property-at-filelist-object-where-the-files-a) – Niels Steenbeek Jan 08 '19 at 14:21
@NielsSteenbeek thank you for replying, but at the end it seemed a bit complicated situation that I have. The 2 file input I have, have JS events bound to them, and I don't seem to be able to cope with that. Thank you anyway! I opted for a different way of solving it :) – xarlymg89 Jan 09 '19 at 09:47

score 6 · Answer 2 · answered Feb 21 '21 at 19:32

it is possible at 2021 via DataTransfer (at least latest chrome/firefox)

let file = document.getElementById("file");
let back = document.getElementById("back");

file.addEventListener('change', function() {
  let files = this.files;
  let dt = new DataTransfer();
  for(let i=0; i<files.length; i++) {
    let f = files[i];
    dt.items.add(
      new File(
        [f.slice(0, f.size, f.type)],
        f.name
    ));
  }
  back.files = dt.files;
});

<input type="file" id="file" multiple>
<input type="file" id="back" multiple>

Great that works exactly as I need! Thank you very much! – TomRavn Sep 22 '21 at 05:35 — TomRavn, Sep 22 '21 at 05:35

score 0 · Answer 3 · answered Oct 08 '20 at 07:19

0

As I know, you cannot do that for security reasons, at least setting the value, I don’t know if coping or cloning it’s possible but take a look to this answer

answered Oct 08 '20 at 07:19

IgniteCoders

4,834
3
44
62

Copy/Clone files from File Input to another Input

3 Answers3

Linked