Javascript handling multiple files upload

Question

I'm working on a project with the following steps:

1. Creating the form with multiple images upload
2. Previewing, remove images on queue before upload
3. Handling the file input value before submit

Here is my code

  var fileList = []; function toObject(arr) { var rv = {}; for (var i = 0; i < arr.length; ++i) rv[i] = arr[i]; return rv; } //Image prev // Multiple images preview in browser var imagesPreview = function (input, imageContainer) { if (input.files) { var filesAmount = input.files.length; $(imageContainer).html(''); for (i = 0; i < filesAmount; i++) { var reader = new FileReader(); reader.onload = function (event) { var html = '<div class="image-item col-sm-6 col-md-4 col-lg-3"><div class="image-wrapper">' + ' <img src="' + event.target.result + '"/></div></div>'; $(html).appendTo(imageContainer); } var files = input.files; fileList.push(files[i]); reader.readAsDataURL(input.files[i]); } input.files = toObject(fileList); } }; $('#input-image').on('change', function () { imagesPreview(this, '.image-container'); }); 

  <div class="image-item"> <!-- input the image from user --> <input id="input-image" type="file" name="photos[]" multiple> <hr> <div class="image-container row"> <!-- Previewing the image thumbnail --> </div> </div> 

My questions: Can I set the value of the input-image with fileList variable because I set it but error occurs

Answer 1

Sry, a bit tired, will not go into depth or solve the hole thing... There is only one way to change the value of file inputs and that is with another FileList instance. the only way you can get them is with some new api's so it won't work in all browsers. I made a function to help you with that.

var fileList = [];

// only way to change input[type=file] value is with a other FileList instance
// and this is the only way to construct a new FileList
function createFileList(a) {
  a = [].slice.call(Array.isArray(a) ? a : arguments)
  for (var c, b = c = a.length, d = !0; b-- && d;) d = a[b] instanceof File
  if (!d) throw new TypeError('expected argument to FileList is File or array of File objects')
  for (b = (new ClipboardEvent('')).clipboardData || new DataTransfer; c--;) b.items.add(a[c])
  return b.files
}

// This is what you got to do later when they remove a image 
//
// this will trigger a change event so you maybe want to temporary
// turn off the change event listener
// 
// input.files = createFileList(fileList)

// Image prev
// Multiple images preview in browser
function imagesPreview(input, imageContainer) {
  $(imageContainer).empty();
  var URL = window.URL || window.webkitURL;
  var $html = $(
    '<div class="image-item col-sm-6 col-md-4 col-lg-3">'+
    '<div class="image-wrapper"> <img></div></div>'
  );

  $.each(input.files, function(i, file) {
    var $clone = $html.clone()
    // could be a good idea to revoke url also
    $clone.find('img').attr('src', URL.createObjectURL(file))
    $clone.appendTo(imageContainer);
    fileList.push(file);
  });
}

$('#input-image').on('change', function () {
  imagesPreview(this, '.image-container');
});

The other solution is to append each file into a formdata and send the form using ajax