@wavemaker/app-ng-runtime 11.9.0-next.24951 → 11.9.0-next.24956

app-ng-runtime/components/input/file-upload/esm2022/file-upload.props.mjs

@@ -22,6 +22,9 @@ export const registerProps = () => {
         ['selectedFiles', PROP_STRING],
         ['destination', PROP_STRING],
         ['filelistheight', PROP_NUMBER],
+        ['width', { value: 'auto', ...PROP_STRING }],
+        ['showprogressbar', PROP_BOOLEAN],
+        ['showprogressbarpercentage', PROP_BOOLEAN]
     ]));
     registerFormWidget(FormWidgetType.UPLOAD, new Map([
         ['disabled', PROP_BOOLEAN],
@@ -32,4 +35,4 @@ export const registerProps = () => {
         ['required', PROP_BOOLEAN]
     ]));
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmlsZS11cGxvYWQucHJvcHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnRzL3dpZGdldHMvaW5wdXQvZmlsZS11cGxvYWQvc3JjL2ZpbGUtdXBsb2FkLnByb3BzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsV0FBVyxFQUFFLFdBQVcsRUFBRSxRQUFRLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUMzRyxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sVUFBVSxDQUFDO0FBRTFDLE1BQU0sQ0FBQyxNQUFNLGFBQWEsR0FBRyxHQUFHLEVBQUU7SUFDOUIsUUFBUSxDQUNKLGVBQWUsRUFDZixJQUFJLEdBQUcsQ0FDSDtRQUNJLENBQUMsU0FBUyxFQUFFLFdBQVcsQ0FBQztRQUN4QixDQUFDLE1BQU0sRUFBRSxXQUFXLENBQUM7UUFDckIsQ0FBQyxNQUFNLEVBQUUsV0FBVyxDQUFDO1FBQ3JCLENBQUMsV0FBVyxFQUFFLFdBQVcsQ0FBQztRQUMxQixDQUFDLFVBQVUsRUFBRSxXQUFXLENBQUM7UUFDekIsQ0FBQyxVQUFVLEVBQUUsWUFBWSxDQUFDO1FBQzFCLENBQUMsbUJBQW1CLEVBQUcsV0FBVyxDQUFDO1FBQ25DLENBQUMsTUFBTSxFQUFFLEVBQUMsS0FBSyxFQUFFLElBQUksRUFBRSxHQUFHLFlBQVksRUFBQyxDQUFDO1FBQ3hDLENBQUMsVUFBVSxFQUFFLFlBQVksQ0FBQztRQUMxQixDQUFDLGFBQWEsRUFBRSxXQUFXLENBQUM7UUFDNUIsQ0FBQyxhQUFhLEVBQUUsV0FBVyxDQUFDO1FBQzVCLENBQUMsV0FBVyxFQUFFLEVBQUMsS0FBSyxFQUFFLHlCQUF5QixFQUFFLEdBQUcsV0FBVyxFQUFDLENBQUM7UUFDakUsQ0FBQyxnQkFBZ0IsRUFBRSxFQUFDLEtBQUssRUFBRSxFQUFFLEVBQUUsR0FBRyxXQUFXLEVBQUMsQ0FBQztRQUMvQyxDQUFDLGVBQWUsRUFBRSxFQUFDLEtBQUssRUFBRSxPQUFPLEVBQUUsR0FBRyxXQUFXLEVBQUMsQ0FBQztRQUNuRCxDQUFDLE9BQU8sRUFBRSxXQUFXLENBQUM7UUFDdEIsQ0FBQyxZQUFZLEVBQUUsRUFBQyxHQUFHLFdBQVcsRUFBQyxDQUFDO1FBQ2hDLENBQUMsWUFBWSxFQUFFLFdBQVcsQ0FBQztRQUMzQixDQUFDLGVBQWUsRUFBRSxXQUFXLENBQUM7UUFDOUIsQ0FBQyxhQUFhLEVBQUUsV0FBVyxDQUFDO1FBQzVCLENBQUMsZ0JBQWdCLEVBQUUsV0FBVyxDQUFDO0tBQ2xDLENBQ0osQ0FDSixDQUFDO0lBQ0Ysa0JBQWtCLENBQ2QsY0FBYyxDQUFDLE1BQU0sRUFDckIsSUFBSSxHQUFHLENBQUM7UUFDSixDQUFDLFVBQVUsRUFBRSxZQUFZLENBQUM7UUFDMUIsQ0FBQyxZQUFZLEVBQUUsV0FBVyxDQUFDO1FBQzNCLENBQUMsVUFBVSxFQUFFLFdBQVcsQ0FBQztRQUN6QixDQUFDLFVBQVUsRUFBRSxZQUFZLENBQUM7UUFDMUIsQ0FBQyxVQUFVLEVBQUUsWUFBWSxDQUFDO1FBQzFCLENBQUMsVUFBVSxFQUFFLFlBQVksQ0FBQztLQUM3QixDQUFDLENBQ0wsQ0FBQztBQUNOLENBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFBST1BfQk9PTEVBTiwgUFJPUF9OVU1CRVIsIFBST1BfU1RSSU5HLCByZWdpc3RlciwgcmVnaXN0ZXJGb3JtV2lkZ2V0IH0gZnJvbSAnQHdtL2NvbXBvbmVudHMvYmFzZSc7XG5pbXBvcnQgeyBGb3JtV2lkZ2V0VHlwZSB9IGZyb20gJ0B3bS9jb3JlJztcblxuZXhwb3J0IGNvbnN0IHJlZ2lzdGVyUHJvcHMgPSAoKSA9PiB7XG4gICAgcmVnaXN0ZXIoXG4gICAgICAgICd3bS1maWxldXBsb2FkJyxcbiAgICAgICAgbmV3IE1hcChcbiAgICAgICAgICAgIFtcbiAgICAgICAgICAgICAgICBbJ2NhcHRpb24nLCBQUk9QX1NUUklOR10sXG4gICAgICAgICAgICAgICAgWyduYW1lJywgUFJPUF9TVFJJTkddLFxuICAgICAgICAgICAgICAgIFsnaGludCcsIFBST1BfU1RSSU5HXSxcbiAgICAgICAgICAgICAgICBbJ2FyaWFsYWJlbCcsIFBST1BfU1RSSU5HXSxcbiAgICAgICAgICAgICAgICBbJ3RhYmluZGV4JywgUFJPUF9OVU1CRVJdLFxuICAgICAgICAgICAgICAgIFsnbXVsdGlwbGUnLCBQUk9QX0JPT0xFQU5dLFxuICAgICAgICAgICAgICAgIFsnZmlsZXVwbG9hZG1lc3NhZ2UnICwgUFJPUF9TVFJJTkddLFxuICAgICAgICAgICAgICAgIFsnc2hvdycsIHt2YWx1ZTogdHJ1ZSwgLi4uUFJPUF9CT09MRUFOfV0sXG4gICAgICAgICAgICAgICAgWydkaXNhYmxlZCcsIFBST1BfQk9PTEVBTl0sXG4gICAgICAgICAgICAgICAgWydjb250ZW50dHlwZScsIFBST1BfU1RSSU5HXSxcbiAgICAgICAgICAgICAgICBbJ21heGZpbGVzaXplJywgUFJPUF9OVU1CRVJdLFxuICAgICAgICAgICAgICAgIFsnaWNvbmNsYXNzJywge3ZhbHVlOiAnd20tc2wtbCBzbC1jbG91ZC11cGxvYWQnLCAuLi5QUk9QX1NUUklOR31dLFxuICAgICAgICAgICAgICAgIFsnY2xlYXJpY29uY2xhc3MnLCB7dmFsdWU6ICcnLCAuLi5QUk9QX1NUUklOR31dLFxuICAgICAgICAgICAgICAgIFsnY2xlYXJpY29uaGludCcsIHt2YWx1ZTogJ0NsZWFyJywgLi4uUFJPUF9TVFJJTkd9XSxcbiAgICAgICAgICAgICAgICBbJ2NsYXNzJywgUFJPUF9TVFJJTkddLFxuICAgICAgICAgICAgICAgIFsndXBsb2FkcGF0aCcsIHsuLi5QUk9QX1NUUklOR31dLFxuICAgICAgICAgICAgICAgIFsnZGF0YXNvdXJjZScsIFBST1BfU1RSSU5HXSxcbiAgICAgICAgICAgICAgICBbJ3NlbGVjdGVkRmlsZXMnLCBQUk9QX1NUUklOR10sXG4gICAgICAgICAgICAgICAgWydkZXN0aW5hdGlvbicsIFBST1BfU1RSSU5HXSxcbiAgICAgICAgICAgICAgICBbJ2ZpbGVsaXN0aGVpZ2h0JywgUFJPUF9OVU1CRVJdLFxuICAgICAgICAgICAgXVxuICAgICAgICApXG4gICAgKTtcbiAgICByZWdpc3RlckZvcm1XaWRnZXQoXG4gICAgICAgIEZvcm1XaWRnZXRUeXBlLlVQTE9BRCxcbiAgICAgICAgbmV3IE1hcChbXG4gICAgICAgICAgICBbJ2Rpc2FibGVkJywgUFJPUF9CT09MRUFOXSxcbiAgICAgICAgICAgIFsnZXh0ZW5zaW9ucycsIFBST1BfU1RSSU5HXSxcbiAgICAgICAgICAgIFsnZmlsZXR5cGUnLCBQUk9QX1NUUklOR10sXG4gICAgICAgICAgICBbJ211bHRpcGxlJywgUFJPUF9CT09MRUFOXSxcbiAgICAgICAgICAgIFsncmVhZG9ubHknLCBQUk9QX0JPT0xFQU5dLFxuICAgICAgICAgICAgWydyZXF1aXJlZCcsIFBST1BfQk9PTEVBTl1cbiAgICAgICAgXSlcbiAgICApO1xufTtcbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmlsZS11cGxvYWQucHJvcHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnRzL3dpZGdldHMvaW5wdXQvZmlsZS11cGxvYWQvc3JjL2ZpbGUtdXBsb2FkLnByb3BzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxZQUFZLEVBQUUsV0FBVyxFQUFFLFdBQVcsRUFBRSxRQUFRLEVBQUUsa0JBQWtCLEVBQUMsTUFBTSxxQkFBcUIsQ0FBQztBQUN6RyxPQUFPLEVBQUMsY0FBYyxFQUFDLE1BQU0sVUFBVSxDQUFDO0FBRXhDLE1BQU0sQ0FBQyxNQUFNLGFBQWEsR0FBRyxHQUFHLEVBQUU7SUFDOUIsUUFBUSxDQUNKLGVBQWUsRUFDZixJQUFJLEdBQUcsQ0FDSDtRQUNJLENBQUMsU0FBUyxFQUFFLFdBQVcsQ0FBQztRQUN4QixDQUFDLE1BQU0sRUFBRSxXQUFXLENBQUM7UUFDckIsQ0FBQyxNQUFNLEVBQUUsV0FBVyxDQUFDO1FBQ3JCLENBQUMsV0FBVyxFQUFFLFdBQVcsQ0FBQztRQUMxQixDQUFDLFVBQVUsRUFBRSxXQUFXLENBQUM7UUFDekIsQ0FBQyxVQUFVLEVBQUUsWUFBWSxDQUFDO1FBQzFCLENBQUMsbUJBQW1CLEVBQUcsV0FBVyxDQUFDO1FBQ25DLENBQUMsTUFBTSxFQUFFLEVBQUMsS0FBSyxFQUFFLElBQUksRUFBRSxHQUFHLFlBQVksRUFBQyxDQUFDO1FBQ3hDLENBQUMsVUFBVSxFQUFFLFlBQVksQ0FBQztRQUMxQixDQUFDLGFBQWEsRUFBRSxXQUFXLENBQUM7UUFDNUIsQ0FBQyxhQUFhLEVBQUUsV0FBVyxDQUFDO1FBQzVCLENBQUMsV0FBVyxFQUFFLEVBQUMsS0FBSyxFQUFFLHlCQUF5QixFQUFFLEdBQUcsV0FBVyxFQUFDLENBQUM7UUFDakUsQ0FBQyxnQkFBZ0IsRUFBRSxFQUFDLEtBQUssRUFBRSxFQUFFLEVBQUUsR0FBRyxXQUFXLEVBQUMsQ0FBQztRQUMvQyxDQUFDLGVBQWUsRUFBRSxFQUFDLEtBQUssRUFBRSxPQUFPLEVBQUUsR0FBRyxXQUFXLEVBQUMsQ0FBQztRQUNuRCxDQUFDLE9BQU8sRUFBRSxXQUFXLENBQUM7UUFDdEIsQ0FBQyxZQUFZLEVBQUUsRUFBQyxHQUFHLFdBQVcsRUFBQyxDQUFDO1FBQ2hDLENBQUMsWUFBWSxFQUFFLFdBQVcsQ0FBQztRQUMzQixDQUFDLGVBQWUsRUFBRSxXQUFXLENBQUM7UUFDOUIsQ0FBQyxhQUFhLEVBQUUsV0FBVyxDQUFDO1FBQzVCLENBQUMsZ0JBQWdCLEVBQUUsV0FBVyxDQUFDO1FBQy9CLENBQUMsT0FBTyxFQUFFLEVBQUMsS0FBSyxFQUFFLE1BQU0sRUFBRSxHQUFHLFdBQVcsRUFBQyxDQUFDO1FBQzFDLENBQUMsaUJBQWlCLEVBQUUsWUFBWSxDQUFDO1FBQ2pDLENBQUMsMkJBQTJCLEVBQUUsWUFBWSxDQUFDO0tBQzlDLENBQ0osQ0FDSixDQUFDO0lBQ0Ysa0JBQWtCLENBQ2QsY0FBYyxDQUFDLE1BQU0sRUFDckIsSUFBSSxHQUFHLENBQUM7UUFDSixDQUFDLFVBQVUsRUFBRSxZQUFZLENBQUM7UUFDMUIsQ0FBQyxZQUFZLEVBQUUsV0FBVyxDQUFDO1FBQzNCLENBQUMsVUFBVSxFQUFFLFdBQVcsQ0FBQztRQUN6QixDQUFDLFVBQVUsRUFBRSxZQUFZLENBQUM7UUFDMUIsQ0FBQyxVQUFVLEVBQUUsWUFBWSxDQUFDO1FBQzFCLENBQUMsVUFBVSxFQUFFLFlBQVksQ0FBQztLQUM3QixDQUFDLENBQ0wsQ0FBQztBQUNOLENBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7UFJPUF9CT09MRUFOLCBQUk9QX05VTUJFUiwgUFJPUF9TVFJJTkcsIHJlZ2lzdGVyLCByZWdpc3RlckZvcm1XaWRnZXR9IGZyb20gJ0B3bS9jb21wb25lbnRzL2Jhc2UnO1xuaW1wb3J0IHtGb3JtV2lkZ2V0VHlwZX0gZnJvbSAnQHdtL2NvcmUnO1xuXG5leHBvcnQgY29uc3QgcmVnaXN0ZXJQcm9wcyA9ICgpID0+IHtcbiAgICByZWdpc3RlcihcbiAgICAgICAgJ3dtLWZpbGV1cGxvYWQnLFxuICAgICAgICBuZXcgTWFwKFxuICAgICAgICAgICAgW1xuICAgICAgICAgICAgICAgIFsnY2FwdGlvbicsIFBST1BfU1RSSU5HXSxcbiAgICAgICAgICAgICAgICBbJ25hbWUnLCBQUk9QX1NUUklOR10sXG4gICAgICAgICAgICAgICAgWydoaW50JywgUFJPUF9TVFJJTkddLFxuICAgICAgICAgICAgICAgIFsnYXJpYWxhYmVsJywgUFJPUF9TVFJJTkddLFxuICAgICAgICAgICAgICAgIFsndGFiaW5kZXgnLCBQUk9QX05VTUJFUl0sXG4gICAgICAgICAgICAgICAgWydtdWx0aXBsZScsIFBST1BfQk9PTEVBTl0sXG4gICAgICAgICAgICAgICAgWydmaWxldXBsb2FkbWVzc2FnZScgLCBQUk9QX1NUUklOR10sXG4gICAgICAgICAgICAgICAgWydzaG93Jywge3ZhbHVlOiB0cnVlLCAuLi5QUk9QX0JPT0xFQU59XSxcbiAgICAgICAgICAgICAgICBbJ2Rpc2FibGVkJywgUFJPUF9CT09MRUFOXSxcbiAgICAgICAgICAgICAgICBbJ2NvbnRlbnR0eXBlJywgUFJPUF9TVFJJTkddLFxuICAgICAgICAgICAgICAgIFsnbWF4ZmlsZXNpemUnLCBQUk9QX05VTUJFUl0sXG4gICAgICAgICAgICAgICAgWydpY29uY2xhc3MnLCB7dmFsdWU6ICd3bS1zbC1sIHNsLWNsb3VkLXVwbG9hZCcsIC4uLlBST1BfU1RSSU5HfV0sXG4gICAgICAgICAgICAgICAgWydjbGVhcmljb25jbGFzcycsIHt2YWx1ZTogJycsIC4uLlBST1BfU1RSSU5HfV0sXG4gICAgICAgICAgICAgICAgWydjbGVhcmljb25oaW50Jywge3ZhbHVlOiAnQ2xlYXInLCAuLi5QUk9QX1NUUklOR31dLFxuICAgICAgICAgICAgICAgIFsnY2xhc3MnLCBQUk9QX1NUUklOR10sXG4gICAgICAgICAgICAgICAgWyd1cGxvYWRwYXRoJywgey4uLlBST1BfU1RSSU5HfV0sXG4gICAgICAgICAgICAgICAgWydkYXRhc291cmNlJywgUFJPUF9TVFJJTkddLFxuICAgICAgICAgICAgICAgIFsnc2VsZWN0ZWRGaWxlcycsIFBST1BfU1RSSU5HXSxcbiAgICAgICAgICAgICAgICBbJ2Rlc3RpbmF0aW9uJywgUFJPUF9TVFJJTkddLFxuICAgICAgICAgICAgICAgIFsnZmlsZWxpc3RoZWlnaHQnLCBQUk9QX05VTUJFUl0sXG4gICAgICAgICAgICAgICAgWyd3aWR0aCcsIHt2YWx1ZTogJ2F1dG8nLCAuLi5QUk9QX1NUUklOR31dLFxuICAgICAgICAgICAgICAgIFsnc2hvd3Byb2dyZXNzYmFyJywgUFJPUF9CT09MRUFOXSxcbiAgICAgICAgICAgICAgICBbJ3Nob3dwcm9ncmVzc2JhcnBlcmNlbnRhZ2UnLCBQUk9QX0JPT0xFQU5dXG4gICAgICAgICAgICBdXG4gICAgICAgIClcbiAgICApO1xuICAgIHJlZ2lzdGVyRm9ybVdpZGdldChcbiAgICAgICAgRm9ybVdpZGdldFR5cGUuVVBMT0FELFxuICAgICAgICBuZXcgTWFwKFtcbiAgICAgICAgICAgIFsnZGlzYWJsZWQnLCBQUk9QX0JPT0xFQU5dLFxuICAgICAgICAgICAgWydleHRlbnNpb25zJywgUFJPUF9TVFJJTkddLFxuICAgICAgICAgICAgWydmaWxldHlwZScsIFBST1BfU1RSSU5HXSxcbiAgICAgICAgICAgIFsnbXVsdGlwbGUnLCBQUk9QX0JPT0xFQU5dLFxuICAgICAgICAgICAgWydyZWFkb25seScsIFBST1BfQk9PTEVBTl0sXG4gICAgICAgICAgICBbJ3JlcXVpcmVkJywgUFJPUF9CT09MRUFOXVxuICAgICAgICBdKVxuICAgICk7XG59O1xuIl19

app-ng-runtime/components/input/file-upload/fesm2022/index.mjs

@@ -31,6 +31,9 @@ const registerProps = () => {
         ['selectedFiles', PROP_STRING],
         ['destination', PROP_STRING],
         ['filelistheight', PROP_NUMBER],
+        ['width', { value: 'auto', ...PROP_STRING }],
+        ['showprogressbar', PROP_BOOLEAN],
+        ['showprogressbarpercentage', PROP_BOOLEAN]
     ]));
     registerFormWidget(FormWidgetType.UPLOAD, new Map([
         ['disabled', PROP_BOOLEAN],
@@ -48,13 +51,30 @@ const _c2 = (a0, a1) => ({ height: a0, overflow: a1 });
 const _c3 = a0 => ({ width: a0 });
 function FileUploadComponent_div_1_input_6_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 13);
-    i0.ɵɵlistener("change", function FileUploadComponent_div_1_input_6_Template_input_change_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onFileSelect($event, $event.target.files)); })("click", function FileUploadComponent_div_1_input_6_Template_input_click_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onFileElemClick($event)); });
+    i0.ɵɵelementStart(0, "input", 15);
+    i0.ɵɵlistener("click", function FileUploadComponent_div_1_input_6_Template_input_click_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onFileElemClick($event)); })("change", function FileUploadComponent_div_1_input_6_Template_input_change_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onFileSelect($event, $event.target.files)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("accept", ctx_r1.chooseFilter)("disabled", ctx_r1.disabled);
-    i0.ɵɵattribute("aria-label", ctx_r1.arialabel || "File selection field");
+    i0.ɵɵproperty("disabled", ctx_r1.disabled)("accept", ctx_r1.chooseFilter);
+    i0.ɵɵattribute("aria-label", ctx_r1.hint || "File selection field");
+} }
+function FileUploadComponent_div_1_label_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "label", 16);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("innerHtml", ctx_r1.chooseFilter + " only ", i0.ɵɵsanitizeHtml);
+} }
+function FileUploadComponent_div_1_span_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 17);
+    i0.ɵɵtext(1, " . ");
+    i0.ɵɵelementEnd();
+} }
+function FileUploadComponent_div_1_label_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "label", 16);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("innerHtml", ctx_r1.maxfilesize + "MB max", i0.ɵɵsanitizeHtml);
 } }
 function FileUploadComponent_div_1_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -67,11 +87,13 @@ function FileUploadComponent_div_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(6, FileUploadComponent_div_1_input_6_Template, 1, 3, "input", 11);
     i0.ɵɵelementStart(7, "a", 12);
     i0.ɵɵtext(8);
