JSFiddle - React, Tailwind, and code Playground

by Athishay Jain

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <form id="myForm" method="post">

        Files: <input type="file" id="files" name="files" multiple><br/>

        <div id="selectedFiles"></div>

        <input type="submit">
    </form>

CSS

#selectedFiles img {
        max-width: 200px;
        max-height: 200px;
        float: left;
        margin-bottom:10px;
}

JavaScript

var selDiv = "";
    var storedFiles = [];
    
    $(document).ready(function() {
        $("#files").on("change", handleFileSelect);
        
        selDiv = $("#selectedFiles"); 
        
        $("body").on("click", ".fa-trash", removeFile);
    });
        
    function handleFileSelect(e) {
        var files = e.target.files;
        var filesArr = Array.prototype.slice.call(files);
        filesArr.forEach(function(f) {          

            var ext = f.name.split('.').pop();
			var icon = "";
			switch (ext) {
				case 'png':
					icon = "fa fa-file-photo-o";
					break;
				case 'txt':
					icon = "fa fa-file-text-o";
					break;
				default:
					icon = "fa fa-file";
				     
				
			}			
			
            storedFiles.push(f);
			var html = "<div><i class='" + icon + "'></i><span class=name>" + f.name + "</span> <i class='fa fa-trash'></i> <br clear=\"left\"/></div>";
			selDiv.append(html);
                
           
        });
        
    }
	
    function removeFile(e) {
		var ele = $(e.target).parent().find(".name")[0]
        var file = ele.innerText;
        for(var i=0;i<storedFiles.length;i++) {
            if(storedFiles[i].name === file) {
                storedFiles.splice(i,1);
                break;
            }
        }
        $(this).parent().remove();
        console.log(storedFiles);
    }