diff --git a/ng2-components/ng2-alfresco-upload/demo/src/main.ts b/ng2-components/ng2-alfresco-upload/demo/src/main.ts
index aa95d8c9c7..f53a6d8b20 100644
--- a/ng2-components/ng2-alfresco-upload/demo/src/main.ts
+++ b/ng2-components/ng2-alfresco-upload/demo/src/main.ts
@@ -36,29 +36,66 @@ import { ALFRESCO_ULPOAD_COMPONENTS, UploadService } from 'ng2-alfresco-upload';
                     Authentication failed to ip {{ host }} with user: admin, admin, you can still try to add a valid ticket to perform
                     operations.
                </div>
-               <hr>
-               <alfresco-upload-button [showUdoNotificationBar]="true"
-                                       [uploadFolders]="false"
-                                       [multipleFiles]="false"
-                                       (onSuccess)="customMethod($event)">
-               </alfresco-upload-button>
 
-               <br><br>
-
-               <alfresco-upload-button [showUdoNotificationBar]="true"
-                                       [uploadFolders]="true"
-                                       [multipleFiles]="false"
-                                       (onSuccess)="customMethod($event)">
-               </alfresco-upload-button>
-
-               <br><br>
-
-               <alfresco-upload-button [showUdoNotificationBar]="true"
-                                       [uploadFolders]="false"
-                                       [multipleFiles]="true"
-                                       (onSuccess)="customMethod($event)">
-               </alfresco-upload-button>
+                <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"
+                                            [versioning] = "versioning"
+                                            (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"
+                                            [versioning] = "versioning"
+                                            (onSuccess)="documentList.reload()">
+                        <div class="mdl-spinner mdl-js-spinner is-active"></div>
+                    </alfresco-upload-button>
+                </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>
+                
+                
+                <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>
+                
+                <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>
+                
+                <p style="width:250px;margin: 20px;">
+                    <label for="switch-versioning" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+                        <input type="checkbox" id="switch-versioning" class="mdl-switch__input" (change)="toggleVersioning()">
+                        <span class="mdl-switch__label">Versioning</span>
+                    </label>
+                </p>
                <br><br>
 
                <alfresco-upload-drag-area (onSuccess)="customMethod($event)" class="upload-border">
@@ -78,6 +115,11 @@ export class MyDemoApp implements OnInit {
 
     public ecmHost: string = 'http://devproducts-platform.alfresco.me';
 
+    multipleFileUpload: boolean = false;
+    folderUpload: boolean = false;
+    acceptedFilesTypeShow: boolean = false;
+    versioning: boolean = false;
+
     ticket: string;
 
     constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
@@ -118,6 +160,28 @@ export class MyDemoApp implements OnInit {
                 this.authenticated = false;
             });
     }
+
+
+    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;
+    }
+
+    toggleVersioning() {
+        this.versioning = !this.versioning;
+        return this.versioning;
+    }
 }
 
 bootstrap(MyDemoApp, [
diff --git a/ng2-components/ng2-alfresco-upload/demo/tslint.json b/ng2-components/ng2-alfresco-upload/demo/tslint.json
index 8c48e76469..e550ac11d4 100644
--- a/ng2-components/ng2-alfresco-upload/demo/tslint.json
+++ b/ng2-components/ng2-alfresco-upload/demo/tslint.json
@@ -26,7 +26,7 @@
     "label-undefined": true,
     "max-line-length": [
       true,
-      140
+      180
     ],
     "member-ordering": [
       true,