How To Delete A Specific File From Input Type File Multiple?

I'm using a input type file multiple to update some pictures. Before upload, the page shows a miniature of each picture. I would like to do a remove link to each picture, and when

Solution 1:

You can do it simply via jQuery in one line: $('#midiasUpload').val('');. It resets input value. Here is the snippet:

functionselect(el) {
  img = el;
}
var img;
var input;
$(document).ready(function() {
  $("#midiasUpload").on('change', function() {
    var countFiles = $(this)[0].files.length;
    input = $(this)[0];
    console.log('Input value after upload: ', input.value)
    var imgPath = input.value;
    img = imgPath;
    var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
    var image_holder = $("#midiaDigital");
    image_holder.empty();
    if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
      if (typeof(FileReader) != "undefined") {
        for (var i = 0; i < countFiles; i++) {
          var reader = newFileReader();
          reader.onload = function(e) {
            $(image_holder).append('<div class="form-group row">' +
                                   '<div>' +
                                   '<div class="col-md-6">' +                             
                                   '<img src="' + e.target.result + '" class="thumb-image img-responsive" onclick="select($(this))">' +
                                   '<input type="text" class="form-control input-sm" name="midiaDigitals[' + i + '].legenda" placeholder="Digite a descrição da mídia digital"/>' + 
                                   '<a href="#" class="remove_field1">Remover</a>' + //add input box'</div>' +
                                   '</div>' +
                                   '</div>'); 
          }
          image_holder.show();
          reader.readAsDataURL($(this)[0].files[i]);
        }
      } else {
        alert("O browser não suporta upload de arquivos.");
      }
    } else {
      alert("Formato de arquivo inválido");
    }
  });

  $(midiaDigital).on("click",".remove_field1", function(e){ //user click on remove text
    e.preventDefault(); $(this).parent('div').remove(); 
    img.val = '';
    input.value = null;
    console.log('Input value after remove: ', input.value)
  });
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputid="midiasUpload"multiple="multiple"type="file"name="midias"accept="image/x-png,image/gif,image/jpeg" /><divid="midiaDigital"style="margin-bottom: 100px;"></div>

Solution 2:

Please change this code inside $(image_holder).append( function

'<ahref="#"data-id="'+i+'"class="remove_field1">Remover</a>' + //add input box

This code works after clicking on remove_field1

$(midiaDigital).on("click",".remove_field1", function(e){ //user click on remove text
    e.preventDefault(); $(this).parent('div').remove(); 
    var deletedId=$(this).prop("data-id");
    var names = [];
    for (var i = 0; i < $("#midiasUpload").get(0).files.length; ++i) {
     if(deletedId==i){}else{  names.push($("#midiasUpload").get(0).files[i].name);  }
    }
    $("#midiasUpload").val(names);
});