-    i0.ɵɵelementEnd()()()()();
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(9, FileUploadComponent_div_1_label_9_Template, 1, 1, "label", 13)(10, FileUploadComponent_div_1_span_10_Template, 2, 0, "span", 14)(11, FileUploadComponent_div_1_label_11_Template, 1, 1, "label", 13);
+    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c1, ctx_r1.highlightDropArea));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(11, _c1, ctx_r1.highlightDropArea));
     i0.ɵɵadvance();
     i0.ɵɵclassMap(ctx_r1.iconclass);
     i0.ɵɵadvance(2);
@@ -82,10 +104,16 @@ function FileUploadComponent_div_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngIf", ctx_r1.multiple);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r1.fileUploadMessage);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.chooseFilter);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.chooseFilter && ctx_r1.maxfilesize);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.maxfilesize);
 } }
 function FileUploadComponent_div_2_input_3_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 13);
+    i0.ɵɵelementStart(0, "input", 26);
     i0.ɵɵlistener("change", function FileUploadComponent_div_2_input_3_Template_input_change_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onFileSelect($event, $event.target.files)); })("click", function FileUploadComponent_div_2_input_3_Template_input_click_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onFileElemClick($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -95,7 +123,7 @@ function FileUploadComponent_div_2_input_3_Template(rf, ctx) { if (rf & 1) {
 } }
 function FileUploadComponent_div_2_input_4_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 21);
+    i0.ɵɵelementStart(0, "input", 27);
     i0.ɵɵlistener("change", function FileUploadComponent_div_2_input_4_Template_input_change_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onFileSelect($event, $event.target.files)); })("click", function FileUploadComponent_div_2_input_4_Template_input_click_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onFileElemClick($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -104,12 +132,12 @@ function FileUploadComponent_div_2_input_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵattribute("aria-label", ctx_r1.arialabel || "File selection field");
 } }
 function FileUploadComponent_div_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 14)(1, "div", 15)(2, "form", 10);
