Template in ASP.NET CORE File Upload

27 Aug 202624 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 an HTML element or string. The selected or dropped files are displayed as per the template layout provided. The remove and progress bar actions are handled using the corresponding events when the template is defined.

For example, you can display a 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,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) 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;
}
  • The template defines the custom layout for each file in the list, including the file type icon, file name, file size, remove button, and progress bar.
  • The progress event updates the progress bar value and percentage text during upload.
  • The success event marks the file as uploaded successfully and adjusts the drop area height.
  • The failure event marks the file as failed to upload.
  • The selected event resizes the drop area based on the number of files selected.

The output will be as shown below.

uploader

Custom template

You can design your own template by hiding the default file list, including its buttons. The showFileList property is used to determine whether to display the default file list or your own file list. When you use a custom template to upload or remove files, pass the custom UI argument as true to call the upload/remove public methods, 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; 
    }

Key points:

  • The showFileList property is set to false to hide the default file list and use a custom template instead.
  • The selected event creates a custom list item (<li>) for each selected file, including the file name, size, progress bar, and remove icon.
  • The progress event updates the progress bar value during upload.
  • The success event marks the file as uploaded successfully and updates the remove icon to a delete icon.
  • The failure event marks the file as failed to upload.
  • The removeFiles function handles the remove action when the close icon is clicked.

The output will be as shown below.

uploader

See also