Repository navigation
Expand file tree
/
Copy pathcustom-file-list-stack.json
More file actions
1 lines (1 loc) · 13.1 KB
/
Copy pathcustom-file-list-stack.json
File metadata and controls
1 lines (1 loc) · 13.1 KB
1
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-8 control-section\">\n <div class=\"control_wrapper\">\n <div id=\"dropArea\">\n <span id=\"drop\" class=\"droparea\"> Drop files here or <a href id=\"browse\"><u>Browse</u></a> </span>\n <input type=\"file\" id=\"fileupload\" name=\"UploadFiles\">\n </div> \n </div>\n</div>\n\n<div class=\"col-lg-4 property-section\">\n <div id=\"property\" title=\"Properties\">\n <div style=\"margin-left: 50px; padding-top:25px;\">\n <button class=\"e-btn e-css\" id=\"clearbtn\" title=\"Clear All\">Clear All</button>\n </div>\n </div>\n</div>\n<style>\n\n #dropArea {\n min-height: 50px;\n padding-top: 15px;\n position: relative;\n }\n\n #drop {\n padding: 3% 25% 3%;\n display: inherit;\n border: 1px dashed #c3c3cc\n }\n\n .droparea {\n font-size: 14px;\n } \n\n .e-bigger .droparea {\n font-size: 15px;\n } \n\n .control_wrapper {\n max-width: 400px;\n margin: auto;\n }\n\n .e-file-select-wrap {\n display: none;\n }\n\n .e-upload {\n float: none;\n border: none;\n }\n\n .ul-element {\n list-style: none;\n width: 100%;\n padding-left: 0;\n }\n\n .file-name {\n padding: 8px 6px 8px 0;\n font-size: 13px;\n width: 46%;\n display: inline-block;\n position: relative;\n top: 4px;\n }\n\n .e-bigger .file-name {\n font-size: 14px;\n }\n\n .file-size {\n padding: 4px;\n font-size: 13px;\n width: 18%;\n display: inline-block;\n position: relative;\n }\n\n .e-bigger .file-size {\n font-size: 14px;\n }\n\n .file-lists {\n border: 1px solid lightgray;\n padding: 0 6px 0 14px;\n margin-top: 15px;\n position: relative;\n background: rgba(0, 0, 0, 0.04);\n }\n\n .file-size, .file-name {\n font-family: \"Helvetica Neue\", \"Helvetica\", \"Arial\", \"sans-serif\";\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n }\n\n span.progress-bar-container {\n display: block;\n float: right;\n height: 20px;\n right: 13%;\n top: 14px;\n position: relative;\n width: 20%;\n }\n\n .progress{\n width: 100%;\n height: 15px;\n -webkit-appearance: none;\n }\n\n .close-icon-container\n {\n font-size: 11px;\n height: 24px;\n margin: 0 12px 0 22px;\n padding: 0;\n position: absolute;\n right: 0;\n width: 24px;\n top: 6px;\n }\n .close-icon-container.delete-icon {\n cursor: pointer;\n }\n\n .close-icon-container.e-icons::before {\n left: 7px;\n position: inherit;\n top: 7px;\n content: '\\e932';\n }\n\n .bootstrap4 .close-icon-container.e-icons::before {\n left: 7px;\n position: inherit;\n top: 7px;\n content: '\\e745';\n }\n .bootstrap4 .file-lists {\n background: #fff;\n }\n\n .close-icon-container.delete-icon::before {\n content: '\\e94a';\n }\n\n .bootstrap4 .close-icon-container.delete-icon::before {\n content: '\\e773';\n }\n\n .close-icon-container.delete-icon:hover {\n background-color: rgba(0, 0, 0, 0.12);\n border-color: transparent;\n border-radius: 50%;\n box-shadow: 0 0 0 transparent;\n }\n\n .bootstrap4 .close-icon-container:hover {\n background-color: #e9ecef;\n border-color: transparent;\n border-radius: 4px;\n box-shadow: 0 0 0 transparent;\n }\n\n .highcontrast .close-icon-container.delete-icon:hover {\n background-color: #ffd939;\n color: black;\n }\n\n .highcontrast .close-icon-container {\n color: #ffffff;\n }\n\n .upload-success {\n color: #2bc700;\n }\n\n .upload-fails {\n color: #f44336;\n }\n\n .bootstrap4 #dropArea progress {\n background-color: #dee2e6;\n border-radius: 4px;\n }\n\n progress::-webkit-progress-bar {\n border: 1px solid lightgrey;\n background-color: #ffffff;\n border-radius: 2px;\n }\n .bootstrap4 progress::-webkit-progress-value {\n background-color: #007bff;\n border-radius: 4px; \n }\n #dropArea progress {\n border: 1px solid lightgrey;\n background-color: #ffffff;\n border-radius: 2px;\n }\n .highcontrast #dropArea progress {\n background-color: #000000;\n }\n .highcontrast progress::-webkit-progress-bar {\n background-color: #000000;\n }\n .material progress::-webkit-progress-value {\n border-radius: 2px; \n background-color: #ff4081;\n }\n .bootstrap progress::-webkit-progress-value {\n border-radius: 2px; \n background-color: #1f496e;\n }\n .fabric progress::-webkit-progress-value {\n background-color: #1763ff;\n border-radius: 2px; \n top: -66px;\n }\n .highcontrast progress::-webkit-progress-value {\n background-color: #ffd939;\n border-radius: 2px; \n }\n .material progress::-moz-progress-bar {\n border-radius: 2px; \n background-color: #ff4081;\n }\n .bootstrap progress::-moz-progress-bar {\n border-radius: 2px; \n background-color: #1f496e;\n }\n .fabric progress::-moz-progress-bar {\n background-color: #1763ff;\n border-radius: 2px; \n top: -66px;\n }\n .highcontrast progress::-moz-progress-bar {\n background-color: #ffd939;\n border-radius: 2px; \n }\n .material span a {\n color:#ff4081;\n }\n .fabric span a {\n color: #1763ff;\n }\n .bootstrap span a {\n color: #1f496e;\n }\n .highcontrast span a,\n .highcontrast span a:hover {\n color: #ffd939;\n }\n\n</style>\n\n\n\n</div></body></html>","index.js":"{{ripple}}\n var dropElement = document.getElementsByClassName('control-fluid')[0];\n var uploadObj = new ej.inputs.Uploader({\n asyncSettings: {\n saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',\n removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'\n },\n dropArea: dropElement, selected: onFileSelect,\n progress: onFileUpload, success: onUploadSuccess, removing: onFileRemove, \n failure: onUploadFailed \n });\n uploadObj.appendTo('#fileupload');\n document.getElementById('browse').onclick = function () {\n document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click();\n return false;\n };\n document.getElementById('clearbtn').onclick = function () {\n if (!ej.base.isNullOrUndefined(document.getElementById('dropArea').querySelector('.upload-list-root'))) {\n uploadObj.element.value = '';\n ej.base.detach(document.getElementById('dropArea').querySelector('.upload-list-root'));\n uploadObj.filesData = [];\n uploadObj.fileList = [];\n }\n };\n var parentElement; var proxy; var progressbarContainer;\n function onFileSelect(args) {\n if (ej.base.isNullOrUndefined(document.getElementById('dropArea').querySelector('.upload-list-root'))) {\n parentElement = ej.base.createElement('div', { className: 'upload-list-root' });\n parentElement.appendChild(ej.base.createElement('ul', {className: 'ul-element' }));\n document.getElementById('dropArea').appendChild(parentElement);\n }\n for ( var k = 0; k < args.filesData.length; k++) {\n var fileName = args.filesData[k].name;\n for (var j = 0; j < this.filesData.length; j++) {\n if (this.filesData[j].name === fileName) {\n args.filesData.splice(k, 1);\n --k;\n j = this.filesData.length;\n }\n }\n }\n for (var i = 0; i < args.filesData.length; i++) {\n formSelectedData(args.filesData[i], this); // create the LI element for each file Data\n }\n this.filesData = this.filesData.concat(args.filesData);\n this.upload(args.filesData, true);\n args.cancel = true;\n }\n function formSelectedData(selectedFiles, proxy) {\n var liEle = ej.base.createElement('li', { className: 'file-lists', attrs: { 'data-file-name': selectedFiles.name } });\n liEle.appendChild(ej.base.createElement('span', { className: 'file-name ', innerHTML: selectedFiles.name }));\n liEle.appendChild(ej.base.createElement('span', { className: 'file-size ', innerHTML: proxy.bytesToSize(selectedFiles.size) }));\n if (selectedFiles.status === proxy.localizedTexts('readyToUploadMessage')) {\n progressbarContainer = ej.base.createElement('span', { className: 'progress-bar-container' });\n progressbarContainer.appendChild(ej.base.createElement('progress', { className: 'progress', attrs: { value: '0', max: '100' } }));\n liEle.appendChild(progressbarContainer);\n }\n else {\n liEle.querySelector('.file-name').classList.add('upload-fails');\n }\n var closeIconContainer = ej.base.createElement('span', { className: 'e-icons close-icon-container' });\n ej.base.EventHandler.add(closeIconContainer, 'click', removeFiles, proxy);\n liEle.appendChild(closeIconContainer);\n document.querySelector('.ul-element').appendChild(liEle);\n proxy.fileList.push(liEle);\n }\n function onFileUpload(args) {\n var li = document.getElementById('dropArea').querySelector('[data-file-name=\"' + args.file.name + '\"]');\n ej.base.EventHandler.remove(li.querySelector('.close-icon-container'), 'click', removeFiles);\n var progressValue = Math.round((args.e.loaded / args.e.total) * 100);\n if (!isNaN(progressValue)) {\n li.getElementsByTagName('progress')[0].value = progressValue; // Updating the progress bar value\n }\n }\n function onUploadSuccess(args) {\n var _this = this;\n var spinnerElement = document.getElementById('dropArea');\n var li = document.getElementById('dropArea').querySelector('[data-file-name=\"' + args.file.name + '\"]');\n if (!ej.base.isNullOrUndefined(li.querySelector('.progress-bar-container'))) {\n ej.base.detach(li.querySelector('.progress-bar-container'));\n }\n if (args.operation === 'upload') {\n li.querySelector('.file-name').classList.add('upload-success');\n li.querySelector('.close-icon-container').classList.add('delete-icon');\n (li.querySelector('.close-icon-container')).onclick = function () {\n generateSpinner(_this.uploadWrapper);\n };\n li.querySelector('.close-icon-container').onkeydown = function (e) {\n if (e.keyCode === 13) {\n generateSpinner(e.target.closest('.e-upload'));\n }\n };\n }\n if (args.operation === 'remove') {\n this.filesData.splice(this.fileList.indexOf(li), 1);\n this.fileList.splice(this.fileList.indexOf(li), 1);\n ej.base.detach(li);\n ej.popups.hideSpinner(spinnerElement);\n ej.base.detach(spinnerElement.querySelector('.e-spinner-pane'));\n }\n ej.base.EventHandler.add(li.querySelector('.close-icon-container'), 'click', removeFiles, this);\n }\n function generateSpinner(targetElement) {\n ej.popups.createSpinner({ target: targetElement, width: '25px' });\n ej.popups.showSpinner(targetElement);\n }\n function onUploadFailed(args) {\n var li = document.getElementById('dropArea').querySelector('[data-file-name=\"' + args.file.name + '\"]');\n ej.base.EventHandler.add(li.querySelector('.close-icon-container'), 'click', removeFiles, this);\n li.querySelector('.file-name ').classList.add('upload-fails');\n if (args.operation === 'upload') {\n ej.base.detach(li.querySelector('.progress-bar-container'));\n }\n }\n function onFileRemove(args) {\n args.postRawFile = false;\n }\n function removeFiles(args) {\n var status = this.filesData[this.fileList.indexOf(args.currentTarget.parentElement)].status;\n if (status === this.localizedTexts('uploadSuccessMessage')) {\n this.remove(this.filesData[this.fileList.indexOf(args.currentTarget.parentElement)]);\n }\n else {\n ej.base.detach(args.currentTarget.parentElement);\n }\n }\n"}