add checkbox option file upload

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>