John Christian De Chavez John Christian De Chavez - 1 year ago 77
Javascript Question

input file to array javascript/jquery

i have an input type file where i put into a variable in javascript where i want to manipulate the files.


<input class="file" id="file1" name="uploadedimages[]" type='file' multiple/>


var upload = document.getElementById('file1');
upload.files.splice(idtoremove,1) //not working

how can i delete a specific item in upload variable?.I have search that input type file is a readonly and you cannot manipulate it unless you put it to an array and upload the files with ajax.

im doing this for upload to my gallery. first i select multiple images. then there will be a preview first for the pictures before uploading. there will be also an option to remove a photo. my problem is. how can i delete that photo file in input file. so the possible solution is to store input file to array then delete what photo you want in the array then create a formdata for the array and upload using ajax

Answer Source

Edit, Updated

how can i delete a specific item in upload variable?

If expected result is array of file objects would adjust approach to splicing array items from original files object - and sending spliced array as upload - instead of attempting to "delete" items from original files object and still uploading original files object.

FileList object does not have .splice() method . Try utilizing .slice() , .call() to convert files to Array , then call .splice() method on array of File objects, e.g.;

// `_files` : `File` object items from original `files` `FileList`
// call `.splice()` on items that would be uploaded ,
// upload `_files` array - _not_ original `files` `FileList` object
// e.g.; `_files`:`File` objects to _keep_ not "delete" from `files`
var idstokeep = [0, 2]; // splice , keep first `2` files 
var _files =[0], idstokeep[1]);

See how does work?

Alternatively , utilize


Returns a File object representing the file at the specified index in the file list.

to return files at specific index within FileList

  var files =;
  // return `file` at `index` `1`
  var firstFile = files.item(1);

var upload = document.getElementById("file1");

upload.onchange = function(e) {
  var files =;
  var firstFile = files.item(1); 
  var idstokeep = [0, 2]; // keep first `2` files from `multiple` selection
  var _files =[0], idstokeep[1]);
  console.log(files, files.length         
              , _files, _files.length
              , firstFile);
<script src="">
<input class="file" id="file1" name="uploadedimages[]" type='file' multiple/>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download