Search results

Template in JavaScript (ES5) Uploader control

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.

Source
Preview
index.js
index.html
index.css
ej.base.enableRipple(true);
    var dropElement = document.getElementsByClassName('control-fluid')[0];
    var filesDetails = [];
    var filesList = [];
    var uploadObj = new ej.inputs.Uploader({
        asyncSettings: {
            saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',
            removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'
        }, dropArea: dropElement, selected: onFileSelect, progress: onFileUpload, success: onUploadSuccess,
        failure: onUploadFailed, removing: onFileRemove,
    });
    uploadObj.appendTo('#fileupload');
    document.getElementById('browse').onclick = function () {
        document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click();
        return false;
    };
    document.getElementById('clearbtn').onclick = function () {
        uploadObj.element.value = '';
        ej.base.detach(document.getElementById('dropArea').querySelector('.upload-list-root'));
        filesDetails = [];
        filesList = [];
    };
    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);
        }
        filesDetails = filesDetails.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.statusCode === '1') {
            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);
        filesList.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;
        }
    }
    function onUploadSuccess(args) {
        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');
        }
        if (args.operation === 'remove') {
            filesList.splice(this.fileList.indexOf(li), 1);
            filesDetails.splice(this.fileList.indexOf(li), 1);
        }
        ej.base.EventHandler.add(li.querySelector('.close-icon-container'), 'click', removeFiles, this);
    }
    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) {
        if (!ej.base.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) {
        if (!ej.base.isNullOrUndefined(args.currentTarget)) {
            if (filesDetails[filesList.indexOf(args.currentTarget.parentElement)].statusCode !== '2') {
                ej.base.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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
    
    <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>

<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</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.

Source
Preview
index.js
index.html
index.css
ej.base.enableRipple(true);
    var dropElement = document.getElementsByClassName('control-fluid')[0];
    var filesDetails = [];
    var filesList = [];
    var uploadObj = new ej.inputs.Uploader({
        asyncSettings: {
            saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',
            removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'
        }, dropArea: dropElement, selected: onFileSelect, progress: onFileUpload, success: onUploadSuccess,
        failure: onUploadFailed, removing: onFileRemove,
    });
    uploadObj.appendTo('#fileupload');
    document.getElementById('browse').onclick = function () {
        document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click();
        return false;
    };
    document.getElementById('clearbtn').onclick = function () {
        uploadObj.element.value = '';
        ej.base.detach(document.getElementById('dropArea').querySelector('.upload-list-root'));
        filesDetails = [];
        filesList = [];
    };
    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);
        }
        filesDetails = filesDetails.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.statusCode === '1') {
            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);
        filesList.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;
        }
    }
    function onUploadSuccess(args) {
        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');
        }
        if (args.operation === 'remove') {
            filesList.splice(this.fileList.indexOf(li), 1);
            filesDetails.splice(this.fileList.indexOf(li), 1);
        }
        ej.base.EventHandler.add(li.querySelector('.close-icon-container'), 'click', removeFiles, this);
    }
    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) {
        if (!ej.base.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) {
        if (!ej.base.isNullOrUndefined(args.currentTarget)) {
            if (filesDetails[filesList.indexOf(args.currentTarget.parentElement)].statusCode !== '2') {
                ej.base.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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
    
    <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>

<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</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 */

See Also