input file to array javascript/jquery

Question

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

HTML:

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

JavaScript:

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 1

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 = Array.prototype.slice.call(files).splice(idstokeep[0], idstokeep[1]);

See how does Array.prototype.slice.call() work?

---

Alternatively , utilize

item()

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 = e.target.files;
  // return `file` at `index` `1`
  var firstFile = files.item(1);

---

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

upload.onchange = function(e) {
  var files = e.target.files;
  // https://developer.mozilla.org/en-US/docs/Web/API/FileList#item
  var firstFile = files.item(1); 
  var idstokeep = [0, 2]; // keep first `2` files from `multiple` selection
  var _files = Array.prototype.slice.call(files).splice(idstokeep[0], idstokeep[1]);
  console.log(files, files.length         
              , _files, _files.length
              , firstFile);
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input class="file" id="file1" name="uploadedimages[]" type='file' multiple/>