Question

159

input file to array javascript/jquery

rated 0 times [ 165] [ 6] / answers: 1 / hits: 26676 / 9 Years ago, fri, april 24, 2015, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

neob

Add To Favorites

Follow

Total Points: 253

Total Questions: 106

Total Answers: 104

Location: Federated States of Micronesia

Member since Sun, May 16, 2021

3 Years ago

answered 9 Years ago pranavrorys · Accepted Answer

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/>