Template
17 Feb 202224 minutes to read
You can customize the default appearance of the uploader using a template along with buttons.
File list template
The template property is used to customize the default appearance of each file in the list. It can be represented as the HTML element or string. The selected or dropped files are displayed as per the template layout provided. The remove and progress bar action is handled using the corresponding events when the template is defined.
For example, you can display file type icon along with the default UI elements.
@{
var asyncSettings = new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = "https://services.syncfusion.com/aspnet/production/api/FileUploader/Save", RemoveUrl = "https://services.syncfusion.com/aspnet/production/api/FileUploader/Remove" };
}
<div id='dropArea'>
<span id='drop' class="droparea"> Drop files here or <a href="" id='browse'><u>Browse</u></a> </span>
<ejs-uploader id="UploadFiles" autoUpload="false" dropArea="#dropArea" asyncSettings="@asyncSettings" progress="onFileUpload" selected="onSelect" success="onuploadSuccess" failure="onuploadFailed"
template="<span class='wrapper'><span class='icon sf-icon-${type}'></span><span class='name file-name'>${name}</span></span>
<span class='file-size-td file-size'>${size} bytes</span> <span class='e-icons e-file-remove-btn' title='Remove'></span> <br/>
<progress id='progressBar' class='progressbar' value='0' max='100'></progress> <span class='percent-td percent'></span>"></ejs-uploader>
</div>
<script>
document.getElementById('browse').onclick = function () {
document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click();
return false;
};
function onFileUpload(args) {
let li = this.uploadWrapper.querySelector('[data-file-name="' + args.file.name + '"]');
let progressValue = Math.round((args.e.loaded / args.e.total) * 100);
//li.getElementsByTagName('progress')[0].value = progressValue;
li.getElementsByClassName('percent')[0].textContent = progressValue.toString() + " %";
}
function onuploadSuccess(args) {
if (args.operation === 'remove') {
let height = document.getElementById('dropArea').style.height;
height = (parseInt(height) - 40) + 'px';
document.getElementById('dropArea').style.height = height;
} else {
let li = this.uploadWrapper.querySelector('[data-file-name="' + args.file.name + '"]');
let progressBar = li.getElementsByTagName('progress')[0];
progressBar.classList.add('e-upload-success');
li.getElementsByClassName('percent')[0].classList.add('e-upload-success');
let height = document.getElementById('dropArea').style.height;
document.getElementById('dropArea').style.height = parseInt(height) - 15 + 'px';
}
}
function onuploadFailed(args) {
let li = this.uploadWrapper.querySelector('[data-file-name="' + args.file.name + '"]');
let progressBar = li.getElementsByTagName('progress')[0];
progressBar.classList.add('e-upload-failed');
li.getElementsByClassName('percent')[0].classList.add('e-upload-failed');
}
function onSelect(args) {
let length = args.filesData.length;
let height = document.getElementById('dropArea').style.height;
height = parseInt(height) + (length * 55) + 'px';
document.getElementById('dropArea').style.height = height;
}
document.getElementById('dropArea').onclick = (e) => {
let uploadObj = document.getElementById('UploadFiles').ej2_instances[0];
let target = e.target;
if (target.classList.contains('e-file-delete-btn')) {
for (let i = 0; i < uploadObj.getFilesData().length; i++) {
if (target.closest('li').getAttribute('data-file-name') === uploadObj.getFilesData()[i].name)
{
uploadObj.remove(uploadObj.getFilesData()[i]);
}
}
}
else if(target.classList.contains('e-file-remove-btn')) {
detach(target.closest('li'));
}
};
</script>.e-upload {
width: 100%;
}
.e-file-select-wrap {
display: none;
}
.e-upload {
border: none;
margin-top: 15px;
}
#drop {
padding-left: 30%;
font-size: 14px;
font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif"
}
#dropArea {
min-height: 18px;
border: 1px dashed #c3c3cc;
padding: 15px 0;
margin: 0 auto;
width: 440px;
}
.wrapper{
padding: 0 10px;
}
.e-upload-success, .e-upload-failed {
display: none;
}
.sf-icon-bmp:before { content: "\e700"; }
.sf-icon-xlsx:before, .sf-icon-XLSX:before { content: "\e701"; }
.sf-icon-avi:before, .sf-icon-AVI:before { content: "\e702"; }
.sf-icon-doc:before, .sf-icon-DOC:before { content: "\e703"; }
.sf-icon-exe:before { content: "\e704"; }
.sf-icon-mp4:before { content: "\e705"; }
.sf-icon-zip:before, .sf-icon-ZIP:before { content: "\e706"; }
.sf-icon-tar:before { content: "\e707"; }
.sf-icon-docx:before { content: "\e708"; }
.sf-icon-jpg:before { content: "\e709"; }
.sf-icon-png:before { content: "\e70a"; }
.sf-icon-gif:before { content: "\e70b"; }
.sf-icon-pdf:before { content: "\e70c"; }
.sf-icon-txt:before { content: "\e70d"; }
.sf-icon-jpeg:before { content: "\e70e"; }
.sf-icon-xls:before { content: "\e70f"; }
.sf-icon-mp3:before { content: "\e710"; }
#dropArea .e-upload .e-upload-files .e-file-delete-btn,
#dropArea .e-upload .e-upload-files .e-file-remove-btn {
top: 35%;
}
span.file-icon{
width: 25px;
height: 25px;
display: inline-flex;
background-size: contain;
margin: 7px;
}
img.file-icon {
width: 20px;
height: 20px;
}
.file-name {
color: #e1e1e1;
font-size: 14px;
padding: 3px 10px;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
width: 50%;
white-space: nowrap;
position: relative;
top: 5px;
}
.file-size {
font-size: 12px;
padding: 3px 10px;
overflow: hidden;
display: inline-block;
position: relative;
top: 6px;
}
.progressbar{
height: 5px;
width: 70%;
margin-left: 14px;
}
.upload-success{
background-color: green
}
.upload-failed{
background-color: red;
}
#dropArea .e-upload .e-upload-files .e-upload-file-list {
min-height: 63px;
}
#dropArea .e-upload {
border-width: 0 1px;
}
/* csslint ignore:start */
@font-face {
font-family: 'FileType_Font';
src:
url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj1tSgIAAAEoAAAAVmNtYXDnYOfNAAAByAAAAFZnbHlmBIukdgAAAkgAAB78aGVhZA/Zy4MAAADQAAAANmhoZWEH1AQTAAAArAAAACRobXR4SAAAAAAAAYAAAABIbG9jYUgKP2YAAAIgAAAAJm1heHABKQFJAAABCAAAACBuYW1lPdPGuQAAIUQAAAJtcG9zdGQHrBsAACO0AAAAkAABAAAEAAAAAFwEAAAAAAADdwABAAAAAAAAAAAAAAAAAAAAEgABAAAAAQAAvWuGjl8PPPUACwQAAAAAANaiQ0kAAAAA1qJDSQAAAAADdwP0AAAACAACAAAAAAAAAAEAAAASAT0ADQAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnEAQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABABCAAAABAAEAAEAAOcQ//8AAOcA//8AAAABAAQAAAABAAIAAwAEAAUABgAHAAgACQAKAAsADAANAA4ADwAQABEAAAAAAAABCgHaAswDrAQ4BNQFsAZiB8wIsAlKCsgMAAyEDbgOrg9+AAAACAAAAAADdwP0ABIAJQA4AFgAZwCRANIA3QAAATM/Bj0BLwYjJTM/Bj0BLwUrAQU7AT8GLwcjJRczHwsVDwsjFSM1Ixc3MxUjNTcHIycXFSM1IzMfChUPBh8HDwojNQMRFR8NMyEzPw01ESsBLwg9ASEjDw0FHwczJwEjJQcGBgUDAwICAgMEBgYHJwGOJwgHBgUEAwICAwQFBgcHKP5yIAgGBQUEAwEBAQEDAwUFBwggAbUHCA0GBgUFBAQDAwIBAQEBAgMDBAQFBQYMDy4hvTc2KiEDNxc4BCFmCAcNCwoDBAMCAgEBAgIDBAQGBgcGBgQEAwEBAQIBAwMDBAUKDA5MegICAwQFBQYHBwgICQkJCgIyCgkJCQgIBwcGBQUEAwIC+gYHBgsKCAcFAQH+qAoJCQkICAcHBgUFBAMCAgH0AQEDBAUFBgbb+gE/AQEDAwQFBgYHBgUEAwMBAQsBAQMDBQUHBwcGBgUEAwI0AgIDBAQFBgcFBQMDAgEBGgEDAwIEBAQEBQYFBgYHDQYFBgQFBAMDAwQCRryQkLw+U5GRUz68AQIEBgMEBAUFBQwGBgYFBQQEAwMDBQUGBgcIBwsFBQUEBAMFBAK8AbX81AoJCQkICAcHBgUFBAMCAgICAwQFBQYHBwgICQkJCgJSAQEFBwgKCwYHBvoCAgMEBQUGBwcICAkJCYcGBgUFBAICAfoAAAYAAAAAA3cD9AAZADMATQBZAGQApQAAATMfAx0BDwMjISMvAz0BPwMzJTMfAx0BDwMrAi8DPQE/AzM3Mx8DHQEPAysCLwM9AT8DMycXNzMHFyMnByM3JwEfBzMnBREVHw0zITM/DTURKwEvCD0BIQ8OAuoDAwUEAQEEBQMD/iwEAwQEAQEEBAMEAdQDAwUEAQEEBQMD2gQDBAQBAQQEAwTaAwMFBAEBBAUDA9oEAwQEAQEEBAME1SssJ0BCJy4tKENBAWoBAQMEBQUGBtv6/gwCAgMEBQUGBwcICAkJCQoCMgoJCQkICAcHBgUFBAMCAvoGBwYLCggHBQEB/qgKCQkJCAgHBwYFBQQDAgIBBgEEBQMDAwMFAwEBAwUDAwMDBQQBfQEEBQMDAwMFAwEBAwUDAwMDBQQBfQEEBQMDAwMFAwEBAwUDAwMDBQQBCUREXF9GRl9cARAGBgUFBAMBAfpe/NQKCQkJCAgHBwYFBQQDAgICAgMEBQUGBwcICAkJCQoCUgEBBQcICgsGBwb6AQECAwQFBQcGBwgICQkJAAAABQAAAAADdwP0AAIAQwCEAI8A0AAAAQc1BxUfDz8OPQEvDg8OBQcVDw4vDz8PHw4DHwczJwURFR8NMyEzPw01ESsBLwg9ASEPDgJefX0BAgQGBwkKCwwNDw8PERESERERDw8PDQwLCgkHBgQDAwQGBwkKCwwNDw8PEREREhERDw8PDQwLCgkHBgQCAXYBAwUHCQoMDQ4QERETFBQUFRQUEhIREA4NDAoJBgUDAgIDBQYJCgwNDhAREhIUFBUUFBQTEREQDg0MCgkHBQNdAQEDBAUFBgbb+v4MAgIDBAUFBgcHCAgJCQkKAjIKCQkJCAgHBwYFBQQDAgL6BgcGCwoIBwUBAf6oCgkJCQgIBwcGBQUEAwICAXNOnU8JCBEREA8ODQwLCgkHBgQDAQEDBAYHCQoLDA0ODxARERESERAQDw4ODAsKCAgFBQIBAQIFBQgICgsMDg4PEBAREgoKFRMTEREQDg0MCgkHBQMBAQMFBwkKDA0OEBERExMVFBUUFBISEQ8PDQwKCAcFAwEBAwUHCAoMDQ8PERISFBQBkQYGBQUEAwEB+l781AoJCQkICAcHBgUFBAMCAgICAwQFBQYHBwgICQkJCgJSAQEFBwgKCwYHBvoBAQIDBAUFBwYHCAgJCQkAAAYAAAAAA3cD9AAZADMATQBmAHEAsgAAATMfAx0BDwMjISMvAz0BPwMzJTMfAx0BDwMrAi8EPwQzNzMfAx0BDwMrAi8EPwQzJR8CMz8CMx8BMz8BMwcjLwIxDwEjJyUfBzMnBREVHw0zITM/DTURKwEvCD0BIQ8OAwoDAwUDAQEDBQMD/gwEAwQEAQEEBAMEAfQDAwUDAQEDBQMDvAMDBQMBAQEBAwUDA7wDAwUDAQEDBQMDvAMDBQMBAQEBAwUDA/7AJwECAQEDKxsnAwEBKR04HycCAQIsHjkBjgEBAwQFBQYG2/r+DAICAwQFBQYHBwgICQkJCgIyCgkJCQgIBwcGBQUEAwIC+gYHBgsKCAcFAQH+qAoJCQkICAcHBgUFBAMCAgElAQMFAwMEAgUEAQEEBQIEAwMFAwF9AQMFAwMEAgUEAQEEBQIEAwMFAwF9AQMFAwMEAgUEAQEEBQIEAwMFAwEBhgMNCAmFhhAHj7J/CAkHibL5BgYFBQQDAQH6XvzUCgkJCQgIBwcGBQUEAwICAgIDBAUFBgcHCAgJCQkKAlIBAQUHCAoLBgcG+gEBAgMEBQUHBgcICAkJCQAAAAAFAAAAAAN3A/QACwAXACMALgBvAAABFSMVMxUjFTMVIzUjFzczBxcjJwcjNycjFSMVMxUjFTMVIzUBHwczJwURFR8NMyEzPw01ESsBLwg9ASEPDgLYWU1NWnuOKCcmOTomKCkmOzkPWU1NWnsBWwEBAwQFBQYG2/r+DAICAwQFBQYHBwgICQkJCgIyCgkJCQgIBwcGBQUEAwIC+gYHBgsKCAcFAQH+qAoJCQkICAcHBgUFBAMCAgHhGzMaOhq8RERdX0VFX10bMxo6GrwBOAYGBQUEAwEB+l781AoJCQkICAcHBgUFBAMCAgICAwQFBQYHBwgICQkJCgJSAQEFBwgKCwYHBvoBAQIDBAUFBwYHCAgJCQkAAAAACAAAAAADdwP0AAQACAAMABEAFQAxADwAfQAAARUzNSMFMzUjFzM1IzMVMzUjBTM1IzUVMzUzFTM1MxUzNTMRIzUjFSM1IxUjNSMVIxElHwczJwURFR8NMyEzPw01ESsBLwg9ASEPDgJ9Pj7+xz8/Xry82z4+/sc/Pz8fvB8/Hx8/H7wfPx8BWAEBAwQFBQYG2/r+DAICAwQFBQYHBwgICQkJCgIyCgkJCQgIBwcGBQUEAwIC+gYHBgsKCAcFAQH+qAoJCQkICAcHBgUFBAMCAgElH15eXj+cPl5eXj4fHz4+Hx/+qCAgPz8gIAFY+gYGBQUEAwEB+l781AoJCQkICAcHBgUFBAMCAgICAwQFBQYHBwgICQkJCgJSAQEFBwgKCwYHBvoBAQIDBAUFBwYHCAgJCQkAAAAABwAAAAADdwP0AAMABwAjAEcAaACpALQAACUzNSM3FSM1NxUjFTMVIxUzFSMVMxUjNSM1MzUjNTM1IzUzNScRHwYzITM/BhEvByEPBiUfBxEPBiEvBhE/BgMRFR8NMyEzPw01ESsBLwg9ASEjDw0FHwczJwHhPj5dfX0+Pj4+Pj4+Pz8/Pz8/2wEBAgIDAwQEAY4EBAMDAgIBAQEBAgIDAwQE/nIEBAMDAgIBAaEFCgkIBwYEAgIEBgcICQr+aAoJCAcGBAICBAYHCAkKqwICAwQFBQYHBwgICQkJCgIyCgkJCQgIBwcGBQUEAwIC+gYHBgsKCAcFAQH+qAoJCQkICAcHBgUFBAMCAgH0AQEDBAUFBgbb+ucfH11d+h8fIB8fHyAgHx8gHx8fDP5yBAQDAwMBAgIBAwMDBAQBjgQDBAMCAgEBAQECAgMEAy8BAgMGBwgJCv5oCgkJBwUEAgIEBQcJCQoBmAoJCAcGBAIBOPzUCgkJCQgIBwcGBQUEAwICAgIDBAUFBgcHCAgJCQkKAlIBAQUHCAoLBgcG+gICAwQFBQYHBwgICQkJhwYGBQUEAgIB+gAAAAAHAAAAAAN3A/QAAgAVADMAOwBDAE4AjwAAATMnFzsBPwU9AS8FKwE3HwwPBxcVIycjFSM1IxcjJyMHIzcjFSMVIzUjNQEfBzMnBREVHw0zITM/DTURKwEvCD0BIQ8OAdw2G4whCAcGBQQDAgICBAUGBwgiIQgODQUFBQQEAwICAgEBAQMEBQYHCCsjJiQhXEciD0kPIkc/OyA6AWgBAQMEBQUGBtv6/gwCAgMEBQUGBwcICAkJCQoCMgoJCQkICAcHBgUFBAMCAvoGBwYLCggHBQEB/qgKCQkJCAgHBwYFBQQDAgIBa04xAgIEBAYGBwcGBQUDAwIbAQEEAwMDBAQFBQUGDQkICAcGBQQETgJISLy8LCy8G6GhGwE4BgYFBQQDAQH6XvzUCgkJCQgIBwcGBQUEAwICAgIDBAUFBgcHCAgJCQkKAlIBAQUHCAoLBgcG+gEBAgMEBQUHBgcICAkJCQAAAAgAAAAAA3cD9AAVADgARABfALYA5gDxATIAABMzPwg1LwgjFw8EHwc/CC8IDwIlFzczBxcjJwcjNychHwsPCyM1BR8GIy8HIw8GFR8HMz8GMw8NIy8KNT8KMx8EJx8GHQEPCSsBLwk9AT8JOwEfARMfBzMnBREVHw0zITM/DTURKwEvCD0BIQ8O5RUMCwUEBAcFAwIBBAUGBAQFBQsdsgIFAwEBAgMEBggECQoKCQQDBwUEAgEBAgQFBwMECQsKCAgBTicoJTg6JikoJjo5/jYMCwsKCQgHBgQDAgEBAQQEBgcICgoLCw02AdwEBAQDAgIDIQEDAwUFBggIBgkIBwYEAwIBAgMFBggICgkIBgYEBAICIQMCAgMEBAUFBQYGBwcPCwoKCQgHBgUEAwIBAQIDBAUGBwkJCgoLDw4GBQa6CAgGBQUDAgIDBAYGBwkJCgoLCwsKCQgIBgUFAwICAwQGBggICQoKCwwKCqUBAQMEBQUGBtv6/gwCAgMEBQUGBwcICAkJCQoCMgoJCQkICAcHBgUFBAMCAvoGBwYLCggHBQEB/qgKCQkJCAgHBwYFBQQDAgIBPwEDAgMECAkMDRkOCwoIAwMCAgIOBQoLDhoNDAoJBgIEAQEDAwMHCQsNDxgNCwoHAwIDAQEDBSJERF1fRUVfXQECBAQHBwgKCgwMDRYMCwsJCQcGBQMCAbwPBAUFBgYHDgkIBwUEAwEBAgQGCAkMDRgODAsJBwUDAQIDBAUGCAkOBgYGBQUFBAMDAgIBAQIEBAYHCAkLCwsNEQ0MDAoKCAcGBQQCAQMCAwQCBgcJCQsMDA4XDQwKCgkHBgUEAgIEBQYHCQoKDAwNGAwMCwoICAYFAwMDAwE8BgYFBQQDAQH6XvzUCgkJCQgIBwcGBQUEAwICAgIDBAUFBgcHCAgJCQkKAlIBAQUHCAoLBgcG+gEBAgMEBQUHBgcICAkJCQAGAAAAAAN3A/QABAAkAEcAbAB3ALgAAAEjNxc/ARUPBi8GPQE/Bh8GJREfByE/BxEvBiMhIw8EJRczHwYRDwchLwcRPwclHwczJwURFR8NMyEzPw01ESsBLwg9ASEPDgJ9+ipTU0kCAwQFBQYGBgYGBAQDAgIDBAQGBgYGBgUFBAMC/qgBAQECAwIDBAF1BAMDAgIBAQEBAQECAgMDBP6LBAMCBQEBAYUFBQkIBwYCBAIBAwQGBwQICv6GCgkIBwYCBAIBAwQGBwQJCQEtAQEDBAUFBgbb+v4MAgIDBAUFBgcHCAgJCQkKAjIKCQkJCAgHBwYFBQQDAgL6BgcGCwoIBwUBAf6oCgkJCQgIBwcGBQUEAwICAQZ1TnU/BwUGBAQDAgEBAgMEBAYFBwYGBQUEAwEBAQEDBAUFBkf+qgQDAgMCAQEBAQEBAgMCAwQBVgMEAgMCAQEBAQUDAy0BAwQGBwQJCf6lCgkIBwYCBAIBAwQGBwQJCQFbCgkIBwYCBAG8BgYFBQQDAQH6XvzUCgkJCQgIBwcGBQUEAwICAgIDBAUFBgcHCAgJCQkKAlIBAQUHCAoLBgcG+gEBAgMEBQUHBgcICAkJCQAHAAAAAAN3A/QAAwAHAAsADwAzAD4AfwAAATM1IzsBNSMHMzUjOwE1IycVMzUzFTM1MxUjFTMVIxUzFSM1IxUjNSMVIzUzNSM1MzUjNSUfBzMnBREVHw0zITM/DTURKwEvCD0BIQ8OAeE+Pj4/P30/Pz8+Pj8/Pj8+Pj4+Pj4/Pj8+Pj4+PgEZAQEDBAUFBgbb+v4MAgIDBAUFBgcHCAgJCQkKAjIKCQkJCAgHBwYFBQQDAgL6BgcGCwoIBwUBAf6oCgkJCQgIBwcGBQUEAwICASU/Pj4+Pz4+Pj4+Pj8+Pz4+Pj4+Pj8+Pz76BgYFBQQDAQH6XvzUCgkJCQgIBwcGBQUEAwICAgIDBAUFBgcHCAgJCQkKAlIBAQUHCAoLBgcG+gEBAgMEBQUHBgcICAkJCQAAAA0AAAAAA3cD9AARACMANgBJAFMAVwCnALkAywDdAPAA+wE8AAAlDwc1PwcHFS8HNx8GJQ8IJz8HIR8IBy8HJRUjFTMVIxUjNSMVIzUHHwQjLwYrAQ8GFR8HMz8CNSM1MxUPBy8LNT8OHwIFIy8HNx8GJQ8HIz8HJQcvBzUfBicjDwcnPwgfBzMnBREVHw0zITM/DTURKwEvCD0BIQ8OAqYQEBITFBQVFRISEhARDw8NoBUVFBQTEhAQFA4PDxAREhIBGwEBBAYHCQoMDRULCgkIBgUEAv5GAQEEBQYICQoLFQ0MCgkHBgQCAaJOREQdJB01AwQGBAIcAgIDBAUGBgcFCQcHBQQCAgECBAUGBwkKCgkHBSI/BQUHCAgJCQoLCQkJBwcGBQQDAQEBAgICAwQEBQUGBgcHBwgNDAsBPB4CAwUGCAkKCxUNDAoJBwYE/mILCgkIBgUEAh0CBAYHCQoMDQFhFQ0PDxAREhISFRUUFBMSEKUJCRISERAPDw0VEBASExQUFRWMAQEDBAUFBgbb+v4MAgIDBAUFBgcHCAgJCQkKAjIKCQkJCAgHBwYFBQQDAgL6BgcGCwoIBwUBAf6oCgkJCQgIBwcGBQUEAwICyA0MCgkHBgQCHgIDBQYICQoLNx0CBAYHCQoMDRUMCggIBgUEzAsKFRQUExIQEBUNDw8QERISEgkJEhIREA8PDRUQEBITFBQVFU8XMhdHp6eoDAQECQsMBwYFBQMCAgIDBQgICwwTDQsKCAcFAgECAwUhFkEFBQQEAgIBAQECAwQFBwcICgoKDBYJCAgHBwYFBQUDAwMBAQEBAwQsEhISEBEPDw0VEBERExQUFW0NDw8REBISEhUVFBQTEREQFRULCgkIBgUDAx0CBAYHCQoMFAIDBQYICQoLFQ0MCgkHBgQCnAYGBQUEAwEB+l781AoJCQkICAcHBgUFBAMCAgICAwQFBQYHBwgICQkJCgJSAQEFBwgKCwYHBvoBAQIDBAUFBwYHCAgJCQkAAAAABwAAAAADdwP0ABUALAA3AE0AuQDEAQUAAAEPBhUfBj8GHwQ7AT8FNS8GBycPAT8DLwQxDwQdAR8CPwI1LwUfAhUPAh8DPwIfCh0BDwsjLwUPDC8JPw4vBT8JMx8GNx8HMycFERUfDTMhMz8NNRErAS8IPQEhDw4BgQsVDgYEAwECAQMDAwQDBAQDBQca5AkUCAkEBAUFBQQCAgEBAwMEBhEKEZsNDxoZGRgQEBAPHAUFBAIBAw8OCAMBAQICAgcHMgIBAQISFRYXGBYVFgsLDQoIBwUDAwEBAQIDAwMEBQUFBgUGBgkICAcNMDIfICERHAcFBQYHCAgIBwcHBgUFAwMBAQIFBwgJCQlGCwoKCAgHFhUEAgMBAQMFAwQFBQYFBwoICAgHBwUEeQEBAwQFBQYG2/r+DAICAwQFBQYHBwgICQkJCgIyCgkJCQgIBwcGBQUEAwIC+gYHBgsKCAcFAQH+qAoJCQkICAcHBgUFBAMCAgElBAgIBAQFBQMFAwMDAgEBAQEBBAouPAcTBwUCAgMEBQQFBQMEAgICAgEBPiQiCAYGBRESEhOZAgIEBAUFBQkZFR8MDAYFBAMDBAIGCQgJCQhDGxoZGAQDAQEBAgQFBQYFBgYGBgUGBgUFBQUEBAMCAgEBAgMECiwJCAkLHzELBQQEAwIBAQEDBAQGBgcKCgkJCQcHBgUEGxcXGBgXGSEhCgUKCwoKCQUEAwQDAgEBAgMFBQYHvQYGBQUEAwEB+l781AoJCQkICAcHBgUFBAMCAgICAwQFBQYHBwgICQkJCgJSAQEFBwgKCwYHBvoBAQIDBAUFBwYHCAgJCQkABQAAAAADdwP0AAcAEwAbACYAZwAAARUjFSM1IzUjFzczBxcjJwcjNycjFSMVIzUjNQEfBzMnBREVHw0zITM/DhErAS8JNSEjDw0C8DogOoEoJyY5OiYoKSY6OAw7IDoBaAEBAwQFBQYG2/r+DAICAwQFBQYHBwgICQkJCgIyCgkJCQgIBwYHBQUEAwIBAfoGBwYLCggHBQEBAf6pCgkJCQgIBwcGBQUEAwICAeEboaEbRERdX0VFX10boaEbATgGBgUFBAMBAfpe/NQKCQkJCAgHBwYFBQQDAgICAgMEBQUGBwcICAkJCQoCUgEBBQcICgsGBwb6AgIDBAUFBgcHCAgJCQkAAAAABwAAAAADdwP0ABIAHgA+AGcAuwDGAQcAAAEzPwY9AS8FKwElFSMVMxUjFTMVIzUjFzMfCxUPCyMVIzUjFQ8KLwkzFR8FOwE/BT0BBR8FIy8GKwEPBh0BHwczPwI1IzUzFQ8GKwEvCjU/DTsBHwMDHwczJwURFR8NMyEzPw01ESsBLwg9ASEjDw0BdycJBwYFBAMCAgMEBQYHCCgBAllNTVp7YQgHDgYFBgQFAwQCAgIBAQICAgMEBAUFBg0OLyAlAQICAgMDBAkLCw4NDQoFCAMDAgMBIQEDAwQFBgYHBQUEBAICAf0EBAQDBAMgAgIEBAYGBwgGCQkHBQUCAgMEBQcEBQkLDAkIBydHBgYICAkKCwsLCwoKCAgGBgQDAgEBAgIDAwUEBgYGBwcICAkIDgwGBYwBAQMEBQUGBtv6/gwCAgMEBQUGBwcICAkJCQoCMgoJCQkICAcHBgUFBAMCAvoGBwYLCggHBQEB/qgKCQkJCAgHBwYFBQQDAgIBhQEBAwMFBQcHBwYGBQQDAhsbMxo6GrwBAwMDAwQEBAUGBQYGDgYGBgUEBQQDBAIEAka8hAYMBgUFBAUGBQMBAQIFAwcFBAULDQcGBgQDAgICAwMFBgYHhA0EBQUFDA4IBwYFAwMCAgQGCAoLDhUPDAsJCAMCAwEDAwUlGEcHBQUEAwIBAgQEBgcJCQoLDA0ZCgkJCAcHBgYFBAMDAgECBAIEAUIGBgUFBAMBAfpe/NQKCQkJCAgHBwYFBQQDAgICAgMEBQUGBwcICAkJCQoCUgEBBQcICgsGBwb6AgIDBAUFBgcHCAgJCQkAAAUAAAAAA3cD9AAFABEAggCNAM4AAAEVMxUjNSMXNzMHFyMnByM3JwUfBhUjLwYrAQ8FHQEfDRUPCiMvCjMVHwU7AT8GLw89AT8JMx8BAx8HMycFERUfDTMhMz8NNRErAS8IPQEhDw4B6lV2jignJjk6JigpJjs5AaMHBwYEBAMCIAECAgUFBgcIBwcGBQQCAgIDBA0mCAgGBQUDAwIBAQECAwMEBAoLDQ8JCgkJCAcGBQUDAQEhAgQEBgcICQgHBgUEAgIBAQICBAMJKAgIBgUEBAMCAQEBAgMDCAoLDQ4KCQg0AQEDBAUFBgbb+v4MAgIDBAUFBgcHCAgJCQkKAjIKCQkJCAgHBwYFBQQDAgL6BgcGCwoIBwUBAf6oCgkJCQgIBwcGBQUEAwICAeGiGrxERF1fRUVfXQUEBQUGBwgHCAcGBQUEAgIBAwIEBQUFBQUEBAcNBAQEBQUFBgYGBwsFBQUEBAMHBAIBAgIDBAUGBgcHCAkIBgYFBAICAQIDBAQFBgUGBAQBBQ4EBAUEBQUFBgYGBgUFBQUECAYFAgECAgE6BgYFBQQDAQH6XvzUCgkJCQgIBwcGBQUEAwICAgIDBAUFBgcHCAgJCQkKAlIBAQUHCAoLBgcG+gEBAgMEBQUHBgcICAkJCQAAAAQAAAAAA3cD9AADAGIAbQCuAAABFTc1Nx8CFREVDwkjLwk9AT8KOwEXNQcVDwkrAS8IPQE/CjsBFz0BPwU7ARcnHwczJwURFR8NMyEzPw01ESsBLwg9ASEPDgGvxx8DAgICAwQICQsMCAkICQkJCAcHBgQEAgECAQMDCAkLDAgJCAkICcMCAwQICQsMCAkICQkJCAcHBgQEAgECAgIEBwkLDAgJCAkJCAEEBQMD6wQDBxUBAQMEBQUGBtv6/gwCAgMEBQUGBwcICAkJCQoCMgoJCQkICAcHBgUFBAMCAvoGBwYLCggHBQEB/qgKCQkJCAgHBwYFBQQDAgIB7CQoJCYDBAUE/tIICQgICwkHBwMCAgEBAwQFBgYIBQcGBgYHBgYKCQgGAwMBAp0n1QkJCQoJCAYDAgICAwQFBQcHBgYHBgYGBwYKCQgGAwICAvgEAwYFAgEvAt0GBgUFBAMBAfpe/NQKCQkJCAgHBwYFBQQDAgICAgMEBQUGBwcICAkJCQoCUgEBBQcICgsGBwb6AQECAwQFBQcGBwgICQkJAAAAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQANAAEAAQAAAAAAAgAHAA4AAQAAAAAAAwANABUAAQAAAAAABAANACIAAQAAAAAABQALAC8AAQAAAAAABgANADoAAQAAAAAACgAsAEcAAQAAAAAACwASAHMAAwABBAkAAAACAIUAAwABBAkAAQAaAIcAAwABBAkAAgAOAKEAAwABBAkAAwAaAK8AAwABBAkABAAaAMkAAwABBAkABQAWAOMAAwABBAkABgAaAPkAAwABBAkACgBYARMAAwABBAkACwAkAWsgRmlsZVR5cGVfRm9udFJlZ3VsYXJGaWxlVHlwZV9Gb250RmlsZVR5cGVfRm9udFZlcnNpb24gMS4wRmlsZVR5cGVfRm9udEZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAARgBpAGwAZQBUAHkAcABlAF8ARgBvAG4AdABSAGUAZwB1AGwAYQByAEYAaQBsAGUAVAB5AHAAZQBfAEYAbwBuAHQARgBpAGwAZQBUAHkAcABlAF8ARgBvAG4AdABWAGUAcgBzAGkAbwBuACAAMQAuADAARgBpAGwAZQBUAHkAcABlAF8ARgBvAG4AdABGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAASAQIBAwEEAQUBBgEHAQgBCQEKAQsBDAENAQ4BDwEQAREBEgETAANCTVAEWExTWANBVkkDRE9DA0VYRQNNUDQDWklQA1RBUgRET0NYA0pQRwNQTkcDR0lGA1BERgNUWFQESlBFRwNYTFMDTVAzAAA=) format('truetype');
font-weight: normal;
font-style: normal;
}
[class^="sf-icon-"], [class*=" sf-icon-"] {
font-family: 'FileType_Font' !important;
speak: none;
font-size: 35px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: relative;
top: 8px;
}Output be like the below.
Custom template
You can design the own template by preventing the default file list including buttons. The showFileList property is used to display whether the default file list or own file list when you use custom template to upload or remove the files, pass the custom UI argument as true to call upload/remove public method as follows:
-
UploaderObj.
upload(filesData, true); -
UploaderObj.
remove(filesData, true);
Refer to the following code sample.
@{
var asyncSettings = new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = "https://services.syncfusion.com/aspnet/production/api/FileUploader/Save", RemoveUrl = "https://services.syncfusion.com/aspnet/production/api/FileUploader/Remove" };
}
<div class="col-lg-8 control-section">
<div class="control_wrapper">
<div id='dropArea'>
<span id='drop' class="droparea"> Drop files here or <a href="" id='browse'><u>Browse</u></a> </span>
<ejs-uploader id="fileUpload" asyncSettings="@asyncSettings" selected="onFileSelect" success="onUploadSuccess" failure="onUploadFailed" progress="onFileUpload" autoUpload="false"></ejs-uploader>
</div>
<div style="margin-left: 50px; padding-top:25px;">
<ejs-button id="clearbtn" content="Clear All"></ejs-button>
</div>
</div>
</div>
<script>
var dropElement = document.getElementsByClassName('control-fluid')[0];
var filesDetails = [];
document.getElementById('browse').onclick = function () {
document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click();
return false;
};
document.getElementById('clearbtn').onclick = function () {
var uploadObj = document.getElementById("fileUpload")
uploadObj.ej2_instances[0].element.value = '';
ej.base.detach(document.getElementById('dropArea').querySelector('.upload-list-root'));
uploadObj.ej2_instances[0].filesData = [];
uploadObj.ej2_instances[0].fileList = [];
};
var parentElement; var proxy; var progressbarContainer;
function onFileSelect(args) {
if (ej.base.isNullOrUndefined(document.getElementById('dropArea').querySelector('.upload-list-root'))) {
parentElement = ej.base.createElement('div', { className: 'upload-list-root' });
parentElement.appendChild(ej.base.createElement('ul', { className: 'ul-element' }));
document.getElementById('dropArea').appendChild(parentElement);
}
for (var i = 0; i < args.filesData.length; i++) {
formSelectedData(args.filesData[i], this); // create the LI element for each file Data
}
this.filesData = this.filesData.concat(args.filesData);
this.upload(args.filesData, true);
args.cancel = true;
}
function formSelectedData(selectedFiles, proxy) {
var liEle = ej.base.createElement('li', { className: 'file-lists', attrs: { 'data-file-name': selectedFiles.name } });
liEle.appendChild(ej.base.createElement('span', { className: 'file-name ', innerHTML: selectedFiles.name }));
liEle.appendChild(ej.base.createElement('span', { className: 'file-size ', innerHTML: proxy.bytesToSize(selectedFiles.size) }));
if (selectedFiles.status === proxy.localizedTexts('readyToUploadMessage')) {
progressbarContainer = ej.base.createElement('span', { className: 'progress-bar-container' });
progressbarContainer.appendChild(ej.base.createElement('progress', { className: 'progress', attrs: { value: '0', max: '100' } }));
liEle.appendChild(progressbarContainer);
}
else {
liEle.querySelector('.file-name').classList.add('upload-fails');
}
var closeIconContainer = ej.base.createElement('span', { className: 'e-icons close-icon-container' });
ej.base.EventHandler.add(closeIconContainer, 'click', removeFiles, proxy);
liEle.appendChild(closeIconContainer);
document.querySelector('.ul-element').appendChild(liEle);
proxy.fileList.push(liEle);
}
function onFileUpload(args) {
var li = document.getElementById('dropArea').querySelector('[data-file-name="' + args.file.name + '"]');
ej.base.EventHandler.remove(li.querySelector('.close-icon-container'), 'click', removeFiles);
var progressValue = Math.round((args.e.loaded / args.e.total) * 100);
if (!isNaN(progressValue)) {
li.getElementsByTagName('progress')[0].value = progressValue; // Updating the progress bar value
}
}
function onUploadSuccess(args) {
var _this = this;
var spinnerElement = document.getElementById('dropArea');
var li = document.getElementById('dropArea').querySelector('[data-file-name="' + args.file.name + '"]');
if (!ej.base.isNullOrUndefined(li.querySelector('.progress-bar-container'))) {
ej.base.detach(li.querySelector('.progress-bar-container'));
}
if (args.operation === 'upload') {
li.querySelector('.file-name').classList.add('upload-success');
li.querySelector('.close-icon-container').classList.add('delete-icon');
(li.querySelector('.close-icon-container')).onclick = function () {
generateSpinner(_this.uploadWrapper);
};
li.querySelector('.close-icon-container').onkeydown = function (e) {
if (e.keyCode === 13) {
generateSpinner(e.target.closest('.e-upload'));
}
};
}
if (args.operation === 'remove') {
this.fileList.splice(this.fileList.indexOf(li), 1);
this.filesData.splice(this.fileList.indexOf(li), 1);
ej.base.detach(li);
ej.popups.hideSpinner(spinnerElement);
ej.base.detach(spinnerElement.querySelector('.e-spinner-pane'));
}
ej.base.EventHandler.add(li.querySelector('.close-icon-container'), 'click', removeFiles, this);
}
function generateSpinner(targetElement) {
ej.popups.createSpinner({ target: targetElement, width: '25px' });
ej.popups.showSpinner(targetElement);
}
function onUploadFailed(args) {
var li = document.getElementById('dropArea').querySelector('[data-file-name="' + args.file.name + '"]');
ej.base.EventHandler.add(li.querySelector('.close-icon-container'), 'click', removeFiles, this);
li.querySelector('.file-name ').classList.add('upload-fails');
if (args.operation === 'upload') {
ej.base.detach(li.querySelector('.progress-bar-container'));
}
}
function removeFiles(args) {
var status = this.filesData[this.fileList.indexOf(args.currentTarget.parentElement)].status;
if (status === this.localizedTexts('uploadSuccessMessage')) {
this.remove(this.filesData[this.fileList.indexOf(args.currentTarget.parentElement)]);
this.filesData.splice(this.fileList.indexOf(args.currentTarget.parentElement), 1);
}
else {
ej.base.detach(args.currentTarget.parentElement);
}
}
</script>#dropArea {
min-height: 50px;
padding-top: 15px;
position: relative;
}
#drop {
padding: 3% 30% 3%;
display: inherit;
border: 1px dashed #c3c3cc
}
.droparea {
font-size: 13px;
}
.e-bigger .droparea {
font-size: 14px;
}
.control_wrapper {
max-width: 400px;
margin: auto;
}
.e-file-select-wrap {
display: none;
}
.e-upload {
float: none;
border: none;
}
.ul-element {
list-style: none;
width: 100%;
padding-left: 0;
}
.file-name {
padding: 8px 6px 8px 0;
font-size: 13px;
width: 46%;
display: inline-block;
position: relative;
top: 4px;
}
.e-bigger .file-name {
font-size: 14px;
}
.file-size {
padding: 4px;
font-size: 13px;
width: 18%;
display: inline-block;
position: relative;
}
.e-bigger .file-size {
font-size: 14px;
}
.file-lists {
border: 1px solid lightgray;
padding: 0 6px 0 14px;
margin-top: 15px;
position: relative;
background: #d0cdcd;
}
.file-size, .file-name {
font-family: "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.progress-bar-container {
display: block;
float: right;
height: 20px;
right: 13%;
top: 14px;
position: relative;
width: 20%;
}
.progress{
width: 100%;
height: 15px;
-webkit-appearance: none;
-moz-appearance: none;
}
.close-icon-container
{
cursor: pointer;
font-size: 11px;
height: 24px;
margin: 0 12px 0 22px;
padding: 0;
position: absolute;
right: 0;
width: 24px;
top: 6px;
}
.close-icon-container::before {
left: 7px;
position: inherit;
top: 7px;
content: '\e932';
}
.delete-icon::before {
content: '\e94a';
}
.close-icon-container:hover {
background-color: #d0cdcd;
border-color: transparent;
border-radius: 50%;
box-shadow: 0 0 0 transparent;
}
.highcontrast .close-icon-container:hover {
background-color: #ffd939;
}
.highcontrast .close-icon-container {
color: #ffffff;
}
.upload-success {
color: #2bc700;
}
.upload-fails {
color: #f44336;
}
progress::-webkit-progress-bar {
border: 1px solid lightgrey;
background-color: #ffffff;
border-radius: 2px;
}
#dropArea progress {
border: 1px solid lightgrey;
background-color: #ffffff;
border-radius: 2px;
}
.highcontrast #dropArea progress {
border: none;
background-color: #000000;
}
.highcontrast progress::-webkit-progress-bar {
border: none;
background-color: #000000;
}
.material progress::-webkit-progress-value {
border-radius: 2px;
background-color: #ff4081;
}
.bootstrap progress::-webkit-progress-value {
border-radius: 2px;
background-color: #1f496e;
}
.fabric progress::-webkit-progress-value {
background-color: #1763ff;
border-radius: 2px;
top: -66px;
}
.highcontrast progress::-webkit-progress-value {
background-color: #ffd939;
border-radius: 2px;
}
.material progress::-moz-progress-bar {
border-radius: 2px;
background-color: #ff4081;
}
.bootstrap progress::-moz-progress-bar {
border-radius: 2px;
background-color: #1f496e;
}
.fabric progress::-moz-progress-bar {
background-color: #1763ff;
border-radius: 2px;
top: -66px;
}
.highcontrast progress::-moz-progress-bar {
background-color: #ffd939;
border-radius: 2px;
}Output be like the below.
