Search results

Template

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.

tagHelper
index.css
@{
    var asyncSettings = new Syncfusion.EJ2.Uploader.UploaderAsyncSettings { SaveUrl = "https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save", RemoveUrl = "https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove" };
}

@section ControlsSection{
    <div id='dropArea'>
        <span id='drop' class="droparea"> Drop files here or <a href="" id='browse'><u>Browse</u></a> </span>
        <ejs-uploader 
        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>",
        id="UploadFiles" 
        asyncSettings="@asyncSettings" 
        progress="onFileUpload"
        selected="onSelect"
        success="onuploadSuccess"
        failure="onuploadFailed"></ejs-uploader>
    </div>
    <div style='margin-left: 50px; padding-top:25px;'>
        <button class="e-btn e-css" id="clearbtn">Clear All</button>
    </div>  
}

<script>
    
    document.getElementById('browse').onclick = function () {
        document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click();
        return false;
    };
    function onFileUpload(args: any) {
        let li: HTMLElement = this.uploadWrapper.querySelector('[data-file-name="' + args.file.name + '"]');
        let progressValue: number = 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: any) {
        if (args.operation === 'remove') {
            let height: string = document.getElementById('dropArea').style.height;
            height = (parseInt(height) - 40) + 'px';
            document.getElementById('dropArea').style.height = height;
        } else {
            let li: HTMLElement = this.uploadWrapper.querySelector('[data-file-name="' + args.file.name + '"]');
            let progressBar: HTMLElement = li.getElementsByTagName('progress')[0];
            progressBar.classList.add('e-upload-success');
            li.getElementsByClassName('percent')[0].classList.add('e-upload-success');
            let height: string = document.getElementById('dropArea').style.height;
            document.getElementById('dropArea').style.height = parseInt(height) - 15 + 'px';
        }
    }
    function onuploadFailed(args: any) {
        let li: HTMLElement = this.uploadWrapper.querySelector('[data-file-name="' + args.file.name + '"]');
        let progressBar: HTMLElement = li.getElementsByTagName('progress')[0];
        progressBar.classList.add('e-upload-failed');
        li.getElementsByClassName('percent')[0].classList.add('e-upload-failed');
    }
    function onSelect(args: SelectedEventArgs) {
        let length: number = args.filesData.length;
        let height: string = document.getElementById('dropArea').style.height;
        height = parseInt(height) + (length * 55) + 'px';
        document.getElementById('dropArea').style.height = height;
    }
</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: #000000;
    }

    .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;
    }

    .e-icons::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.

uploader

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.

tagHelper
index.css
@{
    var asyncSettings = new Syncfusion.EJ2.Uploader.UploaderAsyncSettings { SaveUrl = "https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save", RemoveUrl = "https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove" };
}

@section ControlsSection{
    <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>
                <ej-uploader id="fileUpload" asyncSettings="@asyncSettings" selected="onFileSelect" success="onUploadSuccess" failure="onUploadFailed" progress="onFileUpload" autoUpload="false"></ej-uploader>
            </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.

uploader

See Also