Template in EJ2 TypeScript Uploader control

15 May 202324 minutes to read

You can customize the default appearance of 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 default UI elements.

import { Uploader, FileInfo, SelectedEventArgs } from '@syncfusion/ej2-inputs';
import { Event, detach } from '@syncfusion/ej2-base';

let uploadObj: Uploader = new Uploader({
    asyncSettings: {
      saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Save',
      removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Remove'
    },
    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>",
    dropArea: document.getElementById('dropArea'),
    progress: onFileUpload,
    selected: onSelect,
    success: onuploadSuccess,
    failure: onuploadFailed
});
uploadObj.appendTo('#fileupload');

document.getElementById('browse').onclick = function() {
    document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click();
    return false;
}
document.getElementById('clearbtn').onclick = () => {
        uploadObj.element.value = '';
        detach(document.getElementById('dropArea').querySelector('.e-upload-files'));
    };
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;
}
document.getElementById('dropArea')!.onclick = (e: any) => {
    let target: HTMLElement = <HTMLElement>e.target;
    if (target.classList.contains('e-file-delete-btn')) {
      for (let i: number = 0; i < uploadObj.getFilesData().length; i++) {
        if (
          (target.closest('li') as HTMLLIElement).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') as HTMLLIElement);
    }
  };
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Uploader</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 Uploader Component" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id="container">
        <div id="dropArea">
            <span id="drop" class="droparea"> Drop files here or <a href="" id="browse"><u>Browse</u></a> </span>
            <input type="file" id="fileupload">
        </div>
        <div style="margin-left: 50px; padding-top:25px;">
            <button class="e-btn e-css" id="clearbtn">Clear All</button>
        </div>
    </div>
</body>
</html>
#container {
  visibility: hidden;
  margin: 0 auto;
  width: 400px;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.control_wrapper {
  max-width: 500px;
  margin: auto;
}
.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;
}

/* csslint ignore:end */

Custom template

You can design the own template by preventing the default file list including buttons. The showFileList property 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.

import { enableRipple } from '@syncfusion/ej2-base';
import { Uploader, FileInfo } from '@syncfusion/ej2-inputs';
import { createElement, isNullOrUndefined, detach, EventHandler } from '@syncfusion/ej2-base';

    enableRipple(true);
    let dropElement: HTMLElement = document.querySelector('.control_wrapper') as HTMLElement; let filesDetails : FileInfo[] = [];
    let filesList: HTMLElement[] = [];
    let uploadObj: Uploader = new Uploader({
        asyncSettings: {
            saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Save',
            removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Remove'
        }, dropArea: dropElement, selected: onFileSelect, progress: onFileUpload, success: onUploadSuccess,
        failure: onUploadFailed, removing: onFileRemove,
    });
    uploadObj.appendTo('#fileupload');
    document.getElementById('browse').onclick = () => {
        document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click(); return false;
    };
    document.getElementById('clearbtn').onclick = () => {
        uploadObj.element.value = '';
        detach(document.getElementById('dropArea').querySelector('.upload-list-root')); filesDetails = []; filesList = [];
    };
    let parentElement : HTMLElement; let proxy : any; let progressbarContainer : HTMLElement;
    function onFileSelect(args : any) : void  {
        if (isNullOrUndefined(document.getElementById('dropArea').querySelector('.upload-list-root'))) {
            parentElement = createElement('div', { className: 'upload-list-root' });
            parentElement.appendChild(createElement('ul', {className: 'ul-element' }));
            document.getElementById('dropArea').appendChild(parentElement);
        }
        for (let i : number = 0; i < args.filesData.length; i++) { formSelectedData(args.filesData[i], this); }
        filesDetails = filesDetails.concat(args.filesData);
        this.upload(args.filesData, true); args.cancel = true;
    }
    function formSelectedData ( selectedFiles : FileInfo, proxy: any ) : void {
        let liEle : HTMLElement = createElement('li',  { className: 'file-lists', attrs: {'data-file-name' : selectedFiles.name} });
        liEle.appendChild(createElement('span', {className: 'file-name ', innerHTML: selectedFiles.name }));
        liEle.appendChild(createElement('span', {className: 'file-size ', innerHTML: proxy.bytesToSize(selectedFiles.size) }));
        if (selectedFiles.statusCode === '1') {
            progressbarContainer = createElement('span', {className: 'progress-bar-container'});
            progressbarContainer.appendChild(createElement('progress', {className: 'progress', attrs: {value : '0', max : '100'}} ));
            liEle.appendChild(progressbarContainer);
        } else { liEle.querySelector('.file-name').classList.add('upload-fails'); }
        let closeIconContainer : HTMLElement = createElement('span', {className: 'e-icons close-icon-container'});
        EventHandler.add(closeIconContainer, 'click', removeFiles, proxy);
        liEle.appendChild(closeIconContainer); document.querySelector('.ul-element').appendChild(liEle);
        filesList.push(liEle);
    }
    function onFileUpload(args : any) : void {
        let li : Element = document.getElementById('dropArea').querySelector('[data-file-name="' + args.file.name + '"]');
        EventHandler.remove(li.querySelector('.close-icon-container'), 'click', removeFiles);
        let progressValue : number = Math.round((args.e.loaded / args.e.total) * 100);
        if (!isNaN(progressValue)) { li.getElementsByTagName('progress')[0].value = progressValue; }
    }
    function onUploadSuccess(args : any) : void {
        let li : Element = document.getElementById('dropArea').querySelector('[data-file-name="' + args.file.name + '"]');
        if (!isNullOrUndefined(li.querySelector('.progress-bar-container'))) {
             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');
        }
        if (args.operation === 'remove') {
            filesList.splice(this.fileList.indexOf(li), 1); filesDetails.splice(this.fileList.indexOf(li), 1);
        }
        EventHandler.add(li.querySelector('.close-icon-container'), 'click', removeFiles, this);
    }
    function onUploadFailed(args : any) : void {
        let li : Element = document.getElementById('dropArea').querySelector('[data-file-name="' + args.file.name + '"]');
        EventHandler.add(li.querySelector('.close-icon-container'), 'click', removeFiles, this);
        li.querySelector('.file-name ').classList.add('upload-fails');
        if (args.operation === 'upload') {detach(li.querySelector('.progress-bar-container')); }
    }
    function removeFiles(args : any) : void {
        if (!isNullOrUndefined(args.currentTarget)) {
            if (filesDetails[filesList.indexOf(args.currentTarget.parentElement)].statusCode === '2' ) {
                this.remove(filesDetails[filesList.indexOf(args.currentTarget.parentElement)]);
                filesDetails.splice(filesList.indexOf(args.currentTarget.parentElement), 1);
            } else  { onFileRemove(args); }
        }
    }
    function onFileRemove(args: any) : void {
        if (!isNullOrUndefined(args.currentTarget)) {
            if (filesDetails[filesList.indexOf(args.currentTarget.parentElement)].statusCode !== '2') {
                detach(args.currentTarget.parentElement); filesList.splice(filesList.indexOf(args.currentTarget.parentElement), 1);
            }
        }
    }
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Uploader</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 Uploader Component" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id="container">
        <div id="dropArea">
            <span id="drop" class="droparea"> Drop files here or <a href="" id="browse"><u>Browse</u></a> </span>
            <input type="file" id="fileupload">
        </div>
        <div style="margin-left: 50px; padding-top:25px;">
            <button class="e-btn e-css" id="clearbtn">Clear All</button>
        </div>
    </div>
</body>
</html>
#container {
  visibility: hidden;
  margin: 0 auto;
  width: 400px;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.control_wrapper {
  max-width: 500px;
  margin: auto;
}
.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;
}

/* csslint ignore:end */

You can also explore JavaScript File Upload feature tour page for its groundbreaking features. You can also explore our JavaScript File Upload example to understand how to browse the files which you want to upload to the server.

See Also