JSFiddle - React, Tailwind, and code Playground

by amitava82

HTML

<div id="multifileContainer">
<input id="file" name="files" type="file" class="multiFile" />
<div id="uploadContainer">
    <dl>
    </dl>
</div>

CSS

dd{margin: 0; text-align: right;}
dt{float: left; margin-right: 20px}

JavaScript

$(document).ready(function(){

    $('#multifileContainer').delegate('.multiFile','change',function(){
        var count = $('input[name="files"]', '#multifileContainer').length;
        var $this = $(this);
        var id = $this.attr('id');
        var name = $this.attr('name');
        var filename = $(this).val().split('\\').pop();
        //alert(count);
        $('#uploadContainer dl').append('<dt>'+filename)
        $('#uploadContainer dl').append('<dd><a class="deleteUpload" href=#'+id+'>Delete') 
        
        var newFile =   '<input class="multiFile" name="files" type="file" id="'+id+count+'" />'  
        $('#multifileContainer').prepend(newFile)   
        $this.hide();    
    });
    
    $('#multifileContainer').delegate('.deleteUpload', 'click' ,function(){
        var t = $(this).attr('href');
        $(t).remove();
        $(this).closest('dd').remove();
        $(this).closest('dt').remove();
        
        return false;
    });
});