From e4546061f1467fb4f5ac290cc43ec1300937bdab Mon Sep 17 00:00:00 2001 From: mauriziovitale84 Date: Tue, 28 Jun 2016 17:56:10 +0100 Subject: [PATCH] Fix upload folder not supported for Safari and Firefox --- .../ng2-alfresco-upload/i18n/en.json | 3 +- .../ng2-alfresco-upload/i18n/it.json | 3 +- .../ng2-alfresco-upload/karma.conf.js | 2 + .../AlfrescoSettingsService.service.mock.ts | 3 + .../src/assets/upload.service.mock.ts | 19 ++- .../upload-button.component.spec.ts | 4 +- .../upload-drag-area.component.spec.ts | 108 ++++++++++++++++++ .../components/upload-drag-area.component.ts | 38 ++++-- 8 files changed, 158 insertions(+), 22 deletions(-) create mode 100644 ng2-components/ng2-alfresco-upload/src/components/upload-drag-area.component.spec.ts diff --git a/ng2-components/ng2-alfresco-upload/i18n/en.json b/ng2-components/ng2-alfresco-upload/i18n/en.json index e1ef9f26ec..9400e18911 100644 --- a/ng2-components/ng2-alfresco-upload/i18n/en.json +++ b/ng2-components/ng2-alfresco-upload/i18n/en.json @@ -8,7 +8,8 @@ "MESSAGES": { "COMPLETED": "uploads complete", "PROGRESS": "Upload in progress...", - "FOLDER_ALREADY_EXIST": "The folder {0} already exist" + "FOLDER_ALREADY_EXIST": "The folder {0} already exist", + "FOLDER_NOT_SUPPORTED": "Folder upload isn't supported by your browser" }, "FILE_INFO": { "NAME": "File name", diff --git a/ng2-components/ng2-alfresco-upload/i18n/it.json b/ng2-components/ng2-alfresco-upload/i18n/it.json index 1fbb24a290..0208da3079 100644 --- a/ng2-components/ng2-alfresco-upload/i18n/it.json +++ b/ng2-components/ng2-alfresco-upload/i18n/it.json @@ -8,7 +8,8 @@ "MESSAGES": { "COMPLETED": "caricamenti completati", "PROGRESS": "caricamento in corso...", - "FOLDER_ALREADY_EXIST": "Cartella {0} già presente" + "FOLDER_ALREADY_EXIST": "Cartella {0} già presente", + "FOLDER_NOT_SUPPORTED": "L' upload di cartelle non é supportato dal tuo browser" }, "FILE_INFO": { "NAME": "Nome file", diff --git a/ng2-components/ng2-alfresco-upload/karma.conf.js b/ng2-components/ng2-alfresco-upload/karma.conf.js index 50ebf5af0b..4c395352d3 100644 --- a/ng2-components/ng2-alfresco-upload/karma.conf.js +++ b/ng2-components/ng2-alfresco-upload/karma.conf.js @@ -15,6 +15,8 @@ module.exports = function (config) { {pattern: 'node_modules/rxjs/**/*.map', included: false, watched: false}, {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false}, {pattern: 'node_modules/@angular/**/*.map', included: false, watched: false}, + + {pattern: 'node_modules/material-design-lite/material.min.js', included: true, watched: false}, {pattern: 'node_modules/ng2-alfresco-core/dist/**/*.js', included: false, served: true, watched: false}, {pattern: 'node_modules/ng2-translate/**/*.js', included: false, served: true, watched: false}, diff --git a/ng2-components/ng2-alfresco-upload/src/assets/AlfrescoSettingsService.service.mock.ts b/ng2-components/ng2-alfresco-upload/src/assets/AlfrescoSettingsService.service.mock.ts index ef573ec215..64b4e105b2 100644 --- a/ng2-components/ng2-alfresco-upload/src/assets/AlfrescoSettingsService.service.mock.ts +++ b/ng2-components/ng2-alfresco-upload/src/assets/AlfrescoSettingsService.service.mock.ts @@ -15,6 +15,9 @@ * limitations under the License. */ +import { Injectable } from '@angular/core'; + +@Injectable() export class AlfrescoSettingsServiceMock { static DEFAULT_HOST_ADDRESS: string = 'fakehost'; diff --git a/ng2-components/ng2-alfresco-upload/src/assets/upload.service.mock.ts b/ng2-components/ng2-alfresco-upload/src/assets/upload.service.mock.ts index c6af150c5d..94ccf1a7fb 100644 --- a/ng2-components/ng2-alfresco-upload/src/assets/upload.service.mock.ts +++ b/ng2-components/ng2-alfresco-upload/src/assets/upload.service.mock.ts @@ -17,20 +17,20 @@ import { Observable } from 'rxjs/Observable'; import { FileModel } from '../models/file.model'; +import { UploadService } from '../services/upload.service'; +import { AlfrescoSettingsService } from 'ng2-alfresco-core'; -export class UploadServiceMock { - - private _baseUrlPath: string = 'fakebaseurlpath'; - private _url: string = 'fakeurl'; - private _formFields: Object = {}; +export class UploadServiceMock extends UploadService { filesUpload$: Observable; totalCompleted$: Observable; + constructor(settings: AlfrescoSettingsService) { + super(settings); + } + public setOptions(options: any): void { - this._url = options._url || this._url; - this._baseUrlPath = options.baseUrlPath || this._baseUrlPath; - this._formFields = options.formFields != null ? options.formFields : this._formFields; + super.setOptions(options); } addToQueue(files: any[]): FileModel[] { @@ -76,7 +76,4 @@ export class UploadServiceMock { public uploadFilesInTheQueue(directory: string, elementEmit: any): void { }; - - - } diff --git a/ng2-components/ng2-alfresco-upload/src/components/upload-button.component.spec.ts b/ng2-components/ng2-alfresco-upload/src/components/upload-button.component.spec.ts index 1a8cb5d43b..b5058ee208 100644 --- a/ng2-components/ng2-alfresco-upload/src/components/upload-button.component.spec.ts +++ b/ng2-components/ng2-alfresco-upload/src/components/upload-button.component.spec.ts @@ -23,7 +23,7 @@ import { TranslationMock } from '../assets/translation.service.mock'; import { UploadServiceMock } from '../assets/upload.service.mock'; import { UploadService } from '../services/upload.service'; import { AlfrescoApiMock } from '../assets/AlfrescoApi.mock'; - +import { AlfrescoSettingsServiceMock } from '../assets/AlfrescoSettingsService.service.mock'; declare var AlfrescoApi: any; @@ -38,7 +38,7 @@ describe('AlfrescoUploadButton', () => { beforeEachProviders(() => { return [ - { provide: AlfrescoSettingsService }, + { provide: AlfrescoSettingsService, useClass: AlfrescoSettingsServiceMock }, { provide: AlfrescoTranslationService, useClass: TranslationMock }, { provide: UploadService, useClass: UploadServiceMock } ]; diff --git a/ng2-components/ng2-alfresco-upload/src/components/upload-drag-area.component.spec.ts b/ng2-components/ng2-alfresco-upload/src/components/upload-drag-area.component.spec.ts new file mode 100644 index 0000000000..27ed88e41d --- /dev/null +++ b/ng2-components/ng2-alfresco-upload/src/components/upload-drag-area.component.spec.ts @@ -0,0 +1,108 @@ +/*! + * @license + * Copyright 2016 Alfresco Software, Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { describe, expect, it, inject, beforeEach, beforeEachProviders } from '@angular/core/testing'; +import { TestComponentBuilder } from '@angular/compiler/testing'; +import { UploadDragAreaComponent } from './upload-drag-area.component'; +import { AlfrescoTranslationService, AlfrescoSettingsService } from 'ng2-alfresco-core'; +import { AlfrescoSettingsServiceMock } from '../assets/AlfrescoSettingsService.service.mock'; +import { TranslationMock } from '../assets/translation.service.mock'; +import { UploadServiceMock } from '../assets/upload.service.mock'; +import { UploadService } from '../services/upload.service'; +import { AlfrescoApiMock } from '../assets/AlfrescoApi.mock'; + +declare var AlfrescoApi: any; + +describe('AlfrescoUploadDragArea', () => { + + let componentFixture; + + beforeEach( () => { + window['AlfrescoApi'] = AlfrescoApiMock; + }); + + beforeEachProviders(() => { + return [ + { provide: AlfrescoSettingsService, useClass: AlfrescoSettingsServiceMock }, + { provide: AlfrescoTranslationService, useClass: TranslationMock }, + { provide: UploadService, useClass: UploadServiceMock } + ]; + }); + + beforeEach( inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { + return tcb + .createAsync(UploadDragAreaComponent) + .then(fixture => componentFixture = fixture); + })); + + it('should show an folder non supported error in console when the file type is empty', () => { + let component = componentFixture.componentInstance; + component.showUdoNotificationBar = false; + spyOn(console, 'error'); + + let fileFake = new File([''], 'folder-fake', {type: ''}); + component.onFilesDropped([fileFake]); + + expect(console.error).toHaveBeenCalledWith('FILE_UPLOAD.MESSAGES.FOLDER_NOT_SUPPORTED'); + }); + + it('should show an folder non supported error in the notification bar when the file type is empty', () => { + let component = componentFixture.componentInstance; + component._showErrorNotificationBar = jasmine.createSpy('_showErrorNotificationBar'); + component.showUdoNotificationBar = true; + + let fileFake = new File([''], 'folder-fake', {type: ''}); + component.onFilesDropped([fileFake]); + + expect(component._showErrorNotificationBar).toHaveBeenCalledWith('FILE_UPLOAD.MESSAGES.FOLDER_NOT_SUPPORTED'); + }); + + it('should upload the list of files dropped', () => { + let component = componentFixture.componentInstance; + component.currentFolderPath = '/root-fake-/sites-fake/folder-fake'; + component.onSuccess = null; + component.showUdoNotificationBar = false; + component._uploaderService.addToQueue = jasmine.createSpy('addToQueue'); + component._uploaderService.uploadFilesInTheQueue = jasmine.createSpy('uploadFilesInTheQueue'); + + componentFixture.detectChanges(); + let fileFake = {name: 'fake-name-1', size: 10, webkitRelativePath: 'fake-folder1/fake-name-1.json'}; + let filesList = [fileFake]; + + component.onFilesDropped(filesList); + expect(component._uploaderService.addToQueue).toHaveBeenCalledWith(filesList); + expect(component._uploaderService.uploadFilesInTheQueue).toHaveBeenCalledWith('/root-fake-/sites-fake/folder-fake', null); + }); + + it('should show the loading messages in the notification bar when the files are dropped', () => { + let component = componentFixture.componentInstance; + component.currentFolderPath = '/root-fake-/sites-fake/folder-fake'; + component.onSuccess = null; + component.showUdoNotificationBar = true; + component._uploaderService.uploadFilesInTheQueue = jasmine.createSpy('uploadFilesInTheQueue'); + component._showUndoNotificationBar = jasmine.createSpy('_showUndoNotificationBar'); + + componentFixture.detectChanges(); + let fileFake = {name: 'fake-name-1', size: 10, webkitRelativePath: 'fake-folder1/fake-name-1.json'}; + let filesList = [fileFake]; + + component.onFilesDropped(filesList); + expect(component._uploaderService.uploadFilesInTheQueue).toHaveBeenCalledWith('/root-fake-/sites-fake/folder-fake', null); + expect(component._showUndoNotificationBar).toHaveBeenCalled(); + }); + +}); diff --git a/ng2-components/ng2-alfresco-upload/src/components/upload-drag-area.component.ts b/ng2-components/ng2-alfresco-upload/src/components/upload-drag-area.component.ts index bdcaa3a1d6..c6994d8acb 100644 --- a/ng2-components/ng2-alfresco-upload/src/components/upload-drag-area.component.ts +++ b/ng2-components/ng2-alfresco-upload/src/components/upload-drag-area.component.ts @@ -76,15 +76,37 @@ export class UploadDragAreaComponent { */ onFilesDropped(files: File[]): void { if (files.length) { - this._uploaderService.addToQueue(files); - this._uploaderService.uploadFilesInTheQueue(this.currentFolderPath, this.onSuccess); - let latestFilesAdded = this._uploaderService.getQueue(); - if (this.showUdoNotificationBar) { - this._showUndoNotificationBar(latestFilesAdded); + if (this.checkValidity(files)) { + this._uploaderService.addToQueue(files); + this._uploaderService.uploadFilesInTheQueue(this.currentFolderPath, this.onSuccess); + let latestFilesAdded = this._uploaderService.getQueue(); + if (this.showUdoNotificationBar) { + this._showUndoNotificationBar(latestFilesAdded); + } + } else { + let errorMessage: any; + errorMessage = this.translate.get('FILE_UPLOAD.MESSAGES.FOLDER_NOT_SUPPORTED'); + if (this.showUdoNotificationBar) { + this._showErrorNotificationBar(errorMessage.value); + } else { + console.error(errorMessage.value); + } } } } + /** + * Check il the file is valid or not + * @param files + * @returns {boolean} + */ + checkValidity(files: File[]): boolean { + if (files.length && files[0].type === '') { + return false; + } + return true; + } + /** * Called when the file are dropped in the drag area * @param item - FileEntity @@ -126,10 +148,12 @@ export class UploadDragAreaComponent { error => { let errorMessagePlaceholder = this.getErrorMessage(error.response); let errorMessage = this.formatString(errorMessagePlaceholder, [folder.name]); - if (errorMessage) { + if (this.showUdoNotificationBar) { this._showErrorNotificationBar(errorMessage); + } else { + console.error(errorMessage); } - console.log(error); + } ); }