-    i0.ɵɵtemplate(3, FileUploadComponent_div_2_input_3_Template, 1, 3, "input", 11)(4, FileUploadComponent_div_2_input_4_Template, 1, 3, "input", 16);
-    i0.ɵɵelementStart(5, "button", 17);
-    i0.ɵɵelement(6, "i", 18)(7, "span", 19);
+    i0.ɵɵelementStart(0, "div", 18)(1, "div", 19)(2, "form", 10);
+    i0.ɵɵtemplate(3, FileUploadComponent_div_2_input_3_Template, 1, 3, "input", 20)(4, FileUploadComponent_div_2_input_4_Template, 1, 3, "input", 21);
+    i0.ɵɵelementStart(5, "button", 22);
+    i0.ɵɵelement(6, "i", 23)(7, "span", 24);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelement(8, "div", 20);
+    i0.ɵɵelement(8, "div", 25);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -128,9 +156,9 @@ function FileUploadComponent_div_2_Template(rf, ctx) { if (rf & 1) {
 } }
 function FileUploadComponent_button_3_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 22);
+    i0.ɵɵelementStart(0, "button", 28);
     i0.ɵɵlistener("click", function FileUploadComponent_button_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openFileSelector()); });
-    i0.ɵɵelement(1, "i")(2, "span", 19);
+    i0.ɵɵelement(1, "i")(2, "span", 24);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -140,8 +168,15 @@ function FileUploadComponent_button_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("innerHTML", ctx_r1.caption, i0.ɵɵsanitizeHtml);
 } }
