JSFiddle - React, Tailwind, and code Playground

by ttquang1063750

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input id="inputfile" type="file" multiple> 
<br>
<div id='allfiles'></div>

JavaScript

var fileInput = document.getElementById('inputfile');
              var fileListDisplay = document.getElementById('allfiles');
              
              var fileList = [];
              var renderFileList, sendFile;
              
              fileInput.addEventListener('change', function (evnt) {
                    fileList = [];
                for (var i = 0; i < fileInput.files.length; i++) {
                    fileList.push(fileInput.files[i]);
                }
                renderFileList();
              });
              
              renderFileList = function () {
                fileListDisplay.innerHTML = '';
                fileList.forEach(function (file, index) {
                    var fileDisplayEl = document.createElement('p');
                  fileDisplayEl.innerHTML = `${file.name} <button data-index="${index}" class='deletfile'>X</button>`;
                  fileListDisplay.appendChild(fileDisplayEl);
                });
              };  
            
            
            $(document).on('click','.deletfile', function()
             {  
              const index= $(this).attr('data-index');
              fileList.splice(parseInt(index, 10), 1);
              $(this).parent().remove();
             });