I'm in the process of creating a multiple file upload with delete option, similar to the design shown in this image:
https://i.sstatic.net/RomOR.jpg
I have been following an example on this JS Fiddle demo. My goal is to eliminate the button with the id attribute uploadBtn and instead utilize the native browser file input for uploading.
Here is the code I have so far:
HTML
<input type="file" id="uploadFile" name="FileUpload" multiple="multiple"/>
<div id="upload_prev"></div>
JavaScript
$(document).on('click','.close',function(){
$(this).parents('span').remove();
})
$('#uploadFile').on('change', function() {
var filename = this.value;
var lastIndex = filename.lastIndexOf("\\");
if (lastIndex >= 0) {
filename = filename.substring(lastIndex + 1);
}
var files = $('#uploadBtn')[0].files;
for (var i = 0; i < files.length; i++) {
$("#upload_prev").append('<span>'+'<div class="filenameupload">'+files[i].name+'</div>'+'<p class="close" >X</p></span>');
}
}
CSS
.filenameupload {
width:98%;
}
#upload_prev {
border:thin solid #000;
width: 65%;
padding:0.5em 1em 1.5em 1em;
}
#upload_prev span {
display: flex;
padding: 0 5px;
font-size:12px;
}
However, the current setup doesn't display the file names with the remove feature. What adjustments should I make here?