-function FileUploadComponent_ul_4_div_1_li_1_span_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 36);
+function FileUploadComponent_ul_4_div_1_li_1_span_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span");
+    i0.ɵɵpipe(1, "stateClass");
+} if (rf & 2) {
+    const ft_r7 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵclassMapInterpolate1("status-icon ", i0.ɵɵpipeBind1(1, 3, ft_r7.status), "");
+} }
+function FileUploadComponent_ul_4_div_1_li_1_span_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 47);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "filesize");
     i0.ɵɵelementEnd();
@@ -150,95 +185,102 @@ function FileUploadComponent_ul_4_div_1_li_1_span_9_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(2, 1, ft_r7.size, 0));
 } }
-function FileUploadComponent_ul_4_div_1_li_1_div_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 37);
-    i0.ɵɵelement(1, "div", 38);
+function FileUploadComponent_ul_4_div_1_li_1_span_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 34);
+    i0.ɵɵpipe(1, "stateClass");
+} if (rf & 2) {
+    const ft_r7 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassMapInterpolate1("status-icon ", i0.ɵɵpipeBind1(1, 4, ft_r7.status), "");
+    i0.ɵɵpropertyInterpolate("title", ft_r7.errMsg || ctx_r1.appLocale.MESSAGE_FILE_UPLOAD_FAILED);
+} }
+function FileUploadComponent_ul_4_div_1_li_1_span_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 48);
+    i0.ɵɵtext(1, "Upload Failed");
+    i0.ɵɵelementEnd();
+} }
+function FileUploadComponent_ul_4_div_1_li_1_div_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 49);
+    i0.ɵɵelement(1, "div", 50);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ft_r7 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(1, _c3, ft_r7.progress + "%"));
-} }
-function FileUploadComponent_ul_4_div_1_li_1_div_11_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 39)(1, "a", 40);
-    i0.ɵɵlistener("click", function FileUploadComponent_ul_4_div_1_li_1_div_11_Template_a_click_1_listener() { i0.ɵɵrestoreView(_r8); const ft_r7 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.abortFileUpload(ft_r7)); });
-    i0.ɵɵelement(2, "i", 41);
-    i0.ɵɵelementEnd()();
+    i0.ɵɵproperty("ngClass", ft_r7.status === "error" ? "progress-bar-danger" : "progress-bar-info")("ngStyle", i0.ɵɵpureFunction1(2, _c3, ft_r7.progress + "%"));
 } }
-function FileUploadComponent_ul_4_div_1_li_1_div_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 39);
-    i0.ɵɵelement(1, "span");
-    i0.ɵɵpipe(2, "stateClass");
+function FileUploadComponent_ul_4_div_1_li_1_div_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 51);
+    i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ft_r7 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵclassMapInterpolate1("status-icon ", i0.ɵɵpipeBind1(2, 3, ft_r7.status), "");
+    i0.ɵɵtextInterpolate1("", ft_r7.progress + "%", " ");
 } }
-function FileUploadComponent_ul_4_div_1_li_1_div_13_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 39)(1, "a", 42);
-    i0.ɵɵlistener("click", function FileUploadComponent_ul_4_div_1_li_1_div_13_Template_a_click_1_listener() { i0.ɵɵrestoreView(_r9); const ft_r7 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.clear(ft_r7)); });
-    i0.ɵɵelement(2, "i");
+function FileUploadComponent_ul_4_div_1_li_1_div_15_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 45)(1, "a", 52);
+    i0.ɵɵlistener("click", function FileUploadComponent_ul_4_div_1_li_1_div_15_Template_a_click_1_listener() { i0.ɵɵrestoreView(_r8); const ft_r7 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.abortFileUpload(ft_r7)); });
+    i0.ɵɵelement(2, "i", 53);
     i0.ɵɵelementEnd()();
+} }
+function FileUploadComponent_ul_4_div_1_li_1_a_17_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "a", 54);
+    i0.ɵɵlistener("click", function FileUploadComponent_ul_4_div_1_li_1_a_17_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r9); const ft_r7 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.clear(ft_r7)); });
+    i0.ɵɵelement(1, "i");
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵadvance();
     i0.ɵɵpropertyInterpolate("title", ctx_r1.cleariconhint);
     i0.ɵɵadvance();
     i0.ɵɵclassMap(ctx_r1.cleariconclass);
 } }
-function FileUploadComponent_ul_4_div_1_li_1_div_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 43);
-    i0.ɵɵelement(1, "span");
-    i0.ɵɵpipe(2, "stateClass");
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ft_r7 = i0.ɵɵnextContext(2).$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵpropertyInterpolate("title", ft_r7.errMsg || ctx_r1.appLocale.MESSAGE_FILE_UPLOAD_FAILED);
-    i0.ɵɵadvance();
-    i0.ɵɵclassMapInterpolate1("status-icon ", i0.ɵɵpipeBind1(2, 4, ft_r7.status), "");
-} }
 function FileUploadComponent_ul_4_div_1_li_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "li", 26)(1, "div", 27);
-    i0.ɵɵelement(2, "div", 28);
+    i0.ɵɵelementStart(0, "li", 32)(1, "div", 33);
+    i0.ɵɵelement(2, "div", 34);
     i0.ɵɵpipe(3, "fileIconClass");
