1

Please look at below URL: https://codepen.io/Sandipaot123/pen/LLJdeY/

I am able to add and remove attachment for one file, next time onward it replacing the old file with new one. How can I add one more row each time on click of upload button, and able to remove it too.

var fileInputTextDiv = document.getElementById('file_input_text_div');
var fileInput = document.getElementById('file_input_file');
var fileInputText = document.getElementById('file_input_text');

fileInput.addEventListener('change', changeInputText);

function changeInputText() {
  var str = fileInput.value;
  var i;
  if (str.lastIndexOf('\\')) {
    i = str.lastIndexOf('\\') + 1;
  } else if (str.lastIndexOf('/')) {
    i = str.lastIndexOf('/') + 1;
  }
  fileInputText.value = str.slice(i, str.length);
}

$(document).ready(function() {
  $("#clear").click(function() {
    $("#file_input_file").val("");
    var fileInputText = document.getElementById('file_input_text');
    fileInputText.value = "";

  });
});
body {
  display: flex;
}

.file_input_div {
  margin: auto;
  width: 250px;
  height: 40px;
}

.file_input {
  float: left;
}

#file_input_text_div {
  width: 200px;
  margin-top: -8px;
  margin-left: 5px;
}

.none {
  display: none;
}

.content-grid {
  max-width: 550;
  height: auto;
  margin: auto;
  padding: 2px;
}

.mdl-cell {
  margin: 2;
}

.mdl-list {
  padding: 1px 3px;
}

.mdl-list__item {
  padding: 3px;
}

body {
  padding-top: 20px;
  padding-left: 20px;
  box-sizing: border-box;
}


}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mdl-card mdl-cell mdl-cell--12-col mdl-cell--4-col-tablet mdl-shadow--2dp">
  <ul class="mdl-list">
    <li class="mdl-list__item">
      <span class="mdl-list__item-secondary-action">
                <label class="mdl-button mdl-js-button mdl-button--colored">
                    <i class="material-icons">file_upload</i>
                    <input id="file_input_file" class="none" type="file" />
                </label>
            </span>
      <div id="file_input_text_div" class="mdl-textfield mdl-js-textfield textfield-demo">
        <input class="file_input_text mdl-textfield__input" type="text" disabled readonly id="file_input_text" />
        <label class="mdl-textfield__label" for="file_input_text"></label>
        <button id="clear">Clear</button>
      </div>
    </li>

  </ul>
</div>
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Technogix
  • 77
  • 13

1 Answers1

0

I guess that you need to play with input's "files" property, for example: 

var filesToUpload = [];
$("file_input_file").change(function(){
  let files = this.files;
  filesToUpload.push(files);
});

You can find more information about FileLists here. I'm just curious if it's possible to send these files to server indirectly from custom array (as filesToUpload above) instead of sending it directly from input. If yes - then problem is solved. You can then modify the view basing on filesToUpload's content.

kochod
  • 5
  • 5