4

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

John Christian De Chavez
  • 312
  • 1
  • 3
  • 19

2 Answers2

3

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/>
Community
  • 1
  • 1
guest271314
  • 1
  • 15
  • 104
  • 177
  • 1
    @guest271314 I hope OP will say something in the comments of your answer, because otherwise we spend our time for nothing. As I understood, OP wants to change `upload.files` object (`FileList`) by removing one item from this list. _removing from list_ does mean that **original** object is changed, not its modified version elsewhere. As one of the results of this action you should see "2 files are selected" instead of "3 files are selected" in the default `` info. [This fiddle](http://jsfiddle.net/0gous4vv/3/) illustrates what is required. But it doesn't work due to readonly. – Regent Apr 24 '15 at 09:29
  • @Regent Yes. Updated post attempts approach of utilizing `.splice()` to create "new" array of file objects to "keep" , _not_ attempting to modify, "delete" , or upload original `FileList` object. See also http://stackoverflow.com/questions/26245482/sorting-algorithm-in-javascript/26246038#comment41172485_26246038 – guest271314 Apr 24 '15 at 09:39
  • @Regent Instead of `splice()` , could utilize `files.item(index)` within loop to return, upload desired files ? , if expected result at endpoint is `File` object , and not `Array` ? See updated stacksnippets . – guest271314 Apr 24 '15 at 10:05
  • @guest271314 you can iterate through selected files with `upload.files.item(index)` or with `upload.files[index]`, but neither `upload.files[1] = { };` nor `delete upload.files[1]` works, because of readonly status of `upload.files`. – Regent Apr 24 '15 at 10:30
  • @Regent and guest271314. 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 – John Christian De Chavez Apr 24 '15 at 10:57
  • @JohnChristianDeChavez Yes. Post , stacksnippets attempts to demonstrate possible approaches of selecting which files will be uploaded; including `.splice()` , `.item()`. Alternatively `upload.files[index]` demonstrated by @Regent at comments , jsfiddle. Do solutions provided at Answer resolve Question ? – guest271314 Apr 24 '15 at 11:39
  • @guest271314 i still cant get it. :( my brain is damaged – John Christian De Chavez Apr 27 '15 at 09:03
  • @JohnChristianDeChavez Can describe _"i still cant get it."_ ? , create stacksnippets http://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/ , jsfiddle http://jsfiddle to demonstrate ? Tried stacksnippets above ? – guest271314 Apr 27 '15 at 09:07
  • @guest271314 how can i upload the _file var which is an array from array.proto.splice... – John Christian De Chavez Apr 27 '15 at 09:21
  • @JohnChristianDeChavez Try creating a `json` object from files properties , converting file to `base64` string. Try selecting three or more files at http://jsfiddle.net/guest271314/LL95z474/6 ; should return first two files selected, applying `var idstokeep = [0, 2];` . May require minimal wait for responses depending on file size; see network tab at console during requests. – guest271314 Apr 27 '15 at 10:06
  • @guest271314 how about ajax post only without displaying the images. because i already display them before uploading – John Christian De Chavez Apr 27 '15 at 10:07
  • @JohnChristianDeChavez Can remove `results` variable through to and including next line that appends `results` to `body` element. – guest271314 Apr 27 '15 at 10:10
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/76345/discussion-between-john-christian-de-chavez-and-guest271314). – John Christian De Chavez Apr 27 '15 at 10:21
  • @guest271314 hi, im having trouble in splice. it removes the wrong item after the first remove. i think because of the _files. re organize the indexes. right? – John Christian De Chavez Apr 28 '15 at 02:28
-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/>
lizz
  • 7
  • 2