JQuery: how can I push a file to another input array value?

Question

I have 2 inputs:

each time, I select some files form temp and I want push to another input files.

I do this step:

chage first iput:

<input type="file" id="temp" name="temp[]" onchange="readFile(this);" multiple />

function readFile(input) {
    counter = input.files.length;
     for(x = 0; x<counter; x++){
        if (input.files && input.files[x]) {
           const  reader = new FileReader();

           reader.onload = function (e) {
              // add thumbnail picture
           }

           reader.readAsDataURL(input.files[x]);

        }
     }
}

I add this code to main js fuction:

            var  new_file = [];
            new_file["id"] = "1";
            new_file["main"] = "0";
            new_file["delete"] = "0";
            new_file["file"] = input.files[x];
            files = $("input[name='files[]']").val();
            if(!Array.isArray(files)) files = [];
            files.push(new_file);
            $("input[name='files[]']").val(input[x]);

So finall code:

function readFile(input) {
    counter = input.files.length;
     for(x = 0; x<counter; x++){
        if (input.files && input.files[x]) {
           const  reader = new FileReader();

            var  new_file = [];
            new_file["id"] = "1";
            new_file["main"] = "0";
            new_file["delete"] = "0";
            new_file["file"] = input.files[x];
            files = $("input[name='files[]']").val();
            if(!Array.isArray(files)) files = [];
            files.push(new_file);
            $("input[name='files[]']").val(input[x]);

           reader.onload = function (e) {
              // add thumbnail picture
           }

           reader.readAsDataURL(input.files[x]);

        }
     }
}

So I have 2 problem:

in server side, I got this:

 "files" => array:1 [▼
    0 => null
  ]

but temp is ok:

"temp" => array:1 [▼
    0 => UploadedFile {#1349 ▶}
 ]

Also, in line new_file["file"] = input.files[x];, input.files[x] is not a file. it is an object. how can insert file to new_file["file"]?

The value of a file input is not file object. This is an XY Problem . What exactly are you trying to accomplish? You can't programmatically add files to an input for security reasons — charlietfl
– charlietfl, Commented Aug 24, 2019 at 17:58

Wei Seng Tan · Accepted Answer · 2019-08-24 18:09:26Z

1

You can't move the value of one file input to another, it is a security risk.

From copying the value of a form's file input field to another form's input field

If the end result you want to achieve is to have identical values for both the file inputs when user select files for input[name="temp[]"], consider using clone and replace instead:

$('input[name="temp[]"]').change(function() {
  var $clone = $this.clone()
  $clone.attr('name', 'files[]');
  $('input[name="files[]"]').replaceWith($clone);
});

answered Aug 24, 2019 at 18:09

Wei Seng Tan

5073 silver badges8 bronze badges

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

Collectives™ on Stack Overflow

JQuery: how can I push a file to another input array value?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related