JSFiddle - React, Tailwind, and code Playground

by bamthomas

HTML

<script src="https://code.jquery.com/jquery-2.2.2.js"></script>
<form method="POST" enctype="multipart/form-data" action="/echo/html">
  <button class="add">
    Add File
  </button>
  <ul class="list">
  </ul>
  <button>
  Send Form
  </button>
</form>

JavaScript

$('form button.add').click(function(e) {
	e.preventDefault();
  var nb_attachments = $('form input').length;
  var $input = $('<input type="file" name=attachment-' + nb_attachments + '>');
  $input.on('change', function(evt) {
    var f = evt.target.files[0];
    $('form').append($(this));
    $('ul.list').append('<li class="item"><strong>' + f.name + '</strong> (' + f.size + ')</li>');
  });
  $input.hide();
  $input.trigger('click');
});