diff --git a/demo-shell-ng2/app/components/files/files.component.html b/demo-shell-ng2/app/components/files/files.component.html
index e99f78a2c9..abd3c5b233 100644
--- a/demo-shell-ng2/app/components/files/files.component.html
+++ b/demo-shell-ng2/app/components/files/files.component.html
@@ -120,37 +120,55 @@
 </div>
 
 
+<p style="width:250px;margin: 20px;">
+    <label for="switch-multiple-file" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+        <input type="checkbox" id="switch-multiple-file" class="mdl-switch__input" (change)="toggleMultipleFileUpload()" >
+        <span class="mdl-switch__label">Multiple File Upload</span>
+    </label>
+</p>
 
-<h5>Single file upload</h5>
-<alfresco-upload-button data-automation-id="single-file-upload"
-                        [uploaddirectory]="currentPath"
-                        [currentFolderPath]="currentPath"
-                        (onSuccess)="documentList.reload()">
-</alfresco-upload-button>
 
-<h5>Folder upload</h5>
-<alfresco-upload-button data-automation-id="folder-upload"
-                        [uploaddirectory]="currentPath"
-                        [currentFolderPath]="currentPath"
-                        [uploadFolders]="true"
-                        (onSuccess)="documentList.reload()">
-</alfresco-upload-button>
+<p style="width:250px;margin: 20px;">
+    <label for="switch-folder-upload" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+        <input type="checkbox" id="switch-folder-upload" class="mdl-switch__input" (change)="toggleFolder()">
+        <span class="mdl-switch__label">Folder Upload</span>
+    </label>
+</p>
 
-<h5>Multiple file upload</h5>
-<input type="text" data-automation-id="accepted-files-type" [(ngModel)]="acceptedFilesType">
-<alfresco-upload-button data-automation-id="multiple-file-upload"
-                        [uploaddirectory]="currentPath"
-                        [currentFolderPath]="currentPath"
-                        acceptedFilesType="{{acceptedFilesType}}"
-                        [multipleFiles]="true"
-                        (onSuccess)="documentList.reload()">
-</alfresco-upload-button>
+<p style="width:250px;margin: 20px;">
+    <label for="switch-accepted-file-type" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+        <input type="checkbox" id="switch-accepted-file-type" class="mdl-switch__input" (change)="toggleAcceptedFilesType()">
+        <span class="mdl-switch__label">Filter extension</span>
+    </label>
+</p>
+
+<h5>Upload</h5>
+<br>
+<div *ngIf="acceptedFilesTypeShow">
+    <span class="mdl-input__label">Extension accepted</span>
+    <input type="text" data-automation-id="accepted-files-type" [(ngModel)]="acceptedFilesType">
+    <br/>
+</div>
+<div *ngIf="!acceptedFilesTypeShow">
+    <alfresco-upload-button data-automation-id="multiple-file-upload"
+                            [uploaddirectory]="currentPath"
+                            [currentFolderPath]="currentPath"
+                            [multipleFiles]="multipleFileUpload"
+                            [uploadFolders]="folderUpload"
+                            (onSuccess)="documentList.reload()">
+        <div class="mdl-spinner mdl-js-spinner is-active"></div>
+    </alfresco-upload-button>
+</div>
+<div *ngIf="acceptedFilesTypeShow">
+    <alfresco-upload-button data-automation-id="multiple-file-upload"
+                            [uploaddirectory]="currentPath"
+                            [currentFolderPath]="currentPath"
+                            acceptedFilesType="{{acceptedFilesType}}"
+                            [multipleFiles]="multipleFileUpload"
+                            [uploadFolders]="folderUpload"
+                            (onSuccess)="documentList.reload()">
+        <div class="mdl-spinner mdl-js-spinner is-active"></div>
+    </alfresco-upload-button>
+</div>
 
-<alfresco-viewer [(showViewer)]="fileShowed"
-                 [urlFile]="urlFile"
-                 [fileName]="fileName"
-                 [mimeType]="mimeType"
-                 [overlayMode]="true">
-    <div class="mdl-spinner mdl-js-spinner is-active"></div>
-</alfresco-viewer>
 <file-uploading-dialog #fileDialog></file-uploading-dialog>
diff --git a/demo-shell-ng2/app/components/files/files.component.ts b/demo-shell-ng2/app/components/files/files.component.ts
index 4d549d15e9..98c21b3d1f 100644
--- a/demo-shell-ng2/app/components/files/files.component.ts
+++ b/demo-shell-ng2/app/components/files/files.component.ts
@@ -56,12 +56,14 @@ export class FilesComponent {
     fileName: string;
     mimeType: string;
     fileShowed: boolean = false;
+    multipleFileUpload: boolean = false;
+    folderUpload: boolean = false;
+    acceptedFilesTypeShow: boolean = false;
 
     acceptedFilesType: string = '.jpg,.pdf,.js';
 
-    constructor(
-        private contentService: AlfrescoContentService,
-        documentActions: DocumentActionsService) {
+    constructor(private contentService: AlfrescoContentService,
+                documentActions: DocumentActionsService) {
         documentActions.setHandler('my-handler', this.myDocumentActionHandler.bind(this));
     }
 
@@ -93,4 +95,20 @@ export class FilesComponent {
             this.currentPath = event.path;
         }
     }
+
+    toggleMultipleFileUpload() {
+        this.multipleFileUpload = !this.multipleFileUpload;
+        return this.multipleFileUpload;
+    }
+
+    toggleFolder() {
+        this.multipleFileUpload = false;
+        this.folderUpload = !this.folderUpload;
+        return this.folderUpload;
+    }
+
+    toggleAcceptedFilesType() {
+        this.acceptedFilesTypeShow = !this.acceptedFilesTypeShow;
+        return this.acceptedFilesTypeShow;
+    }
 }