-    i0.ɵɵelementStart(4, "div", 29)(5, "p", 30)(6, "label", 31);
+    i0.ɵɵelementStart(4, "div", 35)(5, "p", 36)(6, "span", 37);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(8, "br");
-    i0.ɵɵtemplate(9, FileUploadComponent_ul_4_div_1_li_1_span_9_Template, 3, 4, "span", 32);
+    i0.ɵɵtemplate(8, FileUploadComponent_ul_4_div_1_li_1_span_8_Template, 2, 5, "span", 38);
+    i0.ɵɵelement(9, "br");
+    i0.ɵɵtemplate(10, FileUploadComponent_ul_4_div_1_li_1_span_10_Template, 3, 4, "span", 39)(11, FileUploadComponent_ul_4_div_1_li_1_span_11_Template, 2, 6, "span", 40)(12, FileUploadComponent_ul_4_div_1_li_1_span_12_Template, 2, 0, "span", 41);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(10, FileUploadComponent_ul_4_div_1_li_1_div_10_Template, 2, 3, "div", 33);
+    i0.ɵɵtemplate(13, FileUploadComponent_ul_4_div_1_li_1_div_13_Template, 2, 4, "div", 42)(14, FileUploadComponent_ul_4_div_1_li_1_div_14_Template, 2, 1, "div", 43);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(11, FileUploadComponent_ul_4_div_1_li_1_div_11_Template, 3, 0, "div", 34)(12, FileUploadComponent_ul_4_div_1_li_1_div_12_Template, 3, 5, "div", 34)(13, FileUploadComponent_ul_4_div_1_li_1_div_13_Template, 3, 4, "div", 34)(14, FileUploadComponent_ul_4_div_1_li_1_div_14_Template, 3, 6, "div", 35);
-    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(15, FileUploadComponent_ul_4_div_1_li_1_div_15_Template, 3, 0, "div", 44);
+    i0.ɵɵelementStart(16, "div", 45);
+    i0.ɵɵtemplate(17, FileUploadComponent_ul_4_div_1_li_1_a_17_Template, 2, 4, "a", 46);
+    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ft_r7 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassMapInterpolate1("media-left media-middle file-icon ", i0.ɵɵpipeBind1(3, 11, ctx_r1.getFileExtension(ft_r7.name)), "");
+    i0.ɵɵclassMapInterpolate1("media-left media-middle file-icon ", i0.ɵɵpipeBind1(3, 13, ctx_r1.getFileExtension(ft_r7.name)), "");
     i0.ɵɵpropertyInterpolate("title", ctx_r1.getFileExtension(ft_r7.name));
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ft_r7.name);
+    i0.ɵɵtextInterpolate(ft_r7.storageName || ft_r7.name);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ft_r7.status === "success");
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngIf", ft_r7.fileLength !== 0);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ft_r7.status === "onProgress");
+    i0.ɵɵproperty("ngIf", ft_r7.status === "error");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ft_r7.status === "onProgress" || ft_r7.status === "queued");
+    i0.ɵɵproperty("ngIf", ft_r7.status === "error");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ft_r7.status === "success");
+    i0.ɵɵproperty("ngIf", ft_r7.status === "onProgress" || ctx_r1.showprogressbar);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.cleariconclass !== "" && ft_r7.status !== "onProgress");
+    i0.ɵɵproperty("ngIf", (ft_r7.status === "onProgress" || ctx_r1.showprogressbar && ctx_r1.showprogressbarpercentage) && ft_r7.progress);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ft_r7.status === "error");
+    i0.ɵɵproperty("ngIf", ft_r7.status === "onProgress" || ft_r7.status === "queued");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r1.cleariconclass !== "" && ft_r7.status !== "onProgress");
 } }
 function FileUploadComponent_ul_4_div_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div");
-    i0.ɵɵtemplate(1, FileUploadComponent_ul_4_div_1_li_1_Template, 15, 13, "li", 25);
+    i0.ɵɵtemplate(1, FileUploadComponent_ul_4_div_1_li_1_Template, 18, 15, "li", 31);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ft_r7 = ctx.$implicit;
@@ -246,25 +288,25 @@ function FileUploadComponent_ul_4_div_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngIf", ft_r7.status !== "abort");
 } }
 function FileUploadComponent_ul_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "ul", 23);
-    i0.ɵɵtemplate(1, FileUploadComponent_ul_4_div_1_Template, 2, 1, "div", 24);
+    i0.ɵɵelementStart(0, "ul", 29);
+    i0.ɵɵtemplate(1, FileUploadComponent_ul_4_div_1_Template, 2, 1, "div", 30);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction2(2, _c2, ctx_r1.filelistheight, ctx_r1.overflow));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ctx_r1.multiple ? ctx_r1.multipleSelectedFiles : ctx_r1.selectedFiles);
+    i0.ɵɵproperty("ngForOf", ctx_r1.uploadedFiles);
 } }
 function FileUploadComponent_ul_5_li_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "li", 26)(1, "div", 27);
-    i0.ɵɵelement(2, "div", 46);
-    i0.ɵɵelementStart(3, "div", 29)(4, "p", 30)(5, "label", 31);
+    i0.ɵɵelementStart(0, "li", 32)(1, "div", 33);
+    i0.ɵɵelement(2, "div", 57);
+    i0.ɵɵelementStart(3, "div", 35)(4, "p", 58)(5, "label", 37);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
     i0.ɵɵelement(7, "br");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 39);
-    i0.ɵɵelement(9, "span", 47);
+    i0.ɵɵelementStart(8, "div", 45);
+    i0.ɵɵelement(9, "span", 59);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ft_r10 = ctx.$implicit;
@@ -272,8 +314,8 @@ function FileUploadComponent_ul_5_li_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate(ft_r10.name);
 } }
 function FileUploadComponent_ul_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "ul", 44);
-    i0.ɵɵtemplate(1, FileUploadComponent_ul_5_li_1_Template, 10, 1, "li", 45);
+    i0.ɵɵelementStart(0, "ul", 55);
+    i0.ɵɵtemplate(1, FileUploadComponent_ul_5_li_1_Template, 10, 1, "li", 56);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -390,8 +432,8 @@ class FileUploadComponent extends StylableComponent {
      * @param $files
      */
     onSelectEventCall($event, $files) {
-        this.multipleSelectedFiles = this.multiple ? [...this.multipleSelectedFiles, ...$files] : $files;
         this.selectedFiles = $files;
+        this.uploadedFiles = this.multiple ? [...this.uploadedFiles, ...$files] : $files;
         setTimeout(() => {
             this.invokeEventCallback('select', {
                 $event: $.extend($event.$files || {}, $files),
@@ -413,12 +455,8 @@ class FileUploadComponent extends StylableComponent {
     }
     /*this function to clear the specified file. if argument is not provided, it clears the complete list  */
     clear(fileObj) {
-        if (this.multiple) {
-            this.multipleSelectedFiles = (fileObj) ? this.multipleSelectedFiles.filter((file) => file !== fileObj) : [];
-        }
-        else {
-            this.selectedFiles = (fileObj) ? this.selectedFiles.filter((file) => file !== fileObj) : [];
-        }
+        this.selectedFiles = (fileObj) ? this.selectedFiles.filter((file) => file !== fileObj) : [];
+        this.uploadedFiles = (fileObj) ? this.uploadedFiles.filter((file) => file !== fileObj) : [];
     }
     /*this function to set the class names for clear icon */
     setClearIconClass(classValue) {
@@ -566,7 +604,7 @@ class FileUploadComponent extends StylableComponent {
         this.app = app;
         this.onSelectEvt = onSelectEvt;
         this.selectedFiles = [];
-        this.multipleSelectedFiles = [];
+        this.uploadedFiles = [];
         this.selectedFolders = [];
         this.fileTransfers = {};
         this.caption = 'Upload';
@@ -592,12 +630,6 @@ class FileUploadComponent extends StylableComponent {
         this.defaultAllowedExtensions = this.allowedFileUploadExtensions.split(',').map(item => item.trim()).map(item => item.endsWith('/*') ? item : `.${item}`);
         this.chooseFilter = this.defaultAllowedExtensions.includes('*/*') ? '' : this.defaultAllowedExtensions;
         this.fileUploadMessage = 'Drop your files here or click here to browse';
-        this.uploadedFiles = {
-            fileName: '',
-            path: '',
-            length: '',
-            status: ''
-        };
         this.uploadUrl = 'services';
         // styler(this.nativeElement, this);
     }
@@ -621,9 +653,9 @@ class FileUploadComponent extends StylableComponent {
     static { this.ɵfac = function FileUploadComponent_Factory(t) { return new (t || FileUploadComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1.App), i0.ɵɵinjectAttribute('select.event'), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FileUploadComponent, selectors: [["", "wmFileUpload", ""]], features: [i0.ɵɵProvidersFeature([
                 provideAsWidgetRef(FileUploadComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0, decls: 6, vars: 5, consts: [["init-widget", "", 1, "app-fileupload"], ["class", "app-multi-file-upload", 4, "ngIf"], ["class", "app-single-file-upload", 4, "ngIf"], ["focus-target", "", "class", "app-button btn btn-default", 3, "disabled", "click", 4, "ngIf"], ["class", "list-group file-upload", 3, "ngStyle", 4, "ngIf"], ["class", "list-group file-upload", 3, "ngStyle", "title", 4, "ngIf"], [1, "app-multi-file-upload"], ["id", "dropzone", 1, "drop-box", 3, "click", "dragover", "drop", "ngClass"], [1, "message"], [1, "caption", 3, "innerHtml"], [1, "form-horizontal", 3, "name"], ["class", "file-input", "multiple", "", "name", "files", "type", "file", 3, "accept", "disabled", "change", "click", 4, "ngIf"], ["href", "javascript:void(0);", 1, "app-anchor"], ["multiple", "", "name", "files", "type", "file", 1, "file-input", 3, "change", "click", "accept", "disabled"], [1, "app-single-file-upload"], [1, "app-button-wrapper"], ["class", "file-input", "name", "files", "type", "file", 3, "accept", "disabled", "change", "click", 4, "ngIf"], ["id", "dropzone", "focus-target", "", 1, "app-button", "btn", "btn-default", 3, "ngClass"], ["aria-hidden", "true"], [1, "caption", 3, "innerHTML"], [1, "app-files-upload-status", "single"], ["name", "files", "type", "file", 1, "file-input", 3, "change", "click", "accept", "disabled"], ["focus-target", "", 1, "app-button", "btn", "btn-default", 3, "click", "disabled"], [1, "list-group", "file-upload", 3, "ngStyle"], [4, "ngFor", "ngForOf"], ["class", "list-group-item file-upload-status", 4, "ngIf"], [1, "list-group-item", "file-upload-status"], [1, "media", "upload-file-list"], [3, "title"], [1, "media-body", "media-middle", "file-details"], [1, "uploaddetails"], [1, "upload-title"], ["class", "filesize", 4, "ngIf"], ["class", "progress", 4, "ngIf"], ["class", "media-right media-middle", 4, "ngIf"], ["class", "media-right media-middle", 3, "title", 4, "ngIf"], [1, "filesize"], [1, "progress"], [1, "progress-bar", "progress-bar-striped", "progress-bar-info", 3, "ngStyle"], [1, "media-right", "media-middle"], ["type", "button", 1, "btn", "btn-transparent", "file-upload-stop", 3, "click"], [1, "wi", "wi-close"], ["type", "button", 1, "btn", "btn-transparent", "btn-default", "status-icon", 3, "click", "title"], [1, "media-right", "media-middle", 3, "title"], [1, "list-group", "file-upload", 3, "ngStyle", "title"], ["class", "list-group-item file-upload-status", 4, "ngFor", "ngForOf"], [1, "media-left", "media-middle", "file-icon", "fa", "fa-folder-o"], [1, "status-icon", "wi", "wi-cancel", "text-danger"]], template: function FileUploadComponent_Template(rf, ctx) { if (rf & 1) {
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0, decls: 6, vars: 5, consts: [["init-widget", "", 1, "app-fileupload"], ["class", "app-multi-file-upload", 4, "ngIf"], ["class", "app-single-file-upload", 4, "ngIf"], ["focus-target", "", "class", "app-button btn btn-default", 3, "disabled", "click", 4, "ngIf"], ["class", "list-group file-upload", 3, "ngStyle", 4, "ngIf"], ["class", "list-group file-upload", 3, "ngStyle", "title", 4, "ngIf"], [1, "app-multi-file-upload"], ["id", "dropzone", 1, "drop-box", 3, "click", "dragover", "drop", "ngClass"], [1, "message"], [1, "upload-label", 3, "innerHtml"], [1, "form-horizontal", 3, "name"], ["class", "file-input", "type", "file", "name", "files", "multiple", "", 3, "disabled", "accept", "click", "change", 4, "ngIf"], ["href", "javascript:void(0);", 1, "app-anchor", "upload-label"], ["class", "upload-extensions", 3, "innerHtml", 4, "ngIf"], ["class", "upload-extensions", 4, "ngIf"], ["type", "file", "name", "files", "multiple", "", 1, "file-input", 3, "click", "change", "disabled", "accept"], [1, "upload-extensions", 3, "innerHtml"], [1, "upload-extensions"], [1, "app-single-file-upload"], [1, "app-button-wrapper"], ["class", "file-input", "multiple", "", "name", "files", "type", "file", 3, "accept", "disabled", "change", "click", 4, "ngIf"], ["class", "file-input", "name", "files", "type", "file", 3, "accept", "disabled", "change", "click", 4, "ngIf"], ["id", "dropzone", "focus-target", "", 1, "app-button", "btn", "btn-default", 3, "ngClass"], ["aria-hidden", "true"], [1, "caption", 3, "innerHTML"], [1, "app-files-upload-status", "single"], ["multiple", "", "name", "files", "type", "file", 1, "file-input", 3, "change", "click", "accept", "disabled"], ["name", "files", "type", "file", 1, "file-input", 3, "change", "click", "accept", "disabled"], ["focus-target", "", 1, "app-button", "btn", "btn-default", 3, "click", "disabled"], [1, "list-group", "file-upload", 3, "ngStyle"], [4, "ngFor", "ngForOf"], ["class", "list-group-item file-upload-status", 4, "ngIf"], [1, "list-group-item", "file-upload-status"], [1, "media", "upload-file-list"], [3, "title"], [1, "media-body", "media-middle", "file-details"], [1, "uploaddetails", "col-md-3"], [1, "upload-title"], [3, "class", 4, "ngIf"], ["class", "filesize", 4, "ngIf"], [3, "class", "title", 4, "ngIf"], ["class", "error-message", 4, "ngIf"], ["class", "progress col-md-7 upload-progress", 4, "ngIf"], ["class", "col-md-1 upload-progress-percentage", 4, "ngIf"], ["class", "media-right media-middle", 4, "ngIf"], [1, "media-right", "media-middle"], ["class", "btn btn-transparent btn-default status-icon", "type", "button", 3, "title", "click", 4, "ngIf"], [1, "filesize"], [1, "error-message"], [1, "progress", "col-md-7", "upload-progress"], [1, "progress-bar", "progress-bar-striped", 3, "ngClass", "ngStyle"], [1, "col-md-1", "upload-progress-percentage"], ["type", "button", 1, "btn", "btn-transparent", "file-upload-stop", 3, "click"], [1, "wi", "wi-close"], ["type", "button", 1, "btn", "btn-transparent", "btn-default", "status-icon", 3, "click", "title"], [1, "list-group", "file-upload", 3, "ngStyle", "title"], ["class", "list-group-item file-upload-status", 4, "ngFor", "ngForOf"], [1, "media-left", "media-middle", "file-icon", "fa", "fa-folder-o"], [1, "uploaddetails"], [1, "status-icon", "wi", "wi-cancel", "text-danger"]], template: function FileUploadComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵtemplate(1, FileUploadComponent_div_1_Template, 9, 10, "div", 1)(2, FileUploadComponent_div_2_Template, 9, 10, "div", 2)(3, FileUploadComponent_button_3_Template, 3, 5, "button", 3)(4, FileUploadComponent_ul_4_Template, 2, 5, "ul", 4)(5, FileUploadComponent_ul_5_Template, 2, 6, "ul", 5);
+            i0.ɵɵtemplate(1, FileUploadComponent_div_1_Template, 12, 13, "div", 1)(2, FileUploadComponent_div_2_Template, 9, 10, "div", 2)(3, FileUploadComponent_button_3_Template, 3, 5, "button", 3)(4, FileUploadComponent_ul_4_Template, 2, 5, "ul", 4)(5, FileUploadComponent_ul_5_Template, 2, 6, "ul", 5);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance();
@@ -633,7 +665,7 @@ class FileUploadComponent extends StylableComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx._isCordova);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.selectedFiles.length > 0);
+            i0.ɵɵproperty("ngIf", ctx.uploadedFiles.length > 0);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.selectedFolders.length > 0);
         } }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i2.NgStyle, i3.FileIconClassPipe, i3.FileSizePipe, i3.StateClassPipe], encapsulation: 2 }); }
@@ -642,7 +674,7 @@ class FileUploadComponent extends StylableComponent {
         type: Component,
         args: [{ selector: '[wmFileUpload]', providers: [
                     provideAsWidgetRef(FileUploadComponent)
-                ], template: "<div class=\"app-fileupload\" init-widget>\n    <!-- drag and drop files UI in web -->\n    <div class=\"app-multi-file-upload\" *ngIf=\"!_isMobileType && multiple\">\n        <div id=\"dropzone\" class=\"drop-box\" (click)=\"triggerFileSelect()\" [ngClass]=\"{'highlight-drop-box' : highlightDropArea}\" (dragover)=\"dragOverHandler($event);\" (drop)=\"onFileDrop($event);\">\n            <i class=\"{{iconclass}}\"></i>\n            <div class=\"message\">\n                <label [innerHtml]=\"caption\" class=\"caption\"></label>\n                <form class=\"form-horizontal\" name=\"{{formName}}\">\n                    <input (change)=\"onFileSelect($event, $event.target.files)\" (click)=\"onFileElemClick($event)\" *ngIf=\"multiple\"\n                           [accept]=\"chooseFilter\" [attr.aria-label]=\"arialabel || 'File selection field'\" [disabled]=\"disabled\" class=\"file-input\"\n                           multiple name=\"files\"\n                           type=\"file\">\n                    <a href=\"javascript:void(0);\" class=\"app-anchor\">{{fileUploadMessage}}</a>\n                </form>\n            </div>\n        </div>\n    </div>\n    <!-- single file upload in web and single , multiple file upload UI in mobile runmode -->\n    <div class=\"app-single-file-upload\" *ngIf=\"!_isCordova && (!multiple || _isMobileType)\">\n        <div class=\"app-button-wrapper\">\n            <form class=\"form-horizontal\" name=\"{{formName}}\">\n                <!-- support for file upload in Mobileapp in its runmode (Web) -->\n                <input (change)=\"onFileSelect($event, $event.target.files)\" (click)=\"onFileElemClick($event)\" *ngIf=\"multiple\"\n                       [accept]=\"chooseFilter\" [attr.aria-label]=\"arialabel || 'File selection field'\" [disabled]=\"disabled\" class=\"file-input\"\n                       multiple name=\"files\" type=\"file\">\n                <input (change)=\"onFileSelect($event, $event.target.files)\" (click)=\"onFileElemClick($event)\" *ngIf=\"!multiple\"\n                       [accept]=\"chooseFilter\" [attr.aria-label]=\"arialabel || 'File selection field'\" [disabled]=\"disabled\" class=\"file-input\"\n                       name=\"files\" type=\"file\">\n                <button id=\"dropzone\" focus-target class=\"app-button btn btn-default\" [ngClass]=\"{'highlight-drop-box' : highlightDropArea}\">\n                    <i class=\"{{iconclass}}\" aria-hidden=\"true\"></i>\n                    <span class=\"caption\" [innerHTML]=\"caption\"></span>\n                </button>\n            </form>\n        </div>\n        <div class=\"app-files-upload-status single\"></div>\n    </div>\n    <!-- support for file upload in Mobile Application (device) -->\n    <button *ngIf=\"_isCordova\" focus-target class=\"app-button btn btn-default\" (click)=\"openFileSelector()\" [disabled]=\"disabled\">\n        <i class=\"{{iconclass}}\"></i>\n        <span class=\"caption\" [innerHTML]=\"caption\"></span>\n    </button>\n    <!-- list of selectedfiles UI -->\n    <ul class=\"list-group file-upload\" [ngStyle]=\"{height: filelistheight, overflow: overflow}\" *ngIf=\"selectedFiles.length > 0\" >\n        <div *ngFor=\"let ft of (multiple ? multipleSelectedFiles : selectedFiles)\">\n            <li class=\"list-group-item file-upload-status\" *ngIf=\"ft.status !== 'abort'\">\n                <div class=\"media upload-file-list\">\n                    <div class=\"media-left media-middle file-icon {{getFileExtension(ft.name) | fileIconClass}}\" title=\"{{getFileExtension(ft.name)}}\"></div>\n                    <div class=\"media-body media-middle file-details\">\n                        <p class=\"uploaddetails\">\n                            <label class=\"upload-title\">{{ft.name}}</label><br/>\n                            <span class=\"filesize\" *ngIf=\"ft.fileLength  !== 0\">{{ft.size | filesize:0}}</span>\n                        </p>\n                        <div class=\"progress\" *ngIf=\"ft.status === 'onProgress'\">\n                            <div class=\"progress-bar progress-bar-striped progress-bar-info\" [ngStyle]=\"{width: (ft.progress +'%')}\"></div>\n                        </div>\n                    </div>\n                    <div class=\"media-right media-middle\" *ngIf=\"ft.status === 'onProgress' || ft.status === 'queued'\">\n                        <a class=\"btn btn-transparent file-upload-stop\" type=\"button\" (click)=\"abortFileUpload(ft)\">\n                            <i class=\"wi wi-close\"></i>\n                        </a>\n                    </div>\n\n                    <div class=\"media-right media-middle\"  *ngIf=\"ft.status === 'success'\">\n                        <span class=\"status-icon {{ft.status | stateClass }}\"></span>\n                    </div>\n                    <div *ngIf=\"cleariconclass !== '' && ft.status !== 'onProgress'\" class=\"media-right media-middle\">\n                        <a (click)=\"clear(ft)\" class=\"btn btn-transparent btn-default status-icon\" title=\"{{cleariconhint}}\" type=\"button\">\n                            <i class=\"{{cleariconclass}}\"></i>\n                        </a>\n                    </div>\n                    <div class=\"media-right media-middle\"  *ngIf=\"ft.status === 'error'\" title=\"{{ft.errMsg || this.appLocale.MESSAGE_FILE_UPLOAD_FAILED}}\">\n                        <span class=\"status-icon {{ft.status | stateClass }}\"></span>\n                    </div>\n                </div>\n            </li>\n        </div>\n    </ul>\n    <!-- list of selectedfolders UI to show the error in title -->\n    <ul class=\"list-group file-upload\" [ngStyle]=\"{height: filelistheight, overflow: overflow}\" title=\"{{this.appLocale.MESSAGE_FOLDER_UPLOADS_NOT_ALLOWED}}\" *ngIf=\"selectedFolders.length > 0\" >\n        <li *ngFor=\"let ft of selectedFolders\" class=\"list-group-item file-upload-status\">\n            <div class=\"media upload-file-list\">\n                <div class=\"media-left media-middle file-icon fa fa-folder-o\"></div>\n                <div class=\"media-body media-middle file-details\">\n                    <p class=\"uploaddetails\">\n                        <label class=\"upload-title\">{{ft.name}}</label><br/>\n                    </p>\n                </div>\n                <div class=\"media-right media-middle\" >\n                    <span class=\"status-icon  wi wi-cancel text-danger\"></span>\n                </div>\n            </div>\n        </li>\n    </ul>\n</div>\n" }]
+                ], template: "<div class=\"app-fileupload\" init-widget>\n    <!-- drag and drop files UI in web -->\n    <div class=\"app-multi-file-upload\" *ngIf=\"!_isMobileType && multiple\">\n        <div id=\"dropzone\" class=\"drop-box\" (click)=\"triggerFileSelect()\" [ngClass]=\"{'highlight-drop-box' : highlightDropArea}\" (dragover)=\"dragOverHandler($event);\" (drop)=\"onFileDrop($event);\">\n            <i class=\"{{iconclass}}\"></i>\n            <div class=\"message\">\n                <label [innerHtml]=\"caption\" class=\"upload-label\"></label>\n                <form class=\"form-horizontal\" name=\"{{formName}}\">\n                    <input class=\"file-input\" [attr.aria-label]=\"hint || 'File selection field'\" type=\"file\" name=\"files\" *ngIf=\"multiple\" [disabled]=\"disabled\" [accept]=\"chooseFilter\" (click)=\"onFileElemClick($event)\" (change)=\"onFileSelect($event, $event.target.files)\" multiple >\n                    <a class=\"app-anchor upload-label\" href=\"javascript:void(0);\">{{ fileUploadMessage }}</a>\n                </form>\n                <label *ngIf=\"chooseFilter\" [innerHtml]=\"chooseFilter + ' only '\" class=\"upload-extensions\"></label>\n                <span *ngIf=\"chooseFilter && maxfilesize\" class=\"upload-extensions\"> . </span>\n                <label *ngIf=\"maxfilesize\" [innerHtml]=\"maxfilesize + 'MB max'\" class=\"upload-extensions\"></label>\n            </div>\n        </div>\n    </div>\n    <!-- single file upload in web and single , multiple file upload UI in mobile runmode -->\n    <div class=\"app-single-file-upload\" *ngIf=\"!_isCordova && (!multiple || _isMobileType)\">\n        <div class=\"app-button-wrapper\">\n            <form class=\"form-horizontal\" name=\"{{formName}}\">\n                <!-- support for file upload in Mobileapp in its runmode (Web) -->\n                <input (change)=\"onFileSelect($event, $event.target.files)\" (click)=\"onFileElemClick($event)\" *ngIf=\"multiple\"\n                       [accept]=\"chooseFilter\" [attr.aria-label]=\"arialabel || 'File selection field'\" [disabled]=\"disabled\" class=\"file-input\"\n                       multiple name=\"files\" type=\"file\">\n                <input (change)=\"onFileSelect($event, $event.target.files)\" (click)=\"onFileElemClick($event)\" *ngIf=\"!multiple\"\n                       [accept]=\"chooseFilter\" [attr.aria-label]=\"arialabel || 'File selection field'\" [disabled]=\"disabled\" class=\"file-input\"\n                       name=\"files\" type=\"file\">\n                <button id=\"dropzone\" focus-target class=\"app-button btn btn-default\" [ngClass]=\"{'highlight-drop-box' : highlightDropArea}\">\n                    <i class=\"{{iconclass}}\" aria-hidden=\"true\"></i>\n                    <span class=\"caption\" [innerHTML]=\"caption\"></span>\n                </button>\n            </form>\n        </div>\n        <div class=\"app-files-upload-status single\"></div>\n    </div>\n    <!-- support for file upload in Mobile Application (device) -->\n    <button *ngIf=\"_isCordova\" focus-target class=\"app-button btn btn-default\" (click)=\"openFileSelector()\" [disabled]=\"disabled\">\n        <i class=\"{{iconclass}}\"></i>\n        <span class=\"caption\" [innerHTML]=\"caption\"></span>\n    </button>\n    <!-- list of selectedfiles UI -->\n    <ul class=\"list-group file-upload\" [ngStyle]=\"{height: filelistheight, overflow: overflow}\" *ngIf=\"uploadedFiles.length > 0\" >\n        <div *ngFor=\"let ft of uploadedFiles\">\n            <li class=\"list-group-item file-upload-status\" *ngIf=\"ft.status !== 'abort'\">\n                <div class=\"media upload-file-list\">\n                    <div class=\"media-left media-middle file-icon {{getFileExtension(ft.name) | fileIconClass}}\" title=\"{{getFileExtension(ft.name)}}\"></div>\n                    <div class=\"media-body media-middle file-details\">\n                        <p class=\"uploaddetails col-md-3\">\n                            <span class=\"upload-title\">{{ ft.storageName || ft.name }}</span>\n                            <span *ngIf=\"ft.status === 'success'\"\n                                  class=\"status-icon {{ft.status | stateClass }}\"></span>\n                            <br/>\n                            <span class=\"filesize\" *ngIf=\"ft.fileLength  !== 0\">{{ft.size | filesize:0}}</span>\n                            <span *ngIf=\"ft.status === 'error'\"\n                                  class=\"status-icon {{ft.status | stateClass }}\"\n                                  title=\"{{ft.errMsg || this.appLocale.MESSAGE_FILE_UPLOAD_FAILED}}\"></span>\n                            <span *ngIf=\"ft.status === 'error'\" class=\"error-message\">Upload Failed</span>\n                        </p>\n                        <div *ngIf=\"ft.status === 'onProgress' || showprogressbar\"\n                             class=\"progress col-md-7 upload-progress\">\n                            <div [ngClass]=\"ft.status === 'error' ? 'progress-bar-danger' : 'progress-bar-info'\"\n                                 [ngStyle]=\"{width: (ft.progress +'%')}\"\n                                 class=\"progress-bar progress-bar-striped\"></div>\n                        </div>\n                        <div *ngIf=\"(ft.status === 'onProgress' || showprogressbar && showprogressbarpercentage) && ft.progress \"\n                             class=\"col-md-1 upload-progress-percentage\">{{ ft.progress + '%' }}\n                        </div>\n                    </div>\n                    <div class=\"media-right media-middle\" *ngIf=\"ft.status === 'onProgress' || ft.status === 'queued'\">\n                        <a class=\"btn btn-transparent file-upload-stop\" type=\"button\" (click)=\"abortFileUpload(ft)\">\n                            <i class=\"wi wi-close\"></i>\n                        </a>\n                    </div>\n                    <div class=\"media-right media-middle\">\n                        <a (click)=\"clear(ft)\" *ngIf=\"cleariconclass !== '' && ft.status !== 'onProgress'\"\n                           class=\"btn btn-transparent btn-default status-icon\" title=\"{{cleariconhint}}\" type=\"button\">\n                            <i class=\"{{cleariconclass}}\"></i>\n                        </a>\n                    </div>\n                </div>\n            </li>\n        </div>\n    </ul>\n    <!-- list of selectedfolders UI to show the error in title -->\n    <ul class=\"list-group file-upload\" [ngStyle]=\"{height: filelistheight, overflow: overflow}\" title=\"{{this.appLocale.MESSAGE_FOLDER_UPLOADS_NOT_ALLOWED}}\" *ngIf=\"selectedFolders.length > 0\" >\n        <li *ngFor=\"let ft of selectedFolders\" class=\"list-group-item file-upload-status\">\n            <div class=\"media upload-file-list\">\n                <div class=\"media-left media-middle file-icon fa fa-folder-o\"></div>\n                <div class=\"media-body media-middle file-details\">\n                    <p class=\"uploaddetails\">\n                        <label class=\"upload-title\">{{ft.name}}</label><br/>\n                    </p>\n                </div>\n                <div class=\"media-right media-middle\" >\n                    <span class=\"status-icon  wi wi-cancel text-danger\"></span>\n                </div>\n            </div>\n        </li>\n    </ul>\n</div>\n" }]
     }], () => [{ type: i0.Injector }, { type: i1.App }, { type: undefined, decorators: [{
                 type: Attribute,
                 args: ['select.event']