This repository was archived by the owner on Jul 30, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathcustom-file-list-plnkr.json
More file actions
1 lines (1 loc) · 32.9 KB
/
custom-file-list-plnkr.json
File metadata and controls
1 lines (1 loc) · 32.9 KB
1
{"index.css":".dropArea {\r\n min-height: 50px;\r\n padding-top: 15px;\r\n position: relative;\r\n}\r\n\r\n.drop {\r\n padding: 3% 30% 3%;\r\n display: inherit;\r\n border: 1px dashed #c3c3cc;\r\n}\r\n\r\n.template_wrapper {\r\n max-width: 400px;\r\n margin: auto;\r\n}\r\n\r\n.template_wrapper .file-name-span {\r\n font-size: 14px;\r\n}\r\n\r\n\r\n.e-bigger .template_wrapper .file-name-span {\r\n font-size: 15px;\r\n}\r\n\r\n.template_wrapper .e-file-select-wrap {\r\n display: none;\r\n}\r\n\r\n.template_wrapper .e-upload {\r\n float: none;\r\n border: none;\r\n}\r\n\r\n.template_wrapper .ul-element {\r\n list-style: none;\r\n width: 100%;\r\n padding-left: 0;\r\n}\r\n\r\n.template_wrapper .file-name {\r\n padding: 8px 6px 8px 0;\r\n font-size: 13px;\r\n width: 46%;\r\n display: inline-block;\r\n position: relative;\r\n top: 4px;\r\n}\r\n\r\n.property-section.template-panel .property-panel-section {\r\n position: relative;\r\n padding-left: 30px;\r\n}\r\n.e-bigger .property-section.template-panel .property-panel-section {\r\n padding-left: 35px;\r\n}\r\n.template_wrapper .file-size {\r\n padding: 4px;\r\n font-size: 13px;\r\n width: 18%;\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.template_wrapper .file-lists {\r\n border: 1px solid lightgray;\r\n padding: 0 6px 0 14px;\r\n margin-top: 15px;\r\n position: relative;\r\n background: rgba(0, 0, 0, 0.04);\r\n}\r\n\r\n.template_wrapper .file-size,.template_wrapper .file-name {\r\n font-family: \"Helvetica Neue\", \"Helvetica\", \"Arial\", \"sans-serif\";\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n white-space: nowrap\r\n}\r\n.template_wrapper span.progress-bar-container {\r\n display: block;\r\n float: right;\r\n height: 20px;\r\n right: 13%;\r\n top: 14px;\r\n position: relative;\r\n width: 20%;\r\n}\r\n\r\n.template_wrapper .progress{\r\n width: 100%;\r\n height: 15px;\r\n -webkit-appearance: none;\r\n}\r\n\r\n.template_wrapper .close-icon-container\r\n{\r\n cursor: pointer;\r\n font-size: 11px;\r\n height: 26px;\r\n margin: 0 12px 0 22px;\r\n padding: 0;\r\n position: absolute;\r\n right: 0;\r\n width: 26px;\r\n top: 6px;\r\n}\r\n\r\n.template_wrapper .close-icon-container.e-icons::before {\r\n left: 7px;\r\n position: inherit;\r\n top: 7px;\r\n content: '\\e932';\r\n}\r\n\r\n.template_wrapper .close-icon-container.delete-icon::before {\r\n content: '\\e94a';\r\n}\r\n\r\n.template_wrapper .close-icon-container:hover {\r\n background-color: rgba(0, 0, 0, 0.12);\r\n border-color: transparent;\r\n border-radius: 50%;\r\n box-shadow: 0 0 0 transparent;\r\n}\r\n\r\n.highcontrast .close-icon-container:hover {\r\n background-color: #ffd939;\r\n color: black;\r\n}\r\n\r\n.highcontrast .close-icon-container {\r\n color: #ffffff;\r\n}\r\n\r\n.template_wrapper .upload-success {\r\n color: #2bc700;\r\n}\r\n\r\n.template_wrapper .upload-fails {\r\n color: #f44336;\r\n}\r\n\r\n.template_wrapper progress::-webkit-progress-bar {\r\n border: 1px solid lightgrey;\r\n background-color: #ffffff;\r\n border-radius: 2px;\r\n}\r\n#dropArea progress {\r\n border: 1px solid lightgrey;\r\n background-color: #ffffff;\r\n border-radius: 2px;\r\n}\r\n.highcontrast #dropArea progress {\r\n background-color: #000000;\r\n}\r\n.highcontrast .template_wrapper progress::-webkit-progress-bar {\r\n background-color: #000000;\r\n}\r\n.material .template_wrapper progress::-webkit-progress-value {\r\n border-radius: 2px; \r\n background-color: #ff4081;\r\n}\r\n.bootstrap .template_wrapper progress::-webkit-progress-value {\r\n border-radius: 2px; \r\n background-color: #1f496e;\r\n}\r\n.fabric .template_wrapper progress::-webkit-progress-value {\r\n background-color: #1763ff;\r\n border-radius: 2px; \r\n top: -66px;\r\n}\r\n.highcontrast .template_wrapper progress::-webkit-progress-value {\r\n background-color: #ffd939;\r\n border-radius: 2px; \r\n}\r\n.material .template_wrapper progress::-moz-progress-bar {\r\n border-radius: 2px; \r\n background-color: #ff4081;\r\n}\r\n.bootstrap .template_wrapper progress::-moz-progress-bar {\r\n border-radius: 2px; \r\n background-color: #1f496e;\r\n}\r\n.fabric .template_wrapper progress::-moz-progress-bar {\r\n background-color: #1763ff;\r\n border-radius: 2px; \r\n top: -66px;\r\n}\r\n.highcontrast .template_wrapper progress::-moz-progress-bar {\r\n background-color: #ffd939;\r\n border-radius: 2px; \r\n}\r\n.material .template_wrapper span a {\r\n color:#ff4081;\r\n}\r\n.fabric .template_wrapper span a {\r\n color: #1763ff;\r\n}\r\n.bootstrap .template_wrapper span a {\r\n color: #1f496e;\r\n}\r\n.highcontrast .template_wrapper span a,\r\n.highcontrast .template_wrapper span a:hover {\r\n color: #ffd939;\r\n}\r\n\r\n.custom-panel {\r\n padding-top: 25px;\r\n}","app/property-pane.tsx":"import * as ReactDOM from 'react-dom';\r\nimport * as React from 'react';\r\nexport class PropertyPane extends React.Component<{ title: string }, {}>{\r\n\r\n render() {\r\n return (\r\n <div className='property-panel-section'>\r\n <div className=\"property-panel-header\">\r\n {this.props.title}\r\n </div>\r\n <div className=\"property-panel-content\">\r\n {this.props.children}\r\n </div>\r\n </div>\r\n\r\n )\r\n }\r\n}\r\n","systemjs.config.js":"System.config({\r\n transpiler: \"ts\",\r\n typescriptOptions: {\r\n target: \"es5\",\r\n module: \"commonjs\",\r\n moduleResolution: \"node\",\r\n emitDecoratorMetadata: true,\r\n experimentalDecorators: true,\r\n \"jsx\": \"react\"\r\n },\r\n meta: {\r\n 'typescript': {\r\n \"exports\": \"ts\"\r\n },\r\n '*.json': { loader: 'plugin-json' }\r\n },\r\n paths: {\r\n \"syncfusion:\": \"http://cdn.syncfusion.com/ej2/\"},\r\n map: {\r\n app: 'app',\r\n ts: \"https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js\",\r\n typescript: \"https://unpkg.com/typescript@2.2.2/lib/typescript.js\",\r\n \"plugin-json\":\"https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js\",\r\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\r\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\r\n \"@syncfusion/ej2-splitbuttons\": \"syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js\",\r\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\r\n \"@syncfusion/ej2-maps\": \"syncfusion:ej2-maps/dist/ej2-maps.umd.min.js\",\r\n \"@syncfusion/ej2-treemap\": \"syncfusion:ej2-treemap/dist/ej2-treemap.umd.min.js\",\r\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\r\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\r\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\r\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\r\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\r\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",\r\n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\r\n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",\r\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",\r\n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\r\n \"@syncfusion/ej2-schedule\": \"syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js\",\r\n \"@syncfusion/ej2-pdf-export\": \"syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js\", \r\n \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\r\n \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\", \r\n \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\",\r\n \"@syncfusion/ej2-documenteditor\": \"syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js\",\r\n \"@syncfusion/ej2-notifications\": \"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js\",\r\n \"@syncfusion/ej2-richtexteditor\": \"syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js\",\r\n\t\t\"@syncfusion/ej2-svg-base\": \"syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js\",\r\n \"@syncfusion/ej2-pivotview\": \"syncfusion:ej2-pivotview/dist/ej2-pivotview.umd.min.js\",\r\n \"@syncfusion/ej2-heatmap\": \"syncfusion:ej2-heatmap/dist/ej2-heatmap.umd.min.js\",\r\n \"@syncfusion/ej2-react-base\": \"syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js\",\r\n \"@syncfusion/ej2-react-buttons\": \"syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js\",\r\n \"@syncfusion/ej2-react-splitbuttons\": \"syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js\",\r\n \"@syncfusion/ej2-react-charts\": \"syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js\",\r\n \"@syncfusion/ej2-react-maps\": \"syncfusion:ej2-react-maps/dist/ej2-react-maps.umd.min.js\",\r\n \"@syncfusion/ej2-react-treemap\": \"syncfusion:ej2-react-treemap/dist/ej2-react-treemap.umd.min.js\",\r\n \"@syncfusion/ej2-react-circulargauge\": \"syncfusion:ej2-react-circulargauge/dist/ej2-react-circulargauge.umd.min.js\",\r\n \"@syncfusion/ej2-react-lineargauge\": \"syncfusion:ej2-react-lineargauge/dist/ej2-react-lineargauge.umd.min.js\",\r\n \"@syncfusion/ej2-react-calendars\": \"syncfusion:ej2-react-calendars/dist/ej2-react-calendars.umd.min.js\",\r\n \"@syncfusion/ej2-react-dropdowns\": \"syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js\",\r\n \"@syncfusion/ej2-react-grids\": \"syncfusion:ej2-react-grids/dist/ej2-react-grids.umd.min.js\",\r\n \"@syncfusion/ej2-react-inputs\": \"syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js\",\r\n \"@syncfusion/ej2-react-lists\": \"syncfusion:ej2-react-lists/dist/ej2-react-lists.umd.min.js\",\r\n \"@syncfusion/ej2-react-navigations\": \"syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js\",\r\n \"@syncfusion/ej2-react-popups\": \"syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js\",\r\n \"@syncfusion/ej2-react-schedule\": \"syncfusion:ej2-react-schedule/dist/ej2-react-schedule.umd.min.js\",\r\n \"@syncfusion/ej2-react-documenteditor\": \"syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js\",\r\n \"@syncfusion/ej2-react-notifications\": \"syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.min.js\",\r\n \"@syncfusion/ej2-react-richtexteditor\": \"syncfusion:ej2-react-richtexteditor/dist/ej2-react-richtexteditor.umd.min.js\",\r\n \"@syncfusion/ej2-react-pivotview\": \"syncfusion:ej2-react-pivotview/dist/ej2-react-pivotview.umd.min.js\",\r\n \"@syncfusion/ej2-react-heatmap\": \"syncfusion:ej2-react-heatmap/dist/ej2-react-heatmap.umd.min.js\",\r\n \"react-dom\":\"https://unpkg.com/react-dom@15.5.4/dist/react-dom.min.js\",\r\n \"react\":\"https://unpkg.com/react@15.5.4/dist/react.min.js\",\r\n },\r\n packages: {\r\n 'app': { main: 'index', defaultExtension: 'tsx' },\r\n }\r\n});\r\n\r\nSystem.import('app');","index.html":"<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <title>Uploader · CustomTemplate · Essential JS 2 for React · Syncfusion</title>\r\n <meta charset=\"utf-8\" />\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\" />\r\n <meta http-equiv=\"x-ua-compatible\" content=\"ie=edge\">\r\n <!-- {{:meta}} -->\r\n <meta name=\"author\" content=\"Syncfusion\" />\r\n <script type=\"text/javascript\">\r\n var themeName = location.hash || 'material';\r\n themeName = themeName.replace('#','');\r\n window.ripple = (themeName === \"material\")\r\n document.write('<link href=\"http://cdn.syncfusion.com/ej2/' + themeName + '.css\" rel=\"stylesheet\">');\r\n </script>\r\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\" />\r\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\r\n <script src=\"systemjs.config.js\"></script>\r\n <link href=\"index.css\" rel=\"stylesheet\" />\r\n <style>\r\n #loader {\r\n color: #008cff;\r\n height: 40px;\r\n left: 45%;\r\n position: absolute;\r\n top: 45%;\r\n width: 30%;\r\n }\r\n body {\r\n touch-action:none;\r\n }\r\n .body {\r\n font-family: \"Roboto\", \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\", \"sans-serif\";\r\n }\r\n\r\n .e-view {\r\n bottom: 0;\r\n left: 0;\r\n overflow: hidden;\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n }\r\n\r\n .sb-left {\r\n float: left;\r\n }\r\n\r\n .sb-right {\r\n float: right;\r\n }\r\n\r\n .sb-block {\r\n display: block;\r\n }\r\n\r\n .sb-table {\r\n display: table;\r\n }\r\n\r\n .sb-table-cell {\r\n display: table-cell;\r\n vertical-align: middle;\r\n }\r\n\r\n /*sample header*/\r\n\r\n\r\n .sb-header {\r\n height: 48px;\r\n background: #FFFFFF;\r\n box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12);\r\n z-index: 1001;\r\n opacity: 100;\r\n }\r\n\r\n\r\n .sb-header-left, .sb-header-right {\r\n height: 100%;\r\n }\r\n\r\n #sb-header-text {\r\n padding-left: 22px;\r\n opacity: 0.87;\r\n font-family: Roboto;\r\n font-weight: 500;\r\n font-size: 15px;\r\n color: #000000;\r\n text-align: left;\r\n }\r\n\r\n .header-logo {\r\n float: left;\r\n padding-left: 8px;\r\n padding-right: 22px;\r\n }\r\n\r\n .footer-logo {\r\n background: url(https://ej2.syncfusion.com/home/images/footer-logo.svg) no-repeat right;\r\n height: 40px;\r\n width: 140px;\r\n }\r\n\r\n .sb-header-splitter {\r\n float: left;\r\n border-left: 1px solid rgb(196, 196, 196);\r\n height: 32px;\r\n margin-top: 8px;\r\n padding-left: 22 px;\r\n }\r\n\r\n .sb-header-settings {\r\n display: none;\r\n }\r\n\r\n .product-style a{\r\n padding-right: 15px;\r\n font-family:Roboto;\r\n font-weight: 500;\r\n font-size: 13px;\r\n color: #363636;\r\n text-align: center;\r\n text-decoration: none;\r\n }\r\n .product-style a:hover {\r\n color:#3C78EF;\r\n }\r\n\r\n .sb-download-btn a {\r\n text-decoration: none;\r\n }\r\n\r\n .sb-download-text {\r\n color: #FFFFFF;\r\n }\r\n\r\n .sb-download-wrapper {\r\n padding-right: 27px;\r\n }\r\n\r\n .sb-download-btn:hover .sb-download-btn:focus .sb-download-btn.active {\r\n border-radius: 2px;\r\n font-family: \"Roboto\";\r\n font-weight: bold;\r\n color: #FFFFFF;\r\n }\r\n\r\n .sb-download-btn:hover {\r\n background: #006CE6;\r\n }\r\n\r\n .sb-download-btn:focus {\r\n background: #0051CB;\r\n }\r\n\r\n .sb-download-btn.active {\r\n background: #0036B1;\r\n }\r\n\r\n .sb-download-btn {\r\n background-color: #3C78EF;\r\n opacity: 100;\r\n border-radius: 2px;\r\n font-family: \"Roboto\", \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\", \"sans-serif\";\r\n font-weight: 500;\r\n line-height: 18px;\r\n height: 32px;\r\n border-color: transparent;\r\n }\r\n\r\n .sb-bread-crumb {\r\n padding-left: 20px;\r\n padding-top: 24px;\r\n padding-bottom: 10px;\r\n }\r\n\r\n .category-allcontrols a, .category-text a, .crumb-sample {\r\n display: table;\r\n opacity: 0.87;\r\n font-family: Roboto;\r\n font-weight: 500;\r\n font-size: 15px;\r\n color: #3C78EF;\r\n text-align: left;\r\n text-decoration: none;\r\n }\r\n\r\n .sb-bread-crumb .sb-bread-crumb-text>div {\r\n font-size: 15px;\r\n font-weight: 500;\r\n padding-right: 8px;\r\n cursor: default;\r\n display: table-cell;\r\n }\r\n\r\n .sb-bread-crumb-text>div.seperator {\r\n font-weight: 700;\r\n font-size: 15px;\r\n vertical-align: bottom;\r\n } \r\n\r\n .content {\r\n overflow: auto;\r\n height: calc(100% - 50px);\r\n top: 50px;\r\n }\r\n\r\n\r\n .sample-content {\r\n top: 48px;\r\n background: #FFFFFF;\r\n }\r\n\r\n .div {\r\n display: block;\r\n }\r\n\r\n .control-section {\r\n padding-left: 4px;\r\n }\r\n\r\n .crumb-sample {\r\n color: #000000;\r\n line-height: 18px;\r\n }\r\n\r\n #description {\r\n padding-bottom: 16px;\r\n padding-left: 20px;\r\n opacity: 0.75;\r\n font-family: Roboto;\r\n font-size: 13px;\r\n color: #000000;\r\n text-align: left;\r\n padding-top: 14px;\r\n }\r\n\r\n #action-description {\r\n padding-left: 20px;\r\n padding-bottom: 15px;\r\n opacity: 0.75;\r\n font-family: Roboto;\r\n font-size: 13px;\r\n color: #000000;\r\n text-align: left;\r\n }\r\n\r\n #description-section {\r\n padding-left: 20px;\r\n padding-top: 30px;\r\n opacity: 0.87;\r\n font-family:Roboto;\r\n font-weight: 700;\r\n font-size: 15px;\r\n color: #000000;\r\n text-align: left;\r\n }\r\n\r\n\r\n\r\n </style>\r\n</head>\r\n\r\n<body class='e-view ej2-new' aria-busy=\"true\">\r\n <div class=\"sample-browser\">\r\n <div id='sample-header' class=\"sb-header\" role=\"banner\">\r\n <div class='sb-header-left sb-left sb-table'>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div class=\"header-logo\">\r\n <a href=\"https://ej2.syncfusion.com/home/react.html\" target=\"\" rel=\"noopener noreferrer\">\r\n <div class=\"footer-logo\"> </div>\r\n </a>\r\n </div>\r\n \r\n </div>\r\n <div class=\"sb-header-splitter sb-download-splitter\"></div>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div id='sb-header-text' class='e-sb-header-text'>\r\n \r\n <span class='sb-header-text-left'>Essential JS 2 for React</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class='sb-header-right sb-right sb-table'>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div class='product-style'>\r\n <div><a href=\"https://www.syncfusion.com/products/react/uploader\">PRODUCT DETAILS</a></div>\r\n </div>\r\n </div>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div class=\"sb-header-item sb-table-cell sb-download-wrapper\">\r\n <a href=\"https://www.syncfusion.com/downloads/essential-js2\" target=\"_blank\">\r\n <button id=\"download-now\" class=\"sb-download-btn\">\r\n <span class=\"sb-download-text\">DOWNLOAD</span>\r\n </button>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n <div class ='content e-view'>\r\n <div class='sample-content'>\r\n <div id=\"sample-bread-crumb\" class=\"sb-bread-crumb\">\r\n <div class=\"sb-bread-crumb-text\">\r\n <div class=\"category-allcontrols\"><a href=\"https://ej2.syncfusion.com/react/demos\"><span>All Controls</span></a></div>\r\n <div class=\"category-seperator sb-icons\"> / </div>\r\n <div class=\"category-text bread-ctext\"><a href=\"https://ej2.syncfusion.com/react/demos/#/material/uploader/default.html\"><span>Uploader</span></a></div>\r\n <div class=\"category-seperator sb-icons\"> / </div>\r\n <div class=\"crumb-sample\">CustomTemplate</div>\r\n </div>\r\n </div>\r\n <div class=\"control-content\">\r\n <div id=\"action-description\">\r\n <p>\r\n \n\t\t\t\t<p>This sample demonstrates how to customize the file list with template. Browse or select the files to view the file list template.</p>\n\t\t\t\r\n </p>\r\n </div>\r\n <div class=\"container-fluid\">\r\n <div class=\"control-section\">\r\n <div id='sample'>\r\n <div id='loader'>Loading....</div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div id=\"description-section\">Description</div> \r\n <div id=\"description\">\r\n <p>\r\n \n\t\t\t\t<p>The Uploader component allows to customize its file list using template property. The template used for each file in file list.</p>\n\t\t\t\t<p>For more information, you can refer to the Template section from this <a target=\"_blank\" href=\"https://ej2.syncfusion.com/react/documentation/uploader/template.html#custom-template\">documentation section</a>.</p>\n\t\t\t\r\n </p> \r\n </div> \r\n </div> \r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n</body>\r\n</html>\r\n","app/index.tsx":"import * as ReactDOM from 'react-dom';\r\nimport * as React from 'react';\r\nimport { SampleBase } from './sample-base';\r\nimport { PropertyPane } from './property-pane';\r\nimport {UploaderComponent} from '@syncfusion/ej2-react-inputs';\r\nimport { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';\r\nimport { detach, isNullOrUndefined, createElement, EventHandler, Browser } from '@syncfusion/ej2-base';\r\nimport { FileInfo, SelectedEventArgs, RemovingEventArgs } from '@syncfusion/ej2-inputs';\r\n\r\n\r\nexport class CustomTemplate extends SampleBase<{}, {}> {\r\n// Uploader component\r\npublic uploadObj: UploaderComponent;\r\npublic parentElement : HTMLElement; public proxy : any; public progressbarContainer : HTMLElement;\r\npublic filesDetails : FileInfo[] = [];\r\npublic filesList: HTMLElement[] = [];\r\nprivate dropElement: HTMLElement;\r\nprivate asyncSettings: object;\r\nprivate spinnerRef;\r\nprivate dropRef;\r\nprivate dropContainerRef;\r\nprivate dropContainerEle;\r\nprivate dropAreaEle: HTMLElement;\r\nprivate spinnerElement: HTMLElement;\r\nconstructor(props: {}) {\r\n super(props);\r\n this.removeFiles = this.removeFiles.bind(this);\r\n this.dropAreaEle = null;\r\n this.dropContainerEle = null;\r\n this.dropRef = element => {\r\n this.dropAreaEle = element;\r\n };\r\n this.dropContainerRef = element => {\r\n this.dropContainerEle = element;\r\n };\r\n this.asyncSettings = {\r\n saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',\r\n removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'\r\n };\r\n}\r\n\r\nprivate onSuccess(args: any): void {\r\n let spinnerElement: HTMLElement = this.dropAreaEle;\r\n let li: HTMLElement = this.dropAreaEle.querySelector('[data-file-name=\"' + args.file.name + '\"]');\r\n if (args.operation === 'upload') {\r\n let progressBar: HTMLElement = li.getElementsByTagName('progress')[0];\r\n li.querySelector('.close-icon-container').classList.add('delete-icon');\r\n detach(li.getElementsByTagName('progress')[0]);\r\n (li.querySelector('.file-size') as HTMLElement).style.display = 'inline-block';\r\n (li.querySelector('.file-name') as HTMLElement).style.color = 'green';\r\n (li.querySelector('.e-icons') as HTMLElement).onclick = () => {\r\n createSpinner({ target: spinnerElement, width: '25px' });\r\n showSpinner(spinnerElement);\r\n };\r\n (li.querySelector('.close-icon-container') as HTMLElement).onkeydown = (e: any) => {\r\n if (e.keyCode === 13) {\r\n createSpinner({ target: spinnerElement, width: '25px' });\r\n showSpinner(spinnerElement);\r\n }\r\n };\r\n } else {\r\n this.filesDetails.splice(this.filesList.indexOf(li), 1);\r\n this.filesList.splice(this.filesList.indexOf(li), 1);\r\n\t\tthis.uploadObj.element.value = '';\r\n detach(li);\r\n hideSpinner(spinnerElement);\r\n detach(spinnerElement.querySelector('.e-spinner-pane'));\r\n }\r\n EventHandler.add(li.querySelector('.close-icon-container'), 'click', this.removeFiles, this);\r\n}\r\n\r\nprivate onFileSelect(args : any): void {\r\n if (isNullOrUndefined(this.dropAreaEle.querySelector('.upload-list-root'))) {\r\n this.parentElement = createElement('div', { className: 'upload-list-root' });\r\n this.parentElement.appendChild(createElement('ul', {className: 'ul-element' }));\r\n this.dropAreaEle.appendChild(this.parentElement);\r\n }\r\n for (let i : number = 0; i < args.filesData.length; i++) {\r\n this.formSelectedData(args.filesData[i], this); // create the LI element for each file Data\r\n }\r\n this.filesDetails = this.filesDetails.concat(args.filesData);\r\n this.uploadObj.upload(args.filesData, true);\r\n args.cancel = true;\r\n}\r\n\r\nprivate formSelectedData ( selectedFiles : FileInfo, proxy: any ): void {\r\n let liEle : HTMLElement = createElement('li', { className: 'file-lists', attrs: {'data-file-name' : selectedFiles.name} });\r\n liEle.appendChild(createElement('span', {className: 'file-name ', innerHTML: selectedFiles.name }));\r\n liEle.appendChild(createElement('span', {className: 'file-size ', innerHTML: this.uploadObj.bytesToSize(selectedFiles.size) }));\r\n if (selectedFiles.statusCode === '1') {\r\n this.progressbarContainer = createElement('span', {className: 'progress-bar-container'});\r\n this.progressbarContainer.appendChild(createElement('progress', {className: 'progress', attrs: {value : '0', max : '100'}} ));\r\n liEle.appendChild(this.progressbarContainer);\r\n } else { liEle.querySelector('.file-name').classList.add('upload-fails'); }\r\n let closeIconContainer : HTMLElement = createElement('span', {className: 'e-icons close-icon-container'});\r\n EventHandler.add(closeIconContainer, 'click', this.removeFiles, proxy);\r\n liEle.appendChild(closeIconContainer);\r\n document.querySelector('.ul-element').appendChild(liEle);\r\n this.filesList.push(liEle);\r\n}\r\n\r\nprivate onFileUpload(args : any): void {\r\n let li : Element = this.dropAreaEle.querySelector('[data-file-name=\"' + args.file.name + '\"]');\r\n EventHandler.remove(li.querySelector('.close-icon-container'), 'click', this.removeFiles);\r\n let progressValue : number = Math.round((args.e.loaded / args.e.total) * 100);\r\n if (!isNaN(progressValue)) {\r\n li.getElementsByTagName('progress')[0].value = progressValue; // Updating the progress bar value\r\n }\r\n}\r\n\r\nprivate onUploadFailed(args: any): void {\r\n let li : Element = this.dropAreaEle.querySelector('[data-file-name=\"' + args.file.name + '\"]');\r\n EventHandler.add(li.querySelector('.close-icon-container'), 'click', this.removeFiles, this);\r\n li.querySelector('.file-name ').classList.add('upload-fails');\r\n if (args.operation === 'upload') {\r\n detach(li.querySelector('.progress-bar-container'));\r\n }\r\n}\r\nprivate removeFiles(args: any): void {\r\n let status : string = this.filesDetails[this.filesList.indexOf(args.currentTarget.parentElement)].statusCode;\r\n if (status === '2') {\r\n this.uploadObj.remove(this.filesDetails[this.filesList.indexOf(args.currentTarget.parentElement)]);\r\n } else {\r\n detach(args.currentTarget.parentElement);\r\n }\r\n}\r\nprivate onRemoveFile(args: RemovingEventArgs): void {\r\n args.postRawFile = false;\r\n}\r\npublic rendereComplete(): void {\r\n document.getElementById('browse').onclick = () => {\r\n document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click();\r\n return false;\r\n };\r\n this.dropElement = this.dropContainerEle;\r\n document.getElementById('clearbtn').onclick = () => {\r\n if (!document.getElementsByClassName('upload-list-root')[0]) { return; }\r\n detach(document.getElementsByClassName('upload-list-root')[0]);\r\n this.filesList = [];\r\n this.filesDetails = [];\r\n };\r\n this.uploadObj.element.setAttribute('name', 'UploadFiles');\r\n\tthis.uploadObj.dropArea = this.dropElement;\r\n this.uploadObj.dataBind();\r\n if (Browser.isDevice) {\r\n (this.uploadObj.dropArea.querySelector('drop') as HTMLElement).style.padding = '4% 13%';\r\n }\r\n}\r\n\r\npublic render(): JSX.Element {\r\n return (\r\n <div className = 'control-pane' ref={this.dropContainerRef}>\r\n\t\t\t<div className='control-section uploadpreview'>\r\n\t\t\t\t <div className='col-lg-9'>\r\n\t\t\t\t\t\t <div className='template_wrapper'>\r\n\t\t\t\t\t\t\t{/* Render Uploader */}\r\n\t\t\t\t\t\t\t\t<div id='dropArea' className='dropArea' ref={this.dropRef}>\r\n\t\t\t\t\t\t\t\t\t<span id='drop' className='file-name-span drop'> Drop files here or <a href=\"\" id='browse'><u>Browse</u></a> </span>\r\n\t\t\t\t\t\t\t\t\t\t<UploaderComponent id='fileUpload' type = 'file' ref = {(scope) => {this.uploadObj = scope}}\r\n\t\t\t\t\t\t\t\t\t\t\tasyncSettings = {this.asyncSettings}\r\n success={ this.onSuccess.bind(this) }\r\n removing= { this.onRemoveFile.bind(this)}\r\n\t\t\t\t\t\t\t\t\t\t\tselected= { this.onFileSelect.bind(this) }\r\n\t\t\t\t\t\t\t\t\t\t\tprogress = {this.onFileUpload.bind(this) } // Triggres when upload is in progress\r\n\t\t\t\t\t\t\t\t\t\t\tfailure = { this.onUploadFailed.bind(this) } // Triggres when upload got failed\r\n\t\t\t\t\t\t\t\t\t\t\tdropArea = { this.dropElement }\r\n\t\t\t\t\t\t\t\t\t\t></UploaderComponent>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t\t<div className='property-section template-panel col-lg-3'>\r\n\t\t\t\t\t<PropertyPane title='Properties'>\r\n\t\t\t\t\t\t<div className='custom-panel'>\r\n\t\t\t\t\t\t\t<button className=\"e-btn e-css\" id=\"clearbtn\" title=\"Clear All\">Clear All</button>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</PropertyPane>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n );\r\n }\r\n}\r\n\nReactDOM.render(<CustomTemplate />, document.getElementById('sample'));","app/sample-base.tsx":"import * as ReactDOM from 'react-dom';\r\nimport * as React from 'react';\r\nimport { RouteComponentProps } from 'react-router-dom';\r\nimport { enableRipple } from '@syncfusion/ej2-base';\r\n\r\nenableRipple((window as any).ripple);\r\nexport class SampleBase<P, S> extends React.PureComponent<RouteComponentProps<any> & P, S>{\r\n public rendereComplete(): void {\r\n /**custom render complete function */\r\n }\r\n componentDidMount(): void {\r\n setTimeout(() => {\r\n this.rendereComplete();\r\n }\r\n );\r\n }\r\